/* Hallmark v3 · genre: editorial · macrostructure: Feature Stack · theme: Editorial · anchor hue: matte brass
 * audience: 小宅屋主、室內設計愛好者、選品買家 · use: 三題選燈指南 · tone: luxury/editorial
 * enrichment: E8 interior photography · nav: N6 Newspaper masthead · footer: Ft6 Letter close
 * pre-emit critique: P5 H5 E5 S5 R5 V3 · slop: 56 PASS / 2 user-directed freeze overrides (8, 32)
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
@import url("../tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;background:var(--paper)}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 var(--text-base)/1.68 var(--font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-inline-size:100%;block-size:auto;background:var(--image-fallback)}
a{color:inherit;text-decoration-thickness:var(--hairline);text-underline-offset:.22em}
button,input,summary{font:inherit}
button,a,summary,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:var(--strong) solid var(--focus);outline-offset:3px}
a:active,summary:active{color:var(--brass)}
button:disabled,[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
input:disabled{opacity:.55;cursor:not-allowed}
.button,.text-link,.desktop-nav a,.mobile-menu a,.footer-meta a{white-space:nowrap}
[hidden]{display:none!important}
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;z-index:var(--z-skip);inset:var(--s-md) auto auto var(--s-md);min-inline-size:2.75rem;min-block-size:2.75rem;overflow:hidden;clip-path:inset(50%);background:var(--ink);color:var(--paper);padding:var(--s-sm) var(--s-md);white-space:nowrap}
.skip-link:focus{inline-size:auto;block-size:auto;overflow:visible;clip-path:none}
.section-wrap{max-inline-size:var(--content);margin-inline:auto;padding-inline:max(var(--page),var(--safe-left));padding-inline-end:max(var(--page),var(--safe-right))}
.line-icon{inline-size:1.75rem;block-size:1.75rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* N6 — newspaper masthead */
.site-header{padding:calc(var(--s-sm) + var(--safe-top)) max(var(--page),var(--safe-right)) var(--s-md) max(var(--page),var(--safe-left));border-block-end:var(--hairline) solid var(--ink)}
.issue-line{display:flex;justify-content:space-between;gap:1rem;border-block-end:var(--hairline) solid var(--rule);padding-block-end:var(--s-xs);font-size:.64rem;font-weight:700;letter-spacing:.13em}
.masthead{display:block;min-block-size:4.5rem;padding-block:var(--s-xs) var(--s-sm);font-family:var(--font-display);font-size:clamp(3rem,12vw,7.75rem);font-weight:800;line-height:1;text-align:center;letter-spacing:-.075em;text-decoration:none}
.desktop-nav{display:none}
.mobile-menu{border-block-start:var(--hairline) solid var(--rule)}
.mobile-menu summary{display:flex;align-items:center;justify-content:space-between;min-block-size:2.75rem;cursor:pointer;font-size:.8rem;font-weight:700;letter-spacing:.08em;list-style:none}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary::after{content:"＋";font-size:1rem}
.mobile-menu[open] summary::after{content:"−"}
.mobile-menu nav{display:grid;border-block-start:var(--hairline) solid var(--rule)}
.mobile-menu a{display:flex;align-items:center;min-block-size:2.75rem;border-block-end:var(--hairline) solid var(--rule);text-decoration:none}

