@charset "utf-8";
/* ============================================================================
   ZEN AUDIO — concept site
   Built to the v1.0 design direction. Single dark theme, one easing,
   one brass hairline used with discipline. No frameworks, no external requests.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/CormorantGaramond-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/CormorantGaramond-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/CormorantGaramond-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/CormorantGaramond-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/CormorantGaramond-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/CormorantGaramond-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/CormorantGaramond-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/CormorantGaramond-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Archivo-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Archivo-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Archivo-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Archivo-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Archivo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Archivo-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SplineSansMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SplineSansMono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --------------------------------------------------------------- tokens --- */
:root{
  --bg:#121110;            /* page — warm near-black */
  --surface:#1C1917;       /* cards, image panels */
  --raised:#26211D;        /* form fields, hover */
  --line:#2E2924;          /* hairlines */
  --ink:#EDE8E0;           /* primary text */
  --ink-2:#A39B8F;         /* secondary text */
  --brass:#C6A96B;
  --brass-hi:#DBC28A;
  --footer:#0D0C0B;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --wrap:1200px;
  --pad:128px;
}
@media (max-width:820px){ :root{ --pad:64px; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ------------------------------------------------------------ typography --- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;}
.display{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:300;letter-spacing:-.01em;line-height:1.05;}
.h-section{font-size:clamp(1.75rem,3.6vw,2.25rem);font-weight:400;line-height:1.15;}
.h-product{font-size:1.5rem;font-weight:500;line-height:1.2;}
.eyebrow{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--brass);
  margin:0 0 1rem;
}
.eyebrow--muted{color:var(--ink-2);}
p{margin:0 0 1.25rem;max-width:65ch;}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.45;font-weight:300;color:var(--ink);}
.muted{color:var(--ink-2);}
.caption{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}

/* brass hairline — the site's monogram gesture */
.rule{display:block;width:64px;height:1px;background:var(--brass);border:0;margin:1.5rem 0;transform:scaleX(0);transform-origin:left;}
.rule--full{width:100%;background:var(--line);}
.rule--center{margin-inline:auto;transform-origin:center;}

/* ---------------------------------------------------------------- layout --- */
.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto;}
.section{padding-block:var(--pad);}
.section--tight{padding-block:calc(var(--pad) * .6);}
.stack>*+*{margin-top:1.25rem;}
.center{text-align:center;}
.center .rule{margin-inline:auto;transform-origin:center;}
.center p{margin-inline:auto;}

/* ---------------------------------------------------------------- header --- */
/* the concept banner and the header travel together as one fixed stack */
.topbar{position:fixed;inset:0 0 auto;z-index:100;}
.header{
  position:relative;z-index:1;
  background:linear-gradient(to bottom,rgba(18,17,16,.80) 0%,rgba(18,17,16,.45) 55%,rgba(18,17,16,0) 100%);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem max(1.5rem,calc((100vw - var(--wrap)) / 2));
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.header.is-condensed{background:rgba(18,17,16,.94);border-bottom-color:var(--line);backdrop-filter:saturate(140%) blur(10px);}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;}
.brand img{height:78px;width:auto;}
.nav{display:flex;align-items:center;gap:2rem;}
.nav a{
  font-size:.8125rem;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);line-height:1;position:relative;padding-block:.35rem;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);}
.nav a[aria-current="page"]{color:var(--brass);}
.nav a[aria-current="page"]::after{transform:scaleX(1);}

.btn{
  display:inline-block;font-family:var(--sans);font-size:.8125rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:.9rem 1.5rem;border:1px solid var(--brass);color:var(--brass);
  background:transparent;text-decoration:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--brass);color:var(--bg);border-color:var(--brass);}
.btn--solid{background:var(--brass);color:var(--bg);}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--brass-hi);border-color:var(--brass-hi);}

/* text link with drawn underline */
.link{
  color:var(--brass);text-decoration:none;font-weight:500;
  background-image:linear-gradient(var(--brass),var(--brass));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .25s ease-out,color .25s var(--ease);
}
.link:hover,.link:focus-visible{background-size:100% 1px;color:var(--brass-hi);}
.link--lg{font-family:var(--sans);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}

