/* ══════════════════════════════════════════════
   HOMEPAGE.CSS
   Homepage-only styles. Does not modify base.css /
   layout.css / components.css / case.css. Scoped to
   website/index.html only — no effect on Case Pages.

   Consolidates (per Homepage Implementation Handoff v1.0
   + 0816 Freeze Reference):
   - Hero / Section Header / Featured Works / About /
     Method / Contact (desktop, "final" pass)
   - Footer (final polish)
   - Mobile responsive (single responsive page instead of
     the Freeze's separate desktop.html / mobile.html)

   Nav visuals/mechanics now use the shared Navigation v2
   implementation (.site-nav--v2, layout.css). This file keeps
   only Homepage's own Nav-adjacent differences: the hero
   archive-link CTA and the #about/#method/#contact anchor
   scroll offsets.
   ══════════════════════════════════════════════ */

/* ────────────────────────────────────────────
   NAV — now uses shared Navigation v2 (.site-nav--v2) in
   layout.css. Homepage keeps only what's genuinely its own:
   the hero archive-link CTA below, and the in-page anchor
   scroll-margin offsets further down (see #about,#method,
   #contact rules in this file).
   ──────────────────────────────────────────── */

/* Hero archive-link CTA — editorial text link: no button, no
   background/border box. A single thin rule sits under the link's
   own content box (text + arrow), so its width always matches the
   text+arrow group rather than a fixed underline. Hover only
   deepens the rule and nudges the arrow — no gap/box motion. */
.hp-hero-archive-link{
  display:inline-flex;align-items:baseline;gap:0.4rem;
  width:fit-content;
  margin-top:1.3rem;
  font-family:var(--sans);font-size:0.76rem;font-weight:400;letter-spacing:0.14em;
  color:var(--text-on-image);text-decoration:none;
  border-bottom:1px solid rgba(247,245,240,0.32);
  padding-bottom:0.32rem;
  transition:color 0.35s ease,border-color 0.35s ease;
}
.hp-hero-archive-arrow{display:inline-block;transition:transform 0.35s ease}
.hp-hero-archive-link:hover{color:var(--accent-celadon);border-color:var(--accent-celadon)}
.hp-hero-archive-link:hover .hp-hero-archive-arrow{transform:translateX(4px)}
.hp-hero-archive-link:focus-visible{outline:1px solid var(--accent-celadon);outline-offset:4px}

/* Hero downward cue — thin vertical line + small chevron, low-key
   semi-transparent white. No button, no ↓ glyph, no SCROLL label,
   no circular frame; deliberately quiet so it doesn't compete with
   the H1 or the subject in the photo. Desktop only (>980px, matching
   layout.css's Nav breakpoint), same threshold as the Hero
   full-viewport rule above. */
.hp-hero-down-cue{
  position:absolute;left:50%;bottom:2.6rem;z-index:3;
  display:none;
  flex-direction:column;align-items:center;
  text-decoration:none;cursor:pointer;
  background:none;border:none;padding:0;
  animation:hpDownCueBreathe 3.4s ease-in-out infinite;
}
.hp-hero-down-cue-line{
  width:1px;height:46px;
  background:rgba(255,255,255,0.52);
}
.hp-hero-down-cue-chevron{
  width:8px;height:8px;
  border-right:1px solid rgba(255,255,255,0.52);
  border-bottom:1px solid rgba(255,255,255,0.52);
  transform:rotate(45deg);
  margin-top:-3px;
}
@keyframes hpDownCueBreathe{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(5px)}
}
@media(prefers-reduced-motion:reduce){.hp-hero-down-cue{animation:none}}
@media(min-width:981px){
  .hp-hero-down-cue{display:flex}
}

/* ────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────── */
.hp-hero{
  position:relative;height:86vh;min-height:600px;overflow:hidden;background:var(--surface-dark);
}
.hp-hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(0.78) saturate(0.97);
  transform:scale(1.045);
  animation:hpHeroIn 2.2s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes hpHeroIn{from{transform:scale(1.09);filter:brightness(0.54) saturate(0.94)}to{transform:scale(1.045);filter:brightness(0.78) saturate(0.97)}}