/* Photograph-led hero + one-time reveal */
.hero{max-inline-size:var(--content);margin-inline:auto}
.hero-media{position:relative;margin:0;overflow:hidden;background:var(--wood)}
.hero-media img{inline-size:100%;block-size:clamp(24rem,72svh,48rem);object-fit:cover;object-position:55% center;animation:hero-image var(--dur-hero) var(--ease) both}
.hero-media figcaption{position:absolute;inset:auto var(--s-md) var(--s-md) auto;max-inline-size:24rem;padding:var(--s-xs) var(--s-sm);background:var(--ink);color:var(--paper);font-size:.66rem;line-height:1.35;letter-spacing:.02em}
.hero-band{padding:var(--s-xl) max(var(--page),var(--safe-right)) var(--s-2xl) max(var(--page),var(--safe-left));border-block-end:var(--hairline) solid var(--ink);animation:hero-copy var(--dur-hero) 100ms var(--ease) both}
.portfolio-label,.result-label{margin:0 0 var(--s-md);font-size:var(--text-xs);font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.hero h1,.section-heading h2,.story-step h3,.guide-result h3,.cta-section h2,.letter-close{min-inline-size:0;overflow-wrap:anywhere;font-family:var(--font-display);font-weight:750;letter-spacing:-.045em}
.hero h1{max-inline-size:14ch;margin:0;font-size:var(--text-hero);line-height:1.04}
.hero-deck{display:grid;gap:var(--s-lg);margin-block-start:var(--s-xl)}
.hero-deck p{max-inline-size:60ch;margin:0;color:var(--ink-2);font-size:var(--text-md)}
.button{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.75rem;min-block-size:2.75rem;width:max-content;border:var(--hairline) solid var(--ink);border-radius:0;padding:var(--s-sm) var(--s-lg);background:var(--ink);color:var(--paper);font-weight:750;line-height:1;text-decoration:none;cursor:pointer;transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.button:active{transform:translateY(1px)}
.button-secondary{background:transparent;color:var(--ink)}
.disclosure{max-inline-size:72ch;margin:var(--s-xl) 0 0;color:var(--muted);font-size:var(--text-xs);letter-spacing:.02em}
@keyframes hero-image{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes hero-copy{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}

/* Editorial section heading */
.light-lab,.story-section,.specs,.guide,.faq{padding-block:var(--s-3xl);border-block-end:var(--hairline) solid var(--ink)}
.section-heading{display:grid;gap:var(--s-md);margin-block-end:var(--s-xl)}
.section-heading h2{max-inline-size:13ch;margin:0;font-size:var(--text-section);line-height:1.05}
.section-heading>p:last-child{max-inline-size:62ch;margin:0;color:var(--ink-2)}
.compact-heading h2{max-inline-size:15ch}

/* Interactive light lab */
.lab-layout{display:grid;border-block:var(--hairline) solid var(--ink)}
.lab-visual{position:relative;margin:0;overflow:hidden;min-block-size:24rem;background:var(--dark-paper)}
.lab-visual img{inline-size:100%;block-size:100%;min-block-size:24rem;object-fit:cover;filter:saturate(.85) brightness(.97)}
.lab-wash{position:absolute;inset:0;background:linear-gradient(100deg,var(--wash-warm),transparent 62%),linear-gradient(260deg,var(--wash-cool),transparent 58%);pointer-events:none}
.lab-layout[data-temp-zone="warm"] .lab-visual img{filter:saturate(.9) brightness(.92) sepia(.12)}
.lab-layout[data-temp-zone="warm"] .lab-wash{background:linear-gradient(100deg,var(--wash-warm-strong),transparent 66%)}
.lab-layout[data-temp-zone="cool"] .lab-visual img{filter:saturate(.75) brightness(1.04)}
.lab-layout[data-temp-zone="cool"] .lab-wash{background:linear-gradient(260deg,var(--wash-cool-strong),transparent 62%)}
.lab-aperture{position:absolute;inset:0;background:radial-gradient(ellipse 56% 52% at 50% 42%,transparent 0 38%,var(--vignette-soft) 64%,var(--vignette-mid) 100%);pointer-events:none;transition:opacity var(--dur-fast) linear}
.lab-layout[data-aperture-zone="focused"] .lab-aperture{background:radial-gradient(ellipse 34% 38% at 50% 42%,transparent 0 35%,var(--vignette-soft) 56%,var(--vignette-dark) 100%)}
.lab-layout[data-aperture-zone="spread"] .lab-aperture{background:radial-gradient(ellipse 82% 72% at 50% 42%,transparent 0 42%,transparent 70%,var(--vignette-mid) 100%)}
.lab-visual figcaption{position:absolute;inset:auto var(--s-sm) var(--s-sm) var(--s-sm);color:var(--paper);font-size:.68rem;text-shadow:0 1px 6px var(--photo-shadow)}
.lab-controls{display:flex;flex-direction:column;justify-content:center;padding:var(--s-xl) 0}
.control-block{padding-block:var(--s-lg);border-block-end:var(--hairline) solid var(--rule)}
.control-label{display:flex;justify-content:space-between;align-items:center;gap:var(--s-md);margin-block-end:var(--s-sm)}
.control-label>span{display:flex;align-items:center;gap:var(--s-xs);font-weight:750}
.control-label output{color:var(--brass);font-family:var(--font-display);font-weight:700}
input[type="range"]{display:block;inline-size:100%;block-size:2.75rem;margin:0;accent-color:var(--brass);cursor:pointer}
.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--text-xs)}
.lab-reading{max-inline-size:55ch;margin:var(--s-xl) 0 0;font-family:var(--font-display);font-size:var(--text-lg);line-height:1.5}
.material-notes{display:grid;gap:var(--s-sm);margin:var(--s-xl) 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:var(--text-sm)}
.material-notes li{display:flex;align-items:center;gap:var(--s-sm)}
.swatch{inline-size:1rem;block-size:1rem;border:var(--hairline) solid var(--rule-dark);border-radius:50%}.swatch-ivory{background:var(--paper-2)}.swatch-wood{background:var(--wood)}.swatch-brass{background:var(--brass-light)}

/* S3 sticky Feature Stack */
.story-heading{margin-block-end:var(--s-2xl)}
.story-layout{display:grid}
.story-stage{display:none}
.story-steps{display:grid}
.story-step{position:relative;padding-block:var(--s-2xl);border-block-start:var(--hairline) solid var(--rule)}
.story-step h3{display:flex;gap:var(--s-sm);align-items:flex-start;max-inline-size:16ch;margin:0 0 var(--s-lg);font-size:clamp(1.75rem,4vw,3rem);line-height:1.12}
.story-step>p{max-inline-size:58ch;margin:0 0 var(--s-md);color:var(--ink-2)}
.story-step .step-note{color:var(--muted);font-size:var(--text-sm)}
.story-mobile-image{inline-size:100%;margin-block-start:var(--s-xl);aspect-ratio:3/2;object-fit:cover}

/* F3 table */
.table-scroll{overflow-x:auto;outline-offset:4px}
.spec-table{inline-size:100%;min-inline-size:43rem;border-collapse:collapse;text-align:left}
.spec-table th,.spec-table td{padding:var(--s-md);border-block-end:var(--hairline) solid var(--rule);vertical-align:top}
.spec-table thead th{border-block:var(--strong) solid var(--ink);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase}
.spec-table tbody th{font-family:var(--font-display);font-size:1.08rem}
.spec-table td{color:var(--ink-2)}

/* Guide */
.guide-shell{display:grid;gap:var(--s-xl)}
.guide-form{border-block-start:var(--strong) solid var(--ink)}
.question{margin:0;padding:var(--s-xl) 0;border:0;border-block-end:var(--hairline) solid var(--rule)}
.question legend{width:100%;padding:0;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700}
.option-list{display:grid;gap:var(--s-xs);margin-block-start:var(--s-lg)}
.option{display:flex;align-items:center;min-block-size:2.75rem;border:var(--hairline) solid var(--rule);padding:var(--s-sm);cursor:pointer}
.option:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.option input{inline-size:1.15rem;block-size:1.15rem;margin:0 var(--s-sm) 0 0;accent-color:var(--brass)}
.question-error{min-block-size:1lh;margin:var(--s-sm) 0 0;color:var(--error);font-size:var(--text-sm);visibility:hidden}
.question-error.is-visible{visibility:visible}
.guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-sm);padding-block-start:var(--s-xl)}
.guide-status{margin:var(--s-md) 0 0;color:var(--muted);font-size:var(--text-sm)}
.guide-status[data-tone="error"]{color:var(--error)}
.guide-status[data-tone="success"]{color:var(--success)}
.guide-result{align-self:start;padding:var(--s-xl);background:var(--dark-paper);color:var(--paper)}
.guide-result h3{margin:0 0 var(--s-lg);font-size:clamp(2rem,5vw,4rem);line-height:1.05}
.guide-result>p,.guide-result li{color:var(--dark-muted)}
.guide-result ul{padding-inline-start:1.15rem}.guide-result .result-note{color:var(--dark-muted);font-size:var(--text-xs)}