/* burger + mobile overlay */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px;}
.burger span{display:block;height:1px;background:var(--ink);margin:7px 0;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.mobile-nav.is-open{opacity:1;visibility:visible;}
.mobile-nav a{font-family:var(--serif);font-size:2rem;text-decoration:none;color:var(--ink);}
.mobile-nav a:hover{color:var(--brass);}
@media (max-width:900px){
  .brand img{height:56px;}
  .nav{display:none;}
  .burger{display:block;}
  .header .btn{display:none;}
}

/* ------------------------------------------------------------------ hero --- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;}
.hero--short{min-height:70svh;}
.hero--band{min-height:60svh;}

/* Full frame — show the photograph, do not fill the viewport with it.
   Jamie flagged (1 Aug 2026) that the home hero cuts the speakers off. It does:
   the photograph is 1837x988 (1.86:1) and a 100svh hero on a laptop is nearer
   1.7:1, so object-fit:cover scales it to fill the HEIGHT and the overflow it
   throws away is the outer edge of both Alsyvox panels — the two things the
   picture exists to show.
   Cap the hero's height at the photograph's own ratio (988/1837 = 53.78vw) and
   cover has no horizontal overflow left to crop. Wider viewports than that crop
   top/bottom instead, which the frame has room for. Below 900px the screen is
   portrait-ish, a full-bleed landscape photo has to give something up either
   way, and the full-height hero is the better look — so it keeps 100svh. */
.hero--full-frame{min-height:min(100svh,53.78vw);}
@media (max-width:900px){ .hero--full-frame{min-height:100svh;} }
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(18,17,16,.55) 0%,rgba(18,17,16,.22) 26%,rgba(18,17,16,.28) 55%,rgba(18,17,16,.60) 100%),
    radial-gradient(ellipse 70% 45% at 50% 62%,rgba(18,17,16,.35) 0%,rgba(18,17,16,0) 100%);
}
.hero__inner{position:relative;text-align:center;padding:8rem 1.5rem 5rem;max-width:52rem;}
.hero__inner .eyebrow{overflow-wrap:anywhere;}
@media (max-width:600px){ .hero__inner .eyebrow{letter-spacing:.10em;} }
.hero__inner .rule{margin-inline:auto;transform-origin:center;}
.hero--left .hero__inner{text-align:left;margin-right:auto;}
.hero--left .hero__inner .rule{margin-inline:0;transform-origin:left;}
.scroll-cue{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);}

.hero--band::before{
  background:
    linear-gradient(to bottom,rgba(18,17,16,.80) 0%,rgba(18,17,16,.68) 40%,rgba(18,17,16,.74) 70%,rgba(18,17,16,.90) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%,rgba(18,17,16,.55) 0%,rgba(18,17,16,0) 100%);
}
/* a block with max-width does not centre itself just because the parent is
   text-align:center — the button text looked off-centre because of it */
.hero__inner p{margin-inline:auto;}

/* Push in on a full-bleed crop. Used on the home page, where the Listening Room
   band carries the same photograph as the hero above it — there is only one
   current picture of the room, so the FRAME is changed rather than the picture.

   It has to be a transform, not object-position. A CTA band is about 3.4:1 and
   the photograph is 1.9:1, so cover scales it to fill the width and there is no
   horizontal overflow left for object-position to move — a horizontal value on
   this element does nothing at all. Scaling from an off-centre origin does.

   Recentred and eased off, 1 Aug 2026 — was scale(1.45) from 26% 68%, which
   pushed the window down and to the left until neither speaker was in frame and
   the rack was cut off along the bottom edge.

   The zoom stays, because this band still has to read as a different frame from
   the hero above it — but at 1.25x rather than 1.45x. The visible window is
   1/1.25 = 80% of the photograph's width, so centring it spans roughly 10%-90%
   and takes in a decent slice of both speakers instead of a sliver.

   The vertical origin does the real work: at 88% the window sits low enough to
   hold the whole equipment rack clear of the bottom edge. Note that the img is
   ALSO cover-cropped before the transform (the band is far wider than 1.9:1, so
   it loses roughly the top and bottom fifth), which is why the origin has to sit
   this near the bottom to reach gear that is only ~78% of the way down the
   original photograph. Any lower and there is nothing left underneath to show. */
.hero--crop-detail .hero__media img{transform:scale(1.25);transform-origin:50% 88%;}

/* Scrim modifiers for Jamie's second photo batch (31 Jul 2026). Both new frames
   are lit far brighter than anything else the heroes carry — the default scrim
   is tuned for a dark room and only holds .22 through the band where the
   headline sits, which is not enough over a sunlit white wall.

   Deeper, not different: each rule restates the SAME two-layer scrim as .hero,
   with the mid-band values lifted. Nothing else about the hero changes. */

/* The Room. Evenly lit, bright through the middle. The eyebrow was the first
   thing to disappear — it is small, letter-spaced and set in a muted colour. */
