/*
 * NAYUTA SITE / Priority-three art-direction craft pass
 * Sources: DESIGN.md + design/presets/<id>/DESIGN.md (NAYUTA's own tokens)
 *
 * Applied AFTER template, components, typography, theme-craft and sections
 * only for three named themes. This is NOT a copy of external CSS.
 *
 * Strictly presentation-only. No display:none of functional content,
 * member gates, contact forms, accessibility labels or advertising notices.
 */

/* CJK precision shared by the three reviewed original presets. */
html[data-site-design="modern-portal"],
html[data-site-design="minimal-corporate"],
html[data-site-design="trust-premium"] {
  --ny-craft-text:var(--ink);
  --ny-craft-muted:var(--muted);
  --ny-craft-rule:var(--line);
  --ny-craft-focus:var(--action);
  font-kerning:normal;
  font-optical-sizing:auto;
}
html[data-site-design="modern-portal"] :is(.hero .hero-copy,.section-description,.about-copy p,.page-copy p),
html[data-site-design="minimal-corporate"] :is(.hero .hero-copy,.section-description,.about-copy p,.page-copy p),
html[data-site-design="trust-premium"] :is(.hero .hero-copy,.section-description,.about-copy p,.page-copy p) {
  word-break:normal;
  line-break:strict;
  overflow-wrap:break-word;
  font-feature-settings:"kern" 1;
}
html[data-site-design="modern-portal"] :is(.hero h1,.section-heading h2),
html[data-site-design="minimal-corporate"] :is(.hero h1,.section-heading h2),
html[data-site-design="trust-premium"] :is(.hero h1,.section-heading h2) {
  font-kerning:normal;
  font-feature-settings:"kern" 1,"palt" 1;
  text-wrap:balance;
}

/* 01 MODERN PORTAL: refined utility over generic decorative cards. */
html[data-site-design="modern-portal"] {
  --ny-heading-size:clamp(36px,3.65vw,57px);
  --ny-heading-weight:660;
  --ny-heading-tracking:-.032em;
  --ny-heading-rule:3px;
  --ny-section-space:clamp(72px,7vw,116px);
  --ny-button-radius:7px;
  --ny-button-min:52px;
  --ny-button-weight:670;
  --ny-card-radius:9px;
  --ny-type-body-leading:1.86;
}
html[data-site-design="modern-portal"] main#main :is(#journal,#about,#faq) .section-heading h2 {
  letter-spacing:-.025em;
  font-weight:650;
  line-height:1.36;
}
html[data-site-design="modern-portal"] main#main #property .property-grid {
  gap:clamp(16px,1.8vw,28px);
}
html[data-site-design="modern-portal"] main#main #property .property-item {
  border-color:var(--ny-craft-rule);
  border-radius:9px;
  box-shadow:0 4px 16px rgba(18,37,50,.07);
}
html[data-site-design="modern-portal"] main#main #property .property-item .property-copy {
  padding:clamp(18px,1.8vw,28px);
}
html[data-site-design="modern-portal"] main#main #property .property-item .card-spec {
  line-height:1.65;
  letter-spacing:0;
}
html[data-site-design="modern-portal"] main#main #property .property-item .card-price {
  font-variant-numeric:tabular-nums;
  letter-spacing:-.012em;
}
html[data-site-design="modern-portal"] main#main #contact::before {
  background:linear-gradient(110deg,var(--brand-dark) 0%,color-mix(in srgb,var(--brand-dark),transparent 22%) 100%);
}
html[data-site-design="modern-portal"] .subpage .page-hero h1 {
  font-size:clamp(33px,3.4vw,54px);
  font-weight:660;
  line-height:1.35;
  letter-spacing:-.025em;
}