@media(prefers-reduced-motion:reduce){.hp-hero-img{animation:none}}
.hp-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,25,22,0.02) 0%, rgba(26,25,22,0.04) 45%, rgba(26,25,22,0.42) 100%),
             linear-gradient(90deg, rgba(26,25,22,0.52) 0%, rgba(26,25,22,0.04) 40%);
}
.hp-hero-content{
  position:relative;z-index:2;height:100%;
  max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:5rem;
}
.hp-hero-eyebrow{
  font-family:var(--sans);font-size:0.64rem;letter-spacing:0.4em;
  color:var(--text-on-image-muted);margin-bottom:1.6rem;
}
.hp-hero h1{
  font-family:'Zen Old Mincho',serif;font-weight:400;
  font-size:clamp(2.8rem,4.3vw,3.7rem);
  color:var(--text-on-dark);letter-spacing:0.075em;line-height:1.3;
  white-space:nowrap;margin-bottom:0.7rem;
}
.hp-hero p{
  font-family:var(--serif);font-weight:300;font-size:clamp(0.92rem,1.3vw,1.05rem);
  color:var(--text-on-image);letter-spacing:0.06em;line-height:2;max-width:62ch;white-space:nowrap;
}
/* ────────────────────────────────────────────
   SECTION SHELL + UNIFIED SECTION HEADER
   ──────────────────────────────────────────── */
.hp-section{padding:7rem var(--page-pad)}
.hp-section.tone-raised{background:var(--surface-raised)}

.hp-sh{max-width:var(--page-max);margin:0 auto 3.8rem}
.hp-sh-line{display:flex;align-items:baseline;gap:0.85rem;margin-bottom:1.2rem}
.hp-sh-zh{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--text-primary);letter-spacing:0.12em}
.hp-sh-sep{font-family:var(--sans);font-size:0.9rem;color:var(--ash);font-weight:300}
.hp-sh-en{font-family:var(--sans);font-size:0.72rem;font-weight:400;letter-spacing:0.26em;color:var(--text-secondary);opacity:0.9}
.hp-sh-rule{height:1px;background:linear-gradient(to right,var(--divider-default),transparent)}

/* Anchor offset — required by Handoff §Anchor Offset.
   Sized to the *scrolled* (compact) nav height, since by the
   time a person clicks an in-page nav link they've generally
   already scrolled past the trigger point. Not based on the
   Design Preview review-bar height. */
#about,#method,#contact{scroll-margin-top:76px}

/* ────────────────────────────────────────────
   FEATURED WORKS
   Desktop (≥981px): .hp-fw-strip + .hp-fw-labelrow — one
   continuous image band, unequal widths driven by each work's
   own photo aspect ratio (flex-grow), BEFORE by default,
   AFTER on hover/focus (CSS-only crossfade, unchanged 0.5s).
   Mobile/Touch (≤980px, matching Nav's Desktop/Mobile breakpoint
   in layout.css): .hp-fw-mlist — single column, BEFORE by
   default, passive Before/After loop once each image enters
   the viewport (driven by the IntersectionObserver block in
   index.html's closing <script>). Both layouts share the same
   six image files; only one is shown at a time per breakpoint.
   The display switch itself lives further down this file, in the
   ≤980px media query (grouped with the Nav anchor-offset rule).
   ──────────────────────────────────────────── */

/* — Desktop strip — */
.hp-fw-strip{
  max-width:var(--page-max);margin:0 auto;
  display:flex;gap:2px;
}
.hp-fw-figure{
  position:relative;display:block;overflow:hidden;flex:0 1 0%;
  background:var(--surface-dark);text-decoration:none;color:inherit;
}
.hp-fw-figure:focus{outline:none}
.hp-fw-figure:focus-visible{outline:1px solid var(--accent-celadon-border);outline-offset:-2px}

.hp-fw-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hp-fw-layer.after{opacity:0;transition:opacity 0.5s ease}
.hp-fw-figure:hover .hp-fw-layer.after,
.hp-fw-figure:focus .hp-fw-layer.after{opacity:1}

/* 釉里紅三魚紋高足碗的 Before/After 原始長寬比略有差異
   （約 1.0135 對 1.045）。用 object-fit:contain 各自獨立計算
   縮放時，兩張圖的實際尺寸不完全一致，邊緣會露出下層圖片。
   兩張圖改用完全相同的 object-fit:cover + object-position，
   確保永遠以一致的定位與尺寸完整覆蓋同一個畫框。僅套用於
   三魚紋，鬥彩盤與雙魚洗（本身已是 4:3）不受影響。 */
.hp-fw-layer--tf{object-fit:cover;object-position:50% 42%}

.hp-fw-labelrow{
  max-width:var(--page-max);margin:0 auto;
  display:flex;gap:2px;
}
.hp-fw-labelrow a{text-decoration:none;color:inherit;display:block;flex:0 1 0%}

/* — Caption: celadon vertical guide + name + fact —
   Shared between Desktop labelrow and Mobile stacked items. */