.hero--scrim-deep::before{
  background:
    linear-gradient(to bottom,rgba(18,17,16,.62) 0%,rgba(18,17,16,.42) 26%,rgba(18,17,16,.46) 55%,rgba(18,17,16,.68) 100%),
    radial-gradient(ellipse 70% 45% at 50% 62%,rgba(18,17,16,.42) 0%,rgba(18,17,16,0) 100%);
}

/* About. Left-weighted, because this hero is left-aligned: the headline and the
   logo both sit over a pale wall with a sconce flaring directly behind the logo.
   Weighting the scrim left darkens exactly that side and leaves the artwork on
   the right lit, which is the whole reason the photograph is on this page. */
.hero--scrim-left::before{
  background:
    linear-gradient(to right,rgba(18,17,16,.72) 0%,rgba(18,17,16,.58) 34%,rgba(18,17,16,.20) 62%,rgba(18,17,16,.10) 100%),
    linear-gradient(to bottom,rgba(18,17,16,.74) 0%,rgba(18,17,16,.52) 14%,rgba(18,17,16,.10) 34%,rgba(18,17,16,.16) 60%,rgba(18,17,16,.55) 100%);
}
/* The top strip carries the nav, and on THIS photograph the brightest part of
   the artwork sits directly behind the Enquire button. The horizontal gradient
   above is weighted left by design, so it does nothing to help there — the
   extra stops at 0-14% are what keep the button legible. */

/* Product hero (.hero--product). Taiko page, 31 Jul 2026.

   Jamie asked for the Olympus + I/O stack as the hero. It is silver shot on a
   white sweep, and it cannot be cut out (its highlights ARE near-white and
   connected to the background — same trap as the Alsyvox panels). The first
   attempt fenced the white off on a plate beside the headline; Matt rejected
   it, correctly — a hard white slab on a dark page is jarring.

   The fix is not CSS. taiko_hero.py bakes the product onto this exact charcoal
   with a soft falloff, so the image background and the page background are the
   same colour and there is no edge anywhere. That makes it an ordinary
   full-bleed hero again — this rule only tunes two things:

   1. The scrim. The composite is already almost black, so the standard
      top-to-bottom scrim would swallow the product. This one runs left to
      right instead: dark enough to carry the headline on the left, clear of
      the product on the right.
   2. The crop. The product sits right of centre, so object-position keeps it
      in frame rather than centring on empty charcoal.

   On narrow screens cover would crop the product out sideways, so it switches
   to contain — seamless, because the letterbox is the page colour. */
.hero--product::before{
  background:
    /* Seal the top and bottom. object-fit cover crops this image by a different
       amount at every viewport height, so the pool of light can be cut off
       while it is still brighter than the page — which puts a visible
       horizontal step right on the hero's edge (measured at 13 levels above
       #121110 before this was added). Fading the outer band to the page colour
       closes it at any height. The product sits between roughly 24% and 76%,
       so it is never touched. */
    linear-gradient(to bottom,
      rgba(18,17,16,1) 0%,rgba(18,17,16,0) 18%,
      rgba(18,17,16,0) 82%,rgba(18,17,16,1) 100%),
    /* The scrim proper: dark enough to carry the headline on the left, clear
       of the product on the right. */
    linear-gradient(to right,
      rgba(18,17,16,.76) 0%,rgba(18,17,16,.48) 20%,
      rgba(18,17,16,.06) 34%,rgba(18,17,16,0) 44%);
}
.hero--product .hero__media img{object-position:64% center;}
@media (max-width:820px){
  .hero--product .hero__media img{object-fit:contain;object-position:center bottom;}
  .hero--product::before{
    background:linear-gradient(to bottom,
      rgba(18,17,16,.82) 0%,rgba(18,17,16,.55) 45%,rgba(18,17,16,0) 75%);
  }
  .hero--product .hero__inner{padding-top:9rem;padding-bottom:0;}
}