/* 02 MINIMAL CORPORATE: architectural spread, purposeful whitespace, quiet hairlines. */
html[data-site-design="minimal-corporate"] {
  --ny-heading-family:var(--font-serif,serif);
  --ny-heading-size:clamp(37px,3.6vw,59px);
  --ny-heading-weight:500;
  --ny-heading-tracking:.012em;
  --ny-heading-rule:1px;
  --ny-section-space:clamp(96px,9.4vw,156px);
  --ny-button-radius:0px;
  --ny-button-min:54px;
  --ny-button-weight:550;
  --ny-button-tracking:.055em;
  --ny-card-radius:0px;
  --ny-card-lift:0px;
  --ny-type-body-leading:1.94;
}
html[data-site-design="minimal-corporate"] main#main .hero .hero-copy-block {
  padding:clamp(42px,5.6vw,96px)!important;
}
html[data-site-design="minimal-corporate"] main#main .hero h1 {
  font-weight:500;
  line-height:1.52!important;
  letter-spacing:.005em!important;
}
html[data-site-design="minimal-corporate"] main#main .hero .hero-copy {
  font-size:clamp(15px,1.16vw,17px);
  line-height:1.96;
  letter-spacing:.018em;
  max-width:31em;
}
html[data-site-design="minimal-corporate"] main#main .hero .hero-actions .button {
  border-radius:0!important;
  min-height:54px;
  padding:15px 28px;
  font-weight:550;
  letter-spacing:.055em;
  box-shadow:none;
}
html[data-site-design="minimal-corporate"] main#main .hero .hero-search-panel {
  box-shadow:none!important;
  border-block:1px solid var(--line)!important;
  border-inline:0!important;
}
html[data-site-design="minimal-corporate"] main#main :is(#service,#journal,#about,#news) .section-heading h2 {
  color:var(--brand-dark);
  font-family:var(--font-serif,serif);
  font-weight:500;
  line-height:1.48;
  letter-spacing:.02em;
}
html[data-site-design="minimal-corporate"] main#main #property .property-item {
  box-shadow:none!important;
  border-radius:0!important;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
}
html[data-site-design="minimal-corporate"] main#main #property .property-item figure {
  border-radius:0;
  aspect-ratio:8 / 5;
}
html[data-site-design="minimal-corporate"] main#main #property .property-item .property-copy {
  padding:24px 0 30px;
}
html[data-site-design="minimal-corporate"] main#main #about .about-copy {
  line-height:2;
  letter-spacing:.012em;
}
html[data-site-design="minimal-corporate"] main#main #contact::before {
  background:linear-gradient(105deg,var(--brand-dark),color-mix(in srgb,var(--brand-dark),transparent 24%));
}
html[data-site-design="minimal-corporate"] .subpage .page-hero h1 {
  font-family:var(--font-serif,serif);
  font-weight:500;
  line-height:1.48;
  letter-spacing:.018em;
}

/* 06 TRUST PREMIUM: refined editorial weight, warmth and visual restraint. */
html[data-site-design="trust-premium"] {
  --ny-heading-family:var(--font-serif,serif);
  --ny-heading-size:clamp(39px,3.8vw,62px);
  --ny-heading-weight:500;
  --ny-heading-tracking:.018em;
  --ny-heading-rule:1px;
  --ny-section-space:clamp(102px,10vw,166px);
  --ny-button-radius:0px;
  --ny-button-min:54px;
  --ny-button-weight:570;
  --ny-button-tracking:.08em;
  --ny-card-radius:0px;
  --ny-type-body-leading:1.96;
}
html[data-site-design="trust-premium"] main#main .hero h1 {
  font-family:var(--font-serif,serif);
  font-size:clamp(41px,4.2vw,73px);
  font-weight:500;
  line-height:1.47!important;
  letter-spacing:.017em!important;
}
html[data-site-design="trust-premium"] main#main .hero .hero-copy {
  font-size:clamp(15px,1.22vw,18px);
  line-height:1.96;
  letter-spacing:.018em;
  max-width:34em;
}
html[data-site-design="trust-premium"] main#main .hero .hero-actions .button {
  min-height:56px;
  border-radius:0!important;
  padding:15px 28px;
  font-weight:560;
  letter-spacing:.075em;
  box-shadow:none;
}
/* 06 section-heading typography is owned by theme-sections.css, including
 * Housing Plugin H2s which do not have an ID. */
html[data-site-design="trust-premium"] main#main #about .about-copy {
  max-width:46em;
  line-height:2.0;
}
html[data-site-design="trust-premium"] main#main #property .property-item {
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
html[data-site-design="trust-premium"] main#main #property .property-item figure {
  border-radius:0;
  aspect-ratio:3 / 2;
}
html[data-site-design="trust-premium"] main#main #property .property-item .property-copy {
  padding:28px 0 34px;
}
html[data-site-design="trust-premium"] main#main #property .property-item .card-price {
  font-variant-numeric:tabular-nums;
}
html[data-site-design="trust-premium"] main#main #contact::before {
  background:linear-gradient(100deg,var(--brand-dark) 0%,color-mix(in srgb,var(--brand-dark),transparent 20%));
}
html[data-site-design="trust-premium"] .subpage .page-hero h1 {
  font-family:var(--font-serif,serif);
  font-weight:500;
  line-height:1.51;
  letter-spacing:.022em;
}
html[data-site-design="trust-premium"] .site-footer {
  background:var(--brand-dark);
  color:#fff;
}
html[data-site-design="trust-premium"] .site-footer :is(.footer-top nav a,.footer-bottom,.footer-bottom a,.social-links a) {
  color:#fff;
}