/* FAQ */
.faq-list{border-block-start:var(--strong) solid var(--ink)}
.faq-list details{border-block-end:var(--hairline) solid var(--rule)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);min-block-size:3.5rem;padding:var(--s-sm) 0;cursor:pointer;font-family:var(--font-display);font-size:var(--text-md);font-weight:700;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"＋";font:400 1.25rem/1 var(--font-body)}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{max-inline-size:68ch;margin:0;padding:0 var(--s-xl) var(--s-lg) 0;color:var(--ink-2)}

/* Ft6 letter close */
.cta-section{padding-block:var(--s-4xl);text-align:center}
.cta-section h2{margin:0;font-family:var(--font-display);font-size:clamp(3rem,8vw,7.5rem);line-height:.98;letter-spacing:-.055em}
.cta-section>p{max-inline-size:38rem;margin:var(--s-xl) auto;color:var(--ink-2)}
.text-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-xs);min-block-size:2.75rem;font-weight:750}
.site-footer{padding:var(--s-3xl) max(var(--page),var(--safe-right)) var(--s-xl) max(var(--page),var(--safe-left));background:var(--dark-paper);color:var(--paper)}
.letter-close{display:grid;gap:var(--s-xl);font-size:clamp(1.9rem,5vw,4.75rem);line-height:1.18}
.letter-close p{margin:0}
.signature{justify-self:end;text-align:left;font-size:.52em;line-height:1.35}
.signature span{font:600 .55em/1.3 var(--font-body);letter-spacing:.12em}
.footer-rule{margin-block:var(--s-3xl) var(--s-xl);border-block-start:var(--hairline) solid var(--footer-rule)}
.footer-wordmark{margin:0;font-family:var(--font-display);font-size:clamp(4.5rem,16vw,14rem);font-weight:800;line-height:.9;letter-spacing:-.08em;white-space:nowrap}
.footer-meta{display:grid;gap:var(--s-xl);margin-block-start:var(--s-xl);color:var(--dark-muted);font-size:var(--text-xs)}
.footer-meta p{max-inline-size:72ch;margin:0}
.footer-meta nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-xs) var(--s-lg)}
.footer-meta a{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.75rem;min-block-size:2.75rem}