/* --------------------------------------------------------------- diptych --- */
.diptych{display:flex;gap:2px;min-height:78svh;}
.diptych__panel{
  position:relative;flex:1 1 0;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;align-items:flex-end;isolation:isolate;
  transition:flex-grow .5s var(--ease);
}
.diptych__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease),opacity .5s var(--ease);}
.diptych__panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(18,17,16,.94) 0%,rgba(18,17,16,.55) 45%,rgba(18,17,16,.5) 100%);transition:background .5s var(--ease);}
.diptych__body{padding:3rem;width:100%;}
.diptych__body h2{color:var(--ink-2);transition:color .4s var(--ease);}
.diptych__panel:hover h2,.diptych__panel:focus-visible h2{color:var(--ink);}
@media (min-width:901px){
  .diptych:hover .diptych__panel{opacity:.72;}
  .diptych .diptych__panel:hover,.diptych .diptych__panel:focus-within{flex-grow:1.15;opacity:1;}
  .diptych__panel:hover::before{background:linear-gradient(to top,rgba(18,17,16,.9) 0%,rgba(18,17,16,.3) 55%,rgba(18,17,16,.25) 100%);}
}
@media (max-width:900px){ .diptych{flex-direction:column;min-height:0;} .diptych__panel{min-height:52svh;} .diptych__body{padding:2rem;} }

/* ---------------------------------------------------------------- figure --- */
.figure{overflow:hidden;background:var(--surface);}
/* Product plate. Silver/aluminium products are shot on a white sweep and cannot
   be cut out cleanly (their highlights ARE near-white). Rather than fight it,
   they sit on a deliberate white plate: seamless with the photography, reads as
   a gallery plinth, and gives the dark page some relief. Dark objects (the
   Alsyvox panels) keep transparent cut-outs and float on the dark surface. */