/* Mobile adjustments are composed independently; no scaling of desktop copy. */
@media(max-width:760px){
  html[data-site-design="modern-portal"] {
    --ny-heading-size:clamp(28px,7.4vw,39px);
    --ny-section-space:clamp(56px,10vw,84px);
    --ny-button-min:48px;
  }
  html[data-site-design="modern-portal"] main#main #property .property-item .property-copy {
    padding:16px;
  }

  html[data-site-design="minimal-corporate"] {
    --ny-heading-size:clamp(27px,7vw,39px);
    --ny-section-space:clamp(66px,11vw,98px);
  }
  html[data-site-design="minimal-corporate"] main#main .hero .hero-copy-block {
    padding:clamp(28px,7vw,48px) 24px!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero h1 {
    font-size:clamp(29px,7.7vw,42px)!important;
    line-height:1.46!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero .hero-copy {
    font-size:15px;
    line-height:1.86;
  }
  html[data-site-design="minimal-corporate"] main#main #property .property-item .property-copy {
    padding:16px 0 26px;
  }

  html[data-site-design="trust-premium"] {
    --ny-heading-size:clamp(29px,7.4vw,42px);
    --ny-section-space:clamp(72px,12vw,104px);
  }
  html[data-site-design="trust-premium"] main#main .hero h1 {
    font-size:clamp(29px,7.8vw,44px)!important;
    line-height:1.52!important;
  }
  html[data-site-design="trust-premium"] main#main .hero .hero-copy {
    font-size:15px;
    line-height:1.91;
  }
  html[data-site-design="trust-premium"] main#main #property .property-item .property-copy {
    padding:18px 0 26px;
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-site-design="modern-portal"] :is(.property-item,.hero-actions .button),
  html[data-site-design="minimal-corporate"] :is(.property-item,.hero-actions .button),
  html[data-site-design="trust-premium"] :is(.property-item,.hero-actions .button){
    transition:none!important;animation:none!important;transform:none!important;
  }
}

/* Mobile release polish — three genuinely different art directions, not just
   three colors over the same 540px image + heading layout. Existing tenant
   text, links and functionality remain intact. */
