/* Tessaro concept page. Deliberately unlike the studio site: warm paper, a serif, brass. */
:root{--paper:#efe9df;--ink:#1b1a17;--mute:#6d675c;--brass:#a87b2f;--navy:#0a1020;--night:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2{margin:18px 0 0;font-family:Fraunces,Georgia,serif;font-weight:350;line-height:1;letter-spacing:-.02em}
h1{font-size:clamp(52px,7.4vw,112px)}
h2{font-size:clamp(40px,5vw,76px)}
.k{margin:0;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}

.top{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(16px,4vw,48px)}
.mark{font-size:15px;font-weight:600;letter-spacing:.42em}
.top nav{display:flex;gap:28px;font-size:14px;color:var(--mute)}
.top nav a:hover{color:var(--ink)}

/* The scene: one sticky viewport, driven by how far it has scrolled. */
.scene{position:relative;height:520vh}
/* "Nocturne" in the header lands here: 95% through the scroll, where the watch has switched to night. */
.anchor{position:absolute;left:0;top:calc(420vh * .95);width:1px;height:1px}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:24px;padding:80px clamp(16px,5vw,72px) 40px;transition:color .6s}
.night{position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 50%,#18234a,rgba(10,16,32,0) 70%),var(--navy);opacity:var(--night);pointer-events:none}
.scene.dark .pin{color:#e9e6de}
.copy{position:relative;z-index:1;min-height:360px}
.ch{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(calc(-50% + 24px));transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ch.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.ch>p:not(.k){max-width:30em;margin:22px 0 0;color:var(--mute);transition:color .6s}
.scene.dark .ch>p:not(.k){color:#9aa3b8}
.cue{display:inline-flex;align-items:center;gap:12px;margin-top:40px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.cue::after{content:'';width:48px;height:1px;background:currentColor}
.parts{margin:26px 0 0;padding:0;list-style:none;max-width:30em}
.parts li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:9px 0;border-top:1px solid rgba(27,26,23,.14);font-size:15px;color:var(--mute);transition:color .3s}
.parts li b{font-weight:500;color:var(--ink);transition:color .3s}
.parts li.hl b{color:var(--brass)}
.parts li.hl{color:var(--ink)}

.art{position:relative;z-index:1;display:flex;justify-content:center}
.stack{position:relative;width:min(560px,100%,70vh);aspect-ratio:1;perspective:1600px}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ly{position:absolute;inset:0;transition:opacity .35s}
.ly svg{display:block;width:100%;height:100%;overflow:visible}
.shadow{position:absolute;left:14%;right:14%;bottom:-6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(48,36,12,.32),rgba(48,36,12,0));transition:opacity .6s}
.scene.dark .shadow{opacity:0}

/* Lume: printed cream by day, glowing green at night. */
.dim{fill:var(--navy);opacity:calc(var(--night) * .84)}
.lm{fill:color-mix(in srgb,#c4ffd4 calc(var(--night) * 100%),#f6f1e3);stroke:#1b1a17;stroke-width:.8;stroke-opacity:calc(1 - var(--night))}
.gl{fill:#7dffa8;filter:url(#glow);opacity:var(--night)}
.dw{fill:color-mix(in srgb,#232a3c calc(var(--night) * 100%),#fff)}
#date{fill:color-mix(in srgb,#8d94a8 calc(var(--night) * 100%),#1b1a17)}

.specs,.about{position:relative;padding:128px clamp(16px,5vw,72px);background:var(--navy);color:#e9e6de}
.specs dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin:56px 0 0;border-top:1px solid rgba(233,230,222,.16)}
.specs dl div{padding:28px 24px 8px 0}
.specs dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9aa3b8}
.specs dd{margin:10px 0 0;font-family:Fraunces,Georgia,serif;font-size:24px;line-height:1.2}
.specs dd+dd{margin-top:4px;font-family:Inter,sans-serif;font-size:15px;color:#9aa3b8}
.about{padding-top:40px;padding-bottom:160px}
.about p:not(.k){max-width:36em;margin:24px 0 0;font-size:19px;color:#b9bfcc}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;background:#e6c784;color:var(--ink);font-weight:500;transition:background .2s}
.btn:hover{background:#f1d79e}
.btn.ghost{background:none;border:1px solid rgba(233,230,222,.3);color:#e9e6de}
.btn.ghost:hover{background:rgba(233,230,222,.08)}

.pill{position:fixed;z-index:10;left:16px;bottom:16px;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(27,26,23,.9);color:#efe9df;font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill b{padding:2px 8px;border-radius:999px;background:#e6c784;color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pill span{color:#e6c784;white-space:nowrap}

@media (max-width:860px){
  .top nav{display:none}
  .pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:32px;padding-top:72px;padding-bottom:72px}
  .art{order:-1}
  .stack{width:min(80vw,42vh)}
  .copy{min-height:0;height:100%}
  .ch{top:0;transform:translateY(24px)}
  .ch.on{transform:none}
  h1{font-size:clamp(42px,11vw,64px)}
  h2{font-size:clamp(34px,9vw,52px)}
  .ch>p:not(.k){margin-top:14px;font-size:16px}
  .cue{margin-top:20px}
  .parts{margin-top:14px}
  .parts li{padding:6px 0;font-size:14px}
  .parts li span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ch,.ly,.pin,.parts li{transition:none}
}