.figure--plate{background:#fff;padding:2rem;border:1px solid var(--line);}
.figure--plate img{width:100%;height:auto;object-fit:contain;}
/* A caption inside a plate is sitting on WHITE, not on the page. --ink-2 is
   tuned for the dark background and turns into pale grey-on-white here, which
   is close to unreadable. First needed 31 Jul 2026 for the two Olympus
   photographs; every earlier plate happened to have no caption. */
.figure--plate figcaption{color:#57534E;}
.figure img{width:100%;height:auto;transition:transform .5s var(--ease);}
/* Column, not row. As a row the <figcaption> became a flex sibling of the image
   and got squeezed into whatever width was left over — one word per line down
   the right-hand side. Stacking keeps the image centred and puts the caption
   under it, left-aligned like every other caption on the site. */
.figure--pad{padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.figure--pad img{margin-inline:auto;}
.figure--pad figcaption{align-self:flex-start;width:100%;}

/* ------------------------------------------------------------ model rows --- */
.model-row{position:relative;overflow:hidden;padding-block:calc(var(--pad) * .55);border-top:1px solid var(--line);}
.model-row__grid{display:grid;grid-template-columns:7fr 5fr;gap:4rem;align-items:center;}
/* alternate sides but always keep the PHOTOGRAPH on the wide track */
.model-row.is-flipped .model-row__grid{grid-template-columns:5fr 7fr;}
.model-row.is-flipped .model-row__media{order:2;}
.model-row__ghost{
  position:absolute;top:50%;translate:0 -50%;right:-2%;z-index:0;pointer-events:none;
  font-family:var(--serif);font-weight:300;font-size:clamp(6rem,14vw,14rem);
  line-height:1;color:rgba(237,232,224,.04);white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;
}
.model-row.is-flipped .model-row__ghost{right:auto;left:-2%;}
.model-row__grid>*{position:relative;z-index:1;}
@media (max-width:900px){
  .model-row__grid{grid-template-columns:1fr;gap:2rem;}
  .model-row.is-flipped .model-row__grid{grid-template-columns:1fr;}
  .model-row.is-flipped .model-row__media{order:0;}
  .model-row__ghost{font-size:5rem;right:-6%;}
}

/* ----------------------------------------------------------------- specs --- */
.specs{margin:1.5rem 0 0;border-top:1px solid var(--line);}
.specs div{display:flex;justify-content:space-between;gap:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--line);}
.specs dt{font-size:.75rem;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-2);line-height:1.5;}
.specs dd{margin:0;font-family:var(--mono);font-size:.875rem;color:var(--ink);text-align:right;line-height:1.5;}

/* ----------------------------------------------------------------- cards --- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;}
@media (max-width:900px){ .grid-3,.grid-2{grid-template-columns:1fr;} }
.card{
  background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .5s var(--ease);
}
.card:hover{border-color:rgba(198,169,107,.4);}
.card:hover .figure img{transform:scale(1.03);}
.card__body{padding:1.75rem;display:flex;flex-direction:column;flex:1;}
.card__body .h-product{margin-bottom:.5rem;}
.card__body .link{margin-top:auto;padding-top:1.25rem;}
.card .figure{padding:0;}
.card .figure--plate{margin:0;}
.card .figure img{aspect-ratio:4/3;object-fit:contain;}

/* ------------------------------------------------------------------ quote --- */
.quote{margin:3.5rem 0 0;border-top:1px solid var(--brass);padding-top:1.5rem;max-width:44rem;}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.375rem,2.6vw,1.75rem);line-height:1.4;color:var(--ink);}
.quote footer{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.quote--press{border-top-color:var(--brass);}
.quote--press p{font-size:clamp(1.25rem,2.2vw,1.5rem);}

/* ----------------------------------------------------------- recognition --- */
/* Awards sit with the product they belong to, not in a trophy cabinet at the
   bottom of the page. One brass hairline, the award, then publication and year
   in mono — the same register as a spec row, deliberately. */
.awards{margin:1.75rem 0 0;border-top:1px solid var(--brass);padding-top:1rem;}
.awards__label{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .75rem;
}
.awards__list{list-style:none;margin:0;padding:0;}
/* Name on its own line, source beneath. A justified two-column row looked
   tidy until an award title wrapped — then one entry's meta sat right and the
   next sat left. Stacking is consistent whatever the title length. */
.awards__list li{
  display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  padding:.625rem 0;
}
.awards__list li + li{border-top:1px solid var(--line);}
.awards__name{font-family:var(--serif);font-size:1.0625rem;color:var(--ink);line-height:1.35;}
.awards__meta{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  color:var(--ink-2);white-space:nowrap;
}
.awards--card{margin-top:1.25rem;}
.awards--card .awards__name{font-size:.9375rem;}
.awards--card .awards__meta{font-size:.6875rem;}

/* ------------------------------------------------------------- film strip --- */
.strip{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:1rem;scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none;}
.strip figure{flex:0 0 min(70vw,760px);scroll-snap-align:center;margin:0;}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface);}
.strip figcaption{margin-top:.75rem;}
.strip-nav{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem;}
.strip-nav button{
  width:48px;height:48px;border:1px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer;font-size:1rem;line-height:1;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.strip-nav button:hover{border-color:var(--brass);color:var(--brass);}

/* ------------------------------------------------------------------ form --- */
.form{max-width:560px;}
.field{margin-bottom:1.5rem;}
.field label{display:block;font-size:.75rem;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem;}
.field input,.field select,.field textarea{
  width:100%;background:var(--raised);border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:1rem;padding:.9rem 1rem;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#3a332c;}
.ticket{
  border:1px solid var(--brass);padding:1.25rem 1.5rem;margin-bottom:2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:rgba(198,169,107,.06);
}
.ticket__name{font-family:var(--serif);font-size:1.25rem;}
.ticket button{background:none;border:0;color:var(--ink-2);cursor:pointer;font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;}
.ticket button:hover{color:var(--brass);}
.confirm{border:1px solid var(--brass);padding:2rem;background:rgba(198,169,107,.06);}

/* ---------------------------------------------------------------- footer --- */
.footer{background:var(--footer);border-top:1px solid var(--brass);padding-block:4rem 2rem;margin-top:0;}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;}
.footer h3{font-size:.75rem;font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1rem;}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin-bottom:.6rem;}
.footer a{color:var(--ink);text-decoration:none;font-size:.9375rem;}
.footer a:hover{color:var(--brass);}
.footer__base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr;gap:2rem;} }

/* -------------------------------------------------------- concept banner --- */
.concept-note{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:.65rem 1.5rem;text-align:center;font-size:.75rem;letter-spacing:.06em;color:var(--ink-2);
}
.concept-note strong{color:var(--brass);font-weight:600;}

/* ------------------------------------------------------------- utilities --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--brass);color:var(--bg);padding:.75rem 1rem;}

/* --------------------------------------------------------------- motion ---
   Reduced motion is the DEFAULT: everything below only applies when the user
   has expressed no preference against motion. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
  .reveal.is-in{opacity:1;transform:none;}
  .rule{transition:transform .8s var(--ease);}
  .rule.is-in{transform:scaleX(1);}
  .figure img{transform:scale(1.04);transition:transform 1.2s var(--ease);}
  .figure.is-in img{transform:scale(1);}
  .card:hover .figure img{transform:scale(1.03);}
  .diptych__panel:hover img{transform:scale(1.04);}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:0;transition:opacity .2s linear;}
  .reveal.is-in{opacity:1;}
  .rule{transform:scaleX(1);}
}
/* No-JS / no-observer safety: never leave content invisible. */
.no-js .reveal{opacity:1;transform:none;}
.no-js .rule{transform:scaleX(1);}