/* Exact 404 response */
.not-found-page{min-block-size:100svh;background:var(--dark-paper);color:var(--paper)}
.not-found{display:grid;place-content:center;justify-items:start;min-block-size:100svh;padding:var(--s-xl) max(var(--page),var(--safe-right)) var(--s-3xl) max(var(--page),var(--safe-left))}
.not-found-code{margin:0 0 var(--s-xl);color:var(--dark-muted);font:700 var(--text-sm)/1 var(--font-body);letter-spacing:.18em}
.not-found h1{max-inline-size:10ch;margin:0;font-family:var(--font-display);font-size:clamp(3rem,10vw,7.5rem);font-weight:750;line-height:1.02;letter-spacing:-.055em;overflow-wrap:anywhere}
.not-found>p:not(.not-found-code){max-inline-size:55ch;margin:var(--s-xl) 0;color:var(--dark-muted)}
.not-found .button{background:var(--paper);color:var(--ink);border-color:var(--paper)}

@media (min-width:48rem){
  .site-header{padding-block-end:0}
  .mobile-menu{display:none}
  .desktop-nav{display:flex;align-items:center;justify-content:center;gap:clamp(var(--s-lg),4vw,var(--s-2xl));border-block-start:var(--hairline) solid var(--ink);min-block-size:3.25rem}
  .desktop-nav a{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.75rem;min-block-size:2.75rem;text-decoration:none;font-size:.85rem;font-weight:700}
  .desktop-nav .nav-cta{margin-inline-start:auto;text-decoration:underline}
  .hero-deck{margin:0}
  .lab-layout{grid-template-columns:minmax(0,1.45fr) minmax(18rem,.75fr)}
  .lab-controls{padding:var(--s-xl)}
  .section-heading{grid-template-columns:minmax(0,1fr)}
  .guide-shell{grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr)}
  .guide-result{position:sticky;inset-block-start:2rem}
  .letter-close{grid-template-columns:1fr auto}
  .footer-meta{grid-template-columns:minmax(0,1fr) auto;align-items:end}
}

@media (min-width:60rem){
  .hero{position:relative;min-block-size:calc(100svh - 14.5rem)}
  .hero-media,.hero-media picture{display:block;block-size:100%}
  .hero-media img{block-size:calc(100svh - 14.5rem);min-block-size:35rem}
  .hero-band{position:absolute;z-index:var(--z-overlay);inset:auto auto 0 0;display:flex;flex-direction:column;inline-size:min(46rem,68%);max-block-size:calc(100svh - 16rem);overflow:auto;padding:var(--s-lg) var(--s-xl) var(--s-xl);background:var(--paper);border-block-start:var(--hairline) solid var(--ink);border-inline-end:var(--hairline) solid var(--ink)}
  .hero-band h1{font-size:clamp(2.75rem,4.4vw,4rem)}
  .hero-deck{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-lg);margin-block-start:var(--s-lg)}
  .hero-deck p{font-size:var(--text-base)}
  .story-layout{grid-template-columns:minmax(0,1.35fr) minmax(22rem,.65fr);gap:clamp(var(--s-xl),6vw,var(--s-4xl));align-items:start}
  .story-stage{position:sticky;inset-block-start:var(--s-lg);display:block}
  .story-image-shell{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--wood)}
  .story-image-shell img{inline-size:100%;block-size:100%;object-fit:cover;transition:opacity var(--dur-fast) linear}
  .story-image-shell img.is-changing{opacity:.25}
  .story-stage-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding-block:var(--s-sm);border-block-end:var(--hairline) solid var(--ink);font-size:var(--text-xs);font-weight:700;letter-spacing:.05em}
  .story-stage>p{margin:var(--s-sm) 0 0;color:var(--muted);font-size:.68rem}
  .story-step{min-block-size:74svh;display:flex;flex-direction:column;justify-content:center;opacity:.48;transition:opacity var(--dur) linear}
  .story-step.is-active{opacity:1}
  .story-mobile-image{display:none}
}

@media (min-width:80rem){
  .hero h1{font-size:clamp(5rem,7vw,7.5rem)}
  .hero-band h1{font-size:4rem}
}

@media (hover:hover){
  .button:hover{background:var(--brass);color:var(--paper)}
  a:hover{text-decoration-thickness:var(--strong)}
  summary:hover{color:var(--brass)}
  .option:hover{border-color:var(--ink)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .story-stage{display:none!important;position:static!important}
  .story-step,.story-step.is-active{min-block-size:auto;opacity:1}
  .story-mobile-image{display:block!important}
}