.hp-fw-textgroup{position:relative;margin-top:13px;padding-left:33px}
.hp-fw-textgroup::before{
  content:'';position:absolute;left:18px;top:3px;width:3px;height:20px;
  background:var(--accent-celadon);
}
.hp-fw-name{
  display:block;font-family:var(--serif);font-weight:400;font-size:1rem;
  letter-spacing:0.05em;color:var(--text-primary);line-height:1.45;
  margin:0 0 0.3rem;transition:color 0.3s ease;
}
.hp-fw-labelrow a:hover .hp-fw-name,
.hp-fw-mitem a:hover .hp-fw-name{color:var(--accent-celadon)}
.hp-fw-fact{
  display:block;font-family:var(--sans);font-style:normal;font-size:0.8rem;
  letter-spacing:0.02em;color:var(--text-body);line-height:1.75;
}

/* — Mobile/Touch single column (hidden on Desktop; shown ≤900px) — */
.hp-fw-mlist{
  max-width:var(--page-max);margin:0 auto;
  display:none;flex-direction:column;gap:2.6rem;
}
.hp-fw-mitem{display:flex;flex-direction:column}
.hp-fw-mfigure{
  position:relative;width:100%;overflow:hidden;display:block;
  background:var(--surface-dark);text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.hp-fw-mfigure:focus{outline:none}
.hp-fw-mfigure:focus-visible{outline:1px solid var(--accent-celadon-border);outline-offset:-2px}
.hp-fw-mlayer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hp-fw-mlayer.after{opacity:0;transition:opacity 0.7s ease}
.hp-fw-mfigure.is-after .hp-fw-mlayer.after{opacity:1}

/* ────────────────────────────────────────────
   ABOUT — dark image-overlay. Desktop values below
   are copied as-is from the confirmed Desktop About
   prototype. Mobile (≤600px) switches to a different
   single-photo composition — see the ≤600px block.
   ──────────────────────────────────────────── */
.hp-about{position:relative;height:auto;min-height:58vh;overflow:hidden;background:var(--surface-dark);padding:0}

/* Mobile-only ratio spacer (padding-top trick for a reliable
   portrait photo height). Inert on desktop. */
.hp-about-ratio{display:none}

.hp-about-media{position:absolute;top:0;left:0;right:0;bottom:0}
.hp-about-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(0.8) saturate(0.95);
  /* Reuses the same crop value the ≤600px rule already used,
     now also applied at desktop so the hands/bowl/tools stay in
     frame at this wide aspect ratio. */
  object-position:42% 55%;
}
.hp-about-scrim{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(90deg, rgba(26,25,22,0.92) 0%, rgba(26,25,22,0.8) 34%, rgba(26,25,22,0.32) 58%, rgba(26,25,22,0.62) 100%),
    radial-gradient(ellipse 42% 58% at 68% 58%, rgba(26,25,22,0) 0%, rgba(26,25,22,0.55) 100%);
}

.hp-about-content{
  position:relative;z-index:2;
  max-width:var(--page-max);margin:0 auto;
  padding:4.6rem var(--page-pad) 5.4rem;
  display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;
  min-height:58vh;
  justify-content:center;
}
.hp-about-content .hp-sh{margin:0 0 2rem 0}
.hp-about-content .hp-sh-zh{color:var(--text-on-dark)}
.hp-about-content .hp-sh-sep,
.hp-about-content .hp-sh-en{color:var(--text-on-image-muted)}

/* Main story copy — fixed manual line breaks (<br>), and
   white-space:nowrap so a line can never re-wrap mid-character;
   the column is sized to content rather than a ch-based max-width. */
.hp-about-story-main{max-width:none}
.hp-about-story-main p{
  font-family:var(--serif);font-weight:300;font-size:1rem;
  color:var(--text-on-image);line-height:2.35;letter-spacing:0.055em;
  margin:0;white-space:nowrap;
}
.hp-about-story-main p + p{margin-top:1.5rem}

/* ── Desktop brand typography — 彌／猴／陶 + line + gloss ──
   One asymmetric group: 彌 sits large at the top, pulled close to
   the 猴／陶 ＋ line ＋ gloss row directly beneath it so the two
   read as one continuous shape. Hidden on mobile (≤600px). */