@media(max-width:760px) {
  /* Keep Original's fixed phone blue from leaking into other brand palettes. */
  html[data-site-design="minimal-corporate"] .site-header.masthead .header-phone,
  html[data-site-design="trust-premium"] .site-header.masthead .header-phone {
    background:var(--brand)!important;
    color:#fff!important;
  }
  html[data-site-design="minimal-corporate"] .site-header.masthead .header-member {
    background:#fff!important;
    color:var(--brand-dark)!important;
    border-color:var(--line);
  }
  html[data-site-design="minimal-corporate"] .site-header.masthead .menu-toggle {
    background:#f3f4f2!important;
    color:var(--brand-dark)!important;
  }
  html[data-site-design="trust-premium"] .site-header.masthead .header-member,
  html[data-site-design="trust-premium"] .site-header.masthead .menu-toggle {
    background:var(--brand-dark)!important;
    color:#fff!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] {
    background:#fff!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] > .hero-visual {
    grid-row:1!important;
    height:clamp(270px,43svh,365px)!important;
    min-height:270px!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] > .hero-visual::after {
    background:linear-gradient(0deg,rgba(23,38,47,.18),transparent 80%)!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] > .hero-copy-block {
    display:flex!important;
    grid-row:2!important;
    grid-column:1!important;
    position:relative!important;
    align-self:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:clamp(28px,7vw,48px) 24px 38px!important;
    background:#fff!important;
    color:var(--brand-dark)!important;
    text-align:left!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero-copy-footer {
    display:block!important;
    max-width:100%;
    margin-top:24px;
    padding:0!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .nayuta-template-kicker {
    grid-row:auto;
    margin:0 0 20px!important;
    padding:0!important;
    color:var(--brand)!important;
    letter-spacing:.20em;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] h1 {
    display:block!important;
    grid-row:auto!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    max-width:20ch;
    color:var(--brand-dark)!important;
    font-family:var(--font-serif,serif)!important;
    font-size:clamp(29px,7.7vw,40px)!important;
    font-weight:500!important;
    letter-spacing:.012em!important;
    line-height:1.48!important;
    text-shadow:none!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero-copy {
    display:block!important;
    grid-row:auto!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    color:#34454d!important;
    font-size:15px!important;
    line-height:1.90!important;
    text-shadow:none!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-row:auto!important;
    align-self:auto!important;
    gap:10px;
    margin-top:26px!important;
    padding:0!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero-actions .button {
    min-height:49px;
    border-radius:0!important;
    padding:13px 18px;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero-actions .button-outline {
    color:var(--brand-dark)!important;
    border-color:var(--brand-dark)!important;
    background:transparent!important;
  }
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero .hero-search-panel,
  html[data-site-design="minimal-corporate"] main#main .hero[data-hero-density] .hero-search-panel {
    grid-row:4!important;
  }

  /* 06 mobile hero is owned by theme-sections.css. */
}
/*
 * Modern Portal / coherent mobile first view (2026-10-12 owner review).
 *
 * The density=extended helper signals that copy needs MORE ROOM, not that
 * headline, lead and actions should be separated into different sections.
 * Keep all three in the same photographic row, grow that row with its real
 * content, then overlap the search dock onto the image edge.
 *
 * This deliberately overrides the older mobile display:contents / grid-row:2
 * treatment in theme-craft and modern-portal-v3. Other designs, Original,
 * source content, property search and membership markup are untouched.
 */
@media (max-width:760px) {
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] {
    grid-template-columns:minmax(0,1fr)!important;
    background:var(--brand-dark)!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] > .hero-visual {
    grid-column:1!important;
    grid-row:1!important;
    height:auto!important;
    min-height:0!important;
    align-self:stretch!important;
    z-index:0;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] > .hero-visual::after {
    background:linear-gradient(
      180deg,
      rgba(7,24,35,.56) 0%,
      rgba(7,24,35,.42) 48%,
      rgba(7,24,35,.74) 100%
    )!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] > .hero-copy-block {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:clamp(570px,68svh,730px)!important;
    height:auto!important;
    margin:0!important;
    padding:clamp(42px,8vw,62px) 24px clamp(35px,7vw,52px)!important;
    background:transparent!important;
    color:#fff!important;
    text-align:left!important;
    z-index:2;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] .nayuta-template-kicker {
    display:flex!important;
    grid-row:auto!important;
    align-self:auto!important;
    padding:0!important;
    margin:0 0 clamp(16px,4vw,24px)!important;
    color:#fff!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] h1 {
    display:block!important;
    grid-row:auto!important;
    align-self:auto!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(29px,7.5vw,37px)!important;
    line-height:1.42!important;
    letter-spacing:-.02em!important;
    text-shadow:0 2px 14px rgba(0,0,0,.20)!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] .hero-copy-footer {
    display:block!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:clamp(18px,5vw,28px) 0 0!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] .hero-copy {
    display:block!important;
    grid-row:auto!important;
    align-self:auto!important;
    width:100%!important;
    max-width:55ch!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:clamp(15px,3.85vw,16px)!important;
    line-height:1.82!important;
    text-shadow:0 1px 10px rgba(0,0,0,.24)!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] .hero-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-row:auto!important;
    align-self:auto!important;
    gap:10px!important;
    margin:clamp(20px,5vw,28px) 0 0!important;
    padding:0!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] .hero-actions .button {
    width:100%!important;
    min-height:52px!important;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] > .hero-search-panel {
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    width:calc(100% - 24px)!important;
    margin:-20px 12px 12px!important;
    z-index:4;
  }
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] > .hero-service-links {
    grid-column:1!important;
    grid-row:3!important;
  }
}


/* Modern Portal narrow-phone header clearance.
 * Regression originally introduced before the calligraphy feature (PR #125):
 * vertical flex centering shifted long headlines under the 70px masthead
 * on 320px devices. Keep every word and both CTAs over the same photograph.
 * Scope deliberately limited to 320-350px and extended headlines.
 */
@media (max-width:350px) {
  html[data-site-design="modern-portal"] main#main .hero[data-hero-density="extended"] > .hero-copy-block {
    justify-content:flex-start!important;
    min-height:max(730px,93svh)!important;
    height:auto!important;
    padding:calc(var(--header-height,70px) + 32px) 20px 52px!important;
  }
}