.hp-about-brand{
  position:absolute;z-index:2;
  top:8vh; right:7.2vw;
  display:flex;flex-direction:column;align-items:flex-start;
}
.brand-mi{
  height:12rem;width:auto;display:block;
  opacity:0.49;
  margin-bottom:-0.9rem;
  margin-left:-30px;
  -webkit-user-select:none;user-select:none;
}
.brand-row{display:flex;align-items:stretch;gap:1.1rem}
.brand-hotao{display:flex;flex-direction:column;justify-content:space-between}
.brand-hotao img{
  height:5.1rem;width:auto;display:block;
  opacity:0.49;
  -webkit-user-select:none;user-select:none;
}
.brand-hotao img + img{margin-top:0.25rem}
.brand-line{
  width:1px;
  background:var(--divider-on-image, rgba(246,243,236,0.34));
  align-self:center;
  height:9rem;
}
.brand-desc{
  display:flex;flex-direction:column;justify-content:center;
  margin-left:0.9rem;
  font-family:var(--serif);font-weight:300;
  font-size:0.85rem;
  color:var(--text-on-image);
  opacity:0.78;
  letter-spacing:0.05em;
  line-height:2.05;
  white-space:nowrap;
}
.brand-desc .dash{opacity:0.55;margin:0.25rem 0}
.brand-desc .closing{opacity:1}

/* ── Mobile name-gloss footnote — hidden on desktop; positioned
   and styled in the ≤600px block below. ── */
.hp-about-footer{display:none}

/* ────────────────────────────────────────────
   METHOD — icon + heading same row, no cards, no steps
   ──────────────────────────────────────────── */
.hp-method-grid{
  max-width:var(--page-max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.hp-method-col{padding:0 3rem}
.hp-method-col:first-child{padding-left:0}
.hp-method-col:not(:first-child){border-left:1px solid var(--divider-default)}
.hp-method-col:last-child{padding-right:0}
.hp-method-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:0.9rem}
.hp-method-icon{width:60px;height:60px;flex-shrink:0}
.hp-method-icon img{width:100%;height:100%;display:block;object-fit:contain}
.hp-method-title{
  font-family:var(--serif);font-size:1.14rem;font-weight:400;color:var(--text-primary);
  letter-spacing:0.12em;
}
.hp-method-subtitle{
  font-family:var(--sans);font-size:0.74rem;font-weight:400;letter-spacing:0.14em;color:var(--accent-celadon);
  display:block;margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px solid var(--divider-default);
}
.hp-method-col p{
  font-family:var(--serif);font-size:0.88rem;color:var(--text-body);line-height:2.2;letter-spacing:0.04em;
}

/* ────────────────────────────────────────────
   CONTACT — text + horizontal contact channel icons
   ──────────────────────────────────────────── */
.hp-section.contact-compact{padding:3.6rem var(--page-pad)}
.hp-contact-inner{max-width:var(--page-max);margin:0 auto}
.hp-contact-text .hp-sh{margin-bottom:1.6rem}
.hp-contact-text p{font-family:var(--serif);font-size:0.94rem;color:var(--text-body);line-height:2.3;letter-spacing:0.05em;max-width:46ch}
.hp-contact-channels{margin-top:2.4rem;display:flex;align-items:center;gap:2.6rem}
.hp-contact-channel{display:flex;align-items:center;transition:opacity 0.3s}
a.hp-contact-channel{text-decoration:none}
button.hp-contact-channel{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit}
a.hp-contact-channel:hover,
button.hp-contact-channel:hover,
button.hp-contact-channel:focus-visible{opacity:0.7}
.hp-contact-channel img{height:26px;width:auto;display:block}

/* ── QR Modal + Shared Footer CSS now live in layout.css
   (Source of Truth). Removed here to avoid duplication. ── */

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤900px (tablet-ish transitional rules,
   carried over from Homepage Design Spec exploration)
   ══════════════════════════════════════════════ */
@media(max-width:900px){
  .hp-hero{height:78vh}
  .hp-method-grid{grid-template-columns:1fr;gap:2.6rem}
  .hp-method-col{padding:0!important;border-left:none!important}
  .hp-contact-channels{flex-wrap:wrap;gap:1.6rem}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤980px — NAV ANCHOR OFFSET + FEATURED WORKS
   INTERACTION BREAKPOINT
   Nav's compact/mobile-dropdown mechanics now come from shared
   Navigation v2 (layout.css). Homepage keeps only its own
   in-page anchor offset here, since #about/#method/#contact are
   Homepage-specific sections whose scroll position must clear
   the compact sticky nav height.

   Featured Works' Desktop hover-strip ↔ Mobile/Touch passive-loop
   switch is unified to this same 980px breakpoint (previously
   900px), so it always matches Nav's Desktop/Mobile breakpoint —
   901–980px can no longer show both layouts at once, or neither.
   ══════════════════════════════════════════════ */
@media (max-width:980px){
  #about,#method,#contact{scroll-margin-top:66px}
  .hp-fw-strip,.hp-fw-labelrow{display:none}
  .hp-fw-mlist{display:flex}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤600px (Mobile Final, converged from
   Mobile A: Hero & About; Nav is handled by the ≤980px
   block above)
   ══════════════════════════════════════════════ */
@media (max-width:600px){

  :root{ --page-pad:1.5rem }

  /* ── HERO ── */
  .hp-hero{height:64vh;min-height:460px}
  .hp-hero{height:64svh}
  .hp-hero-img{object-position:52% 38%}
  .hp-hero-content{padding-bottom:3.2rem}
  .hp-hero h1{white-space:normal;font-size:2.3rem;letter-spacing:.06em}
  .hp-hero p{white-space:normal;font-size:.95rem;letter-spacing:.05em;max-width:11em}
  .hp-hero-archive-link{
    margin-top:1.3rem;
    font-size:0.74rem;letter-spacing:0.1em;
  }

  /* ── SECTION HEADER ── */
  .hp-sh{margin-bottom:2.6rem}
  .hp-sh-line{flex-wrap:wrap;row-gap:0.3rem}
  .hp-section{padding:4.4rem 1.5rem}
  .hp-section.tone-raised{padding:4.4rem 1.5rem}

  /* ── FEATURED WORKS ──
     No overrides needed here: .hp-fw-mlist already renders at
     full width with fluid spacing (13px image→caption gap,
     2.6rem between items) that scales correctly down to phone
     widths without further adjustment; --page-pad's 1.5rem
     (set above) already narrows the section's own side padding. */

  /* ── ABOUT ──
     Mobile switches to a different composition entirely: one
     continuous portrait photo (ratio-spacer driven height) with
     header → body copy in the calm upper zone, then a quiet
     name-gloss footnote pinned low near the hands. No brand
     glyphs, no card, no line. Values below are copied as-is from
     the confirmed Mobile About prototype. */
  .hp-about{height:auto;min-height:0}
  .hp-about-ratio{display:block;padding-top:150%}
  .hp-about-media img{object-position:40% 50%}
  .hp-about-scrim{
    background:
      linear-gradient(180deg,
        rgba(26,25,22,0.90) 0%,
        rgba(26,25,22,0.66) 26%,
        rgba(26,25,22,0.28) 42%,
        rgba(26,25,22,0.14) 60%,
        rgba(26,25,22,0.30) 78%,
        rgba(26,25,22,0.66) 100%);
  }
  .hp-about-content{
    position:absolute;top:0;left:0;right:0;bottom:0;
    max-width:none;margin:0;min-height:0;
    padding:2.2rem var(--page-pad) 1.8rem;
    justify-content:flex-start;
  }
  .hp-about-story-main p{
    font-size:0.9rem;line-height:2.05;letter-spacing:0.04em;
  }
  .hp-about-story-main p + p{margin-top:1.15rem}

  /* Desktop brand typography is hidden entirely on mobile... */
  .hp-about-brand{display:none}

  /* ...replaced by the quiet footer gloss, pinned low near the
     hands, as one tight group. Font-size/opacity here are the
     values carried over as-is from the confirmed prototype —
     provisional pending an on-device legibility check. */
  .hp-about-footer{
    display:block;
    position:absolute;z-index:2;
    left:var(--page-pad);
    bottom:1.7rem;
    right:22vw;
  }
  .hp-about-footer div{
    font-family:var(--serif);font-weight:300;
    font-size:0.64rem;
    color:var(--text-on-image-muted);
    opacity:0.68;
    letter-spacing:0.03em;
    line-height:1.58;
    white-space:nowrap;
  }
  .hp-about-footer .dash{opacity:0.5;margin:0.12rem 0}
  .hp-about-footer .closing{margin-top:0.32rem;opacity:0.8}

  /* ── METHOD ── */
  .hp-method-grid{grid-template-columns:1fr;row-gap:2.6rem}
  .hp-method-col{padding:0!important;border-left:none!important}
  .hp-method-col:not(:first-child){padding-top:2.2rem!important;border-top:1px solid var(--divider-default)}
  .hp-method-head{gap:1rem}
  .hp-method-icon{width:52px;height:52px}

  /* ── CONTACT ── */
  .hp-contact-text p{max-width:none}
  .hp-contact-channels{flex-wrap:wrap;row-gap:1.2rem;column-gap:1.8rem}

  /* Shared Footer mobile override now lives in layout.css
     (Source of Truth). Removed here to avoid duplication. */
}