/* ==========================================================================
   Perfect Impression Ltd. Build v2, 2026-08-14.
   Concept: THE MAKE-READY SHEET. The page is composed like a press proof:
   live trim edge, colour bar, job-ticket rows, crop marks, and the idea
   inside her own logo (four process plates multiplying into every colour)
   doing structural work. The headline arrives out of register and snaps
   into register once, which is literally what her tagline promises.
   Her photograph is never touched by any ink effect. Light mode only.
   No em dashes anywhere.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts
   Fraunces replaces Bodoni Moda (2026-08-14 revision). Bodoni's hairline
   strokes fell apart at phone sizes; Fraunces keeps the old-style print
   warmth with strokes that stay readable at any size. WONK held at 0. */
@font-face{
  font-family:"Fraunces";
  src:url(/assets/fonts/Fraunces-var.woff2) format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url(/assets/fonts/Fraunces-italic-var.woff2) format("woff2-variations");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url(/assets/fonts/Archivo-wdth-var.woff2) format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}

/* ----------------------------------------------------------------- tokens */
:root{
  /* paper and ink. never pure white, never pure black */
  --paper:oklch(98.4% 0.006 92);
  --paper-2:oklch(96.2% 0.008 92);
  --stock:oklch(97.6% 0.006 92);
  --ink:oklch(21% 0.012 320);
  --ink-2:oklch(45% 0.012 320);
  --ink-3:oklch(58% 0.010 320);
  --rule:oklch(87% 0.008 92);
  --rule-2:oklch(92% 0.006 92);

  /* process inks */
  --cy:oklch(69% 0.150 226);
  --mag:oklch(56% 0.250 350);
  --mag-deep:oklch(46% 0.210 350);
  --ye:oklch(87% 0.175 97);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --display-vs:"opsz" 26,"SOFT" 0,"WONK" 0;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --max:1280px;
  --gut:clamp(18px,4.4vw,60px);

  /* light source for the finish samples, driven by pointer or scroll */
  --lx:50%; --ly:26%;
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul{padding:0;list-style:none}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}

::selection{background:var(--ye);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--mag);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* ------------------------------------------------------------- type utils */
.kicker{
  font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}
.kicker--mag{color:var(--mag-deep)}

.lede{
  font-size:clamp(17px,2.2vw,21px);
  line-height:1.5;
  max-width:36ch;
  color:var(--ink-2);
}
.lede--wide{max-width:54ch}

.h2{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 0;font-weight:600;
  font-weight:540;
  font-size:clamp(28px,4.2vw,52px);
  line-height:1.08;
  letter-spacing:-.014em;
  max-width:22ch;
}
.h2 em{font-style:italic}

/* ------------------------------------------------------- press furniture */
/* job-ticket row: the ruled spec strip a printer clips to the sheet */
.ticket{
  display:flex;flex-wrap:wrap;gap:5px 22px;align-items:center;
  border-top:1px solid var(--ink);
  padding-top:9px;
  font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.ticket b{font-weight:600;color:var(--ink)}
.ticket .sp{flex:1 1 auto}

/* crop marks on the trimmed hero image */
.trim{position:relative}
.trim::before,.trim::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:0 solid var(--ink-3);
}
.trim::before{top:-11px;left:-11px;border-left-width:1px;border-top-width:1px}
.trim::after{bottom:-11px;right:-11px;border-right-width:1px;border-bottom-width:1px}

/* caption under a trimmed image */
.img-cap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;
  border-top:1px solid var(--rule);margin-top:11px;padding-top:8px;
  font-size:11px;font-weight:600;font-stretch:80%;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.img-cap b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------- masthead */
.masthead{
  position:sticky;top:0;z-index:40;
  background:color-mix(in oklab,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  max-width:var(--max);margin:0 auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;min-width:0}
.mark{width:30px;height:30px;flex:none}
.wordmark{
  font-family:var(--display);font-weight:500;font-size:20px;
  letter-spacing:.005em;line-height:1;white-space:nowrap;display:block;
}
.brand-tag{
  display:block;font-family:var(--display);font-style:italic;
  font-size:11.5px;color:var(--mag-deep);letter-spacing:.01em;margin-top:2px;
  white-space:nowrap;
}
.mast-nav{display:none}
.mast-phone{
  margin-left:auto;text-decoration:none;flex:none;
  font-family:var(--display);font-size:17px;font-weight:500;
  border-bottom:2px solid var(--mag);padding-bottom:1px;
}
@media (min-width:560px){
  .mast-phone{font-size:19px}
}
@media (min-width:1080px){
  .mast-nav{
    margin-left:auto;display:flex;gap:22px;
    font-size:11px;font-weight:600;font-stretch:80%;letter-spacing:.16em;
    text-transform:uppercase;
  }
  .mast-nav a{text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
  .mast-nav a:hover{color:var(--ink);border-bottom-color:var(--mag)}
  .mast-phone{margin-left:26px}
}
@media (max-width:559px){
  .brand-tag{display:none}
  .wordmark{font-size:17px}
}

/* --------------------------------------------------------- the hero sheet */
.sheet{padding:clamp(26px,4.4vw,54px) 0 clamp(34px,4.6vw,60px)}

.hero{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}
.hero-head{padding-top:6px}

h1.display{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 28,"SOFT" 0,"WONK" 0;font-weight:600;
  font-weight:520;
  font-size:clamp(56px,15vw,148px);
  line-height:.94;
  letter-spacing:-.028em;
  margin:24px 0 0;
}
h1.display .l2{display:block;font-style:italic;font-weight:560;margin-left:.04em}

/* the registration snap: two ink ghosts slide into register, then merge.
   text only. never applied to a photograph. */
.reg-word{position:relative;display:inline-block}
.reg-word::before,.reg-word::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  mix-blend-mode:multiply;pointer-events:none;
  opacity:0;
  animation:register 3.5s cubic-bezier(.16,1,.3,1) .15s both;
}
.reg-word::before{color:var(--cy);--tx:-12px;--ty:8px}
.reg-word::after{color:var(--mag);--tx:-7px;--ty:-10px;animation-delay:.56s}
/* The plates sit out of register for the first third, so the cyan and magenta
   are readable as colour, then slide home. Sussan asked for the colours to
   show longer, and the ease-out alone collapsed the offset almost at once. */
@keyframes register{
  0%{transform:translate(var(--tx),var(--ty));opacity:.8}
  34%{transform:translate(var(--tx),var(--ty));opacity:.8}
  80%{opacity:.8}
  100%{transform:translate(0,0);opacity:0}
}

.hero-tag{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(22px,2.9vw,32px);
  color:var(--mag);
  margin:clamp(18px,2.4vw,26px) 0 0;
  letter-spacing:.005em;
}
.hero-lede{margin-top:18px}

.hero-actions{margin-top:clamp(24px,3vw,34px)}
.tel-big{
  display:block;
  font-family:var(--display);font-weight:500;
  font-size:clamp(32px,3.6vw,42px);
  text-decoration:none;line-height:1.15;
  width:fit-content;
  border-bottom:2px solid var(--mag);
  padding-bottom:2px;
  transition:color .25s cubic-bezier(.22,1,.36,1);
}
.tel-big:hover{color:var(--mag-deep)}
.mail-link{
  display:inline-block;margin-top:12px;max-width:100%;
  font-size:15px;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.mail-link:hover{color:var(--ink);border-bottom-color:var(--mag)}

.hero-figure{margin:14px 0 0}
.hero-figure .trim{background:var(--paper)}
.hero-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}

.tk-wide{display:none}
@media (min-width:560px){
  .tk-wide{display:inline}
}
@media (min-width:861px){
  .hero{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(30px,4vw,64px);
  }
  h1.display{font-size:clamp(76px,10.2vw,148px);line-height:.92}
  .hero-figure{margin:0}
  .hero-figure .trim{max-width:520px;margin-left:auto}
  /* Top-anchored: short desktop windows crop from the feet, never her head. */
  .hero-photo{aspect-ratio:auto;height:auto;max-height:min(68vh,700px);
              object-fit:cover;object-position:50% 0%}
  .hero-figure .img-cap{max-width:520px;margin-left:auto}
  .mail-link{margin-top:14px}
}

/* ----------------------------------------------------------- section frame */
.band{padding:clamp(54px,8vw,116px) 0;border-top:1px solid var(--rule)}
.band--tint{background:var(--paper-2)}
.section-head{display:grid;gap:14px;margin-bottom:clamp(26px,4.2vw,52px)}

/* ------------------------------------------------------------------ about */
.about{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
.about-head{display:grid;gap:14px}
.about-copy{max-width:62ch}
.about-copy p{margin-bottom:1.05em;color:var(--ink-2)}
.about-copy p.first{color:var(--ink);font-size:18px}
.about-copy p:last-child{margin-bottom:0}

.philosophy{
  margin:6px 0 0;padding-left:clamp(18px,2.4vw,30px);
  border-left:1px solid var(--mag);
}
.philosophy p{
  font-family:var(--display);font-style:italic;font-weight:560;
  font-size:clamp(20px,2.5vw,27px);line-height:1.3;color:var(--ink);
  margin:0 0 10px;max-width:34ch;
}
.philosophy cite{
  font-style:normal;font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}

@media (min-width:861px){
  .about{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4.6vw,72px)}
  .about-copy p.first{font-size:19px}
  .philosophy{grid-column:1 / -1;margin-top:clamp(10px,1.6vw,22px)}
}

/* ---------------------------------------------------------- finishes lab
   Not a grid of cards. A specification list, and one real object that gets
   printed in whichever finish you are reading. The light on the object
   follows the pointer, or the scroll on a phone. */
.lab{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.lab-stage{
  position:sticky;top:58px;z-index:5;
  background:var(--paper);padding-bottom:12px;
  box-shadow:0 10px 8px -8px color-mix(in oklab,var(--paper) 55%,transparent);
}

.card-obj{
  width:100%;
  aspect-ratio:3.5/2;
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--stock);
  border:1px solid oklch(89% .008 92);
  box-shadow:0 1px 1px rgba(45,32,58,.10), 0 22px 34px -24px rgba(45,32,58,.40);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:10px;
  padding:6% 8%;
  transition:box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.card-obj .grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.18;mix-blend-mode:multiply;
}
.card-obj .sheen{
  position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(40% 55% at var(--lx) var(--ly),
      rgba(255,255,255,.98) 0%,rgba(255,255,255,.6) 24%,rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;opacity:0;
  transition:opacity .5s ease-out;
}
.card-obj .shade{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 140% at var(--lx) var(--ly),
      rgba(0,0,0,0) 34%,rgba(40,28,48,.085) 100%);
  mix-blend-mode:multiply;
}
.card-mark{width:clamp(24px,3.4vw,34px);height:clamp(24px,3.4vw,34px);position:relative;z-index:2}
.card-brand{
  position:relative;z-index:2;
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,7.2vw,52px);
  line-height:.98;letter-spacing:-.015em;text-align:center;
  color:var(--ink);
}
.card-sub{
  position:relative;z-index:2;
  font-size:clamp(9px,1.05vw,12px);font-weight:600;font-stretch:80%;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
  text-align:center;
}
/* The gloss overlays the printed text by sharing its grid cells, not by being
   absolutely positioned. Absolutely positioned, its % padding resolved against
   the card while the card resolved its own against .lab-stage, so once the card
   hit its max-width the two text columns differed and one copy wrapped alone.
   Every child is placed explicitly, otherwise auto-placement refuses to overlap
   and pushes the printed copy into rows of its own. */
.card-obj > .card-mark {grid-area:1 / 1}
.card-obj > .card-brand{grid-area:2 / 1}
.card-obj > .card-sub  {grid-area:3 / 1}
.card-gloss{
  grid-area:1 / 1 / 4 / 2;justify-self:stretch;align-self:stretch;
  z-index:3;pointer-events:none;
  display:grid;align-content:center;justify-items:center;gap:10px;
  opacity:0;
}
.card-gloss .card-brand{
  color:transparent;
  background-image:radial-gradient(46% 120% at var(--lx) var(--ly),
      rgba(255,255,255,1) 0%,rgba(255,255,255,.92) 14%,
      rgba(255,255,255,.35) 34%,rgba(255,255,255,0) 60%);
  -webkit-background-clip:text;background-clip:text;
  mix-blend-mode:screen;
}
.card-gloss .card-mark,.card-gloss .card-sub{visibility:hidden}

/* ---- the nine finishes, each a different stock in the swatch book ------- */
#stage[data-finish="matte"]{background:oklch(96.2% .008 88)}
#stage[data-finish="matte"] .grain{opacity:.26}

#stage[data-finish="uv"]{background:linear-gradient(158deg,oklch(98.6% .006 226),oklch(90.5% .028 226))}
#stage[data-finish="uv"] .sheen{
  background:radial-gradient(34% 48% at var(--lx) var(--ly),
      rgba(255,255,255,1) 0%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 58%);
  opacity:1;
}
#stage[data-finish="uv"] .grain{opacity:.05}
#stage[data-finish="uv"] .card-brand{color:oklch(30% .12 240)}

#stage[data-finish="silk"]{background:linear-gradient(158deg,oklch(98% .008 350),oklch(92.5% .018 350))}
#stage[data-finish="silk"] .sheen{opacity:.38;filter:blur(14px)}
#stage[data-finish="silk"] .grain{opacity:.1}
#stage[data-finish="silk"] .card-brand{color:oklch(32% .09 350)}

#stage[data-finish="spot-uv"]{background:oklch(96.4% .005 92)}
#stage[data-finish="spot-uv"] .grain{opacity:.24}
#stage[data-finish="spot-uv"] .card-gloss{opacity:1}
#stage[data-finish="spot-uv"] .card-brand{color:oklch(17% .014 320)}

#stage[data-finish="raised-spot-uv"]{background:oklch(96.4% .005 92)}
#stage[data-finish="raised-spot-uv"] .grain{opacity:.24}
#stage[data-finish="raised-spot-uv"] .card-gloss{opacity:1}
#stage[data-finish="raised-spot-uv"] .card-brand{
  color:oklch(17% .014 320);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 4px 5px rgba(40,28,48,.34));
}

#stage[data-finish="foil"]{background:oklch(96.8% .005 92)}
#stage[data-finish="foil"] .sheen{opacity:.22}
#stage[data-finish="foil"] .card-brand{
  color:transparent;
  background-image:linear-gradient(100deg,
    oklch(36% .075 55) 0%,  oklch(41% .085 58) 6%,
    oklch(74% .115 88) 12%, oklch(84% .105 92) 16%,
    oklch(52% .10 68) 23%,  oklch(34% .07 52) 31%,
    oklch(70% .12 86) 40%,  oklch(86% .10 93) 45%,
    oklch(55% .105 70) 52%, oklch(33% .07 52) 61%,
    oklch(72% .12 88) 70%,  oklch(85% .10 92) 75%,
    oklch(50% .10 66) 83%,  oklch(36% .075 55) 100%);
  background-size:180% 100%;
  background-position:calc(var(--lx) * .9) center;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
#stage[data-finish="foil"] .card-mark{filter:saturate(.15) brightness(.85);opacity:.75}

#stage[data-finish="raised-foil"]{background:oklch(96.8% .005 92)}
#stage[data-finish="raised-foil"] .sheen{opacity:.18}
#stage[data-finish="raised-foil"] .card-brand{
  color:transparent;
  background-image:linear-gradient(100deg,
    oklch(33% .14 350) 0%,  oklch(38% .16 350) 7%,
    oklch(68% .19 350) 13%, oklch(80% .14 350) 17%,
    oklch(50% .22 350) 25%, oklch(31% .13 350) 33%,
    oklch(64% .20 350) 42%, oklch(82% .13 350) 47%,
    oklch(52% .22 350) 54%, oklch(30% .13 350) 63%,
    oklch(66% .19 350) 72%, oklch(81% .14 350) 77%,
    oklch(46% .21 350) 85%, oklch(33% .14 350) 100%);
  background-size:180% 100%;
  background-position:calc(var(--lx) * .9) center;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 4px 5px rgba(40,28,48,.40));
}

#stage[data-finish="suede"]{background:oklch(91.8% .014 314)}
#stage[data-finish="suede"] .grain{opacity:.58;background-size:64px 64px}
#stage[data-finish="suede"] .shade{
  background:radial-gradient(135% 145% at var(--lx) var(--ly),rgba(0,0,0,0) 16%,rgba(35,25,48,.26) 100%);
}
#stage[data-finish="suede"] .card-brand{color:oklch(30% .028 318);text-shadow:0 1px 0 rgba(255,255,255,.4)}
#stage[data-finish="suede"] .card-mark{opacity:.75}
#stage[data-finish="suede"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 42px rgba(48,34,62,.22);
}

#stage[data-finish="pearl"]{background:oklch(96.5% .012 250)}
#stage[data-finish="pearl"]::before{
  content:"";position:absolute;inset:-35%;pointer-events:none;
  background:conic-gradient(from calc(var(--lx) * 2.2) at var(--lx) var(--ly),
    oklch(87% .115 226),oklch(90% .10 350),oklch(92% .12 97),
    oklch(88% .10 158),oklch(87% .115 226));
  opacity:.85;filter:blur(11px);
}
#stage[data-finish="pearl"] .sheen{opacity:.45}
#stage[data-finish="pearl"] .card-brand{color:oklch(30% .045 318)}

/* stage caption */
.stage-cap{
  display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;
  border-top:1px solid var(--rule);margin-top:14px;padding-top:10px;
}
.stage-cap b{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.01em}
.stage-cap span{
  font-size:10.5px;font-weight:600;font-stretch:80%;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}

/* the specification list */
.lab-list{border-top:1px solid var(--ink)}
.lab-list li{border-bottom:1px solid var(--rule)}
.lab-list button{
  all:unset;
  display:grid;grid-template-columns:34px 1fr;gap:4px 14px;
  width:100%;box-sizing:border-box;
  padding:14px 10px 14px 0;
  cursor:pointer;
  transition:background .3s cubic-bezier(.22,1,.36,1),padding .3s cubic-bezier(.22,1,.36,1);
}
.lab-list button:hover{background:color-mix(in oklab,var(--paper-2) 70%,transparent);padding-left:10px}
.lab-list button:focus-visible{outline:2px solid var(--mag);outline-offset:-2px}
.lab-list .num{
  grid-row:span 2;font-size:11px;font-weight:600;font-stretch:78%;
  letter-spacing:.14em;color:var(--ink-3);padding-top:6px;
}
.lab-list .name{
  font-family:var(--display);font-weight:500;font-size:clamp(21px,2.5vw,29px);
  line-height:1.06;letter-spacing:-.012em;
}
.lab-list .note{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.lab-list [aria-pressed="true"]{background:color-mix(in oklab,var(--paper-2) 92%,transparent);padding-left:10px}
.lab-list [aria-pressed="true"] .name{color:var(--mag-deep)}
.lab-list [aria-pressed="true"] .num{color:var(--mag)}

.lab-foot{margin-top:24px;color:var(--ink-2);max-width:62ch;font-size:15px}
.lab-foot .hint{color:var(--ink-3)}
.hint-pointer{display:none}
@media (hover:hover) and (pointer:fine){
  .hint-pointer{display:inline}
  .hint-touch{display:none}
}

@media (min-width:861px){
  .lab{
    grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    gap:clamp(28px,4vw,64px);
    margin-top:clamp(24px,3.2vw,40px);
  }
  .lab-stage{grid-column:2;grid-row:1;top:92px;padding-bottom:0}
  .lab-list{grid-column:1;grid-row:1}
  .card-obj{max-width:540px}
  .stage-cap{max-width:540px;gap:4px 16px}
  .stage-cap b{font-size:22px}
  .card-brand{font-size:clamp(26px,4.4vw,52px)}
}

/* --------------------------------------------------------------- card ideas
   Eight real jobs for the same rectangle, set as a sample fan: every card a
   different stock, a different voice. Deliberately not an identical grid. */
.ideas-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin-top:clamp(24px,3.4vw,40px);
}
.bcard{
  aspect-ratio:3.5/2.15;
  border:1px solid var(--rule);
  display:grid;align-content:center;justify-items:start;
  gap:6px;padding:clamp(12px,1.5vw,20px);
  position:relative;overflow:hidden;
  background:var(--stock);
  box-shadow:0 1px 0 oklch(90% .01 92);
}
.bcard .n{
  font-size:10px;font-weight:600;font-stretch:78%;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.bcard .t{
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.9vw,23px);
  line-height:1.08;letter-spacing:-.01em;
}
.bcard .r{width:26px;height:1px;background:var(--rule);margin-top:2px}

.bc-1{background:oklch(97.5% .006 92)}
.bc-2{background:oklch(96% .022 226)}
.bc-2 .t{color:oklch(36% .13 226)}
.bc-2 .r{background:var(--cy)}
.bc-3{background:oklch(97% .02 97)}
.bc-3 .t{font-family:var(--sans);font-weight:800;font-stretch:82%;text-transform:uppercase;letter-spacing:-.01em;color:oklch(34% .09 75)}
.bc-3 .r{background:var(--ye)}
.bc-4{background:oklch(96.5% .018 350)}
.bc-4 .t{font-style:italic;color:var(--mag-deep)}
.bc-4 .r{background:var(--mag)}
.bc-5{background:oklch(95.5% .008 320)}
.bc-6{background:oklch(97.5% .006 92)}
.bc-6 .t{
  color:transparent;
  background-image:linear-gradient(100deg,oklch(44% .09 60),oklch(78% .10 90) 32%,
    oklch(52% .10 68) 56%,oklch(72% .10 88) 80%,oklch(46% .09 62));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(50,35,20,.28));
}
.bc-6 .r{background:oklch(72% .12 70)}
.bc-7{background:oklch(96.8% .012 160)}
.bc-7 .t{font-family:var(--sans);font-weight:700;font-stretch:78%;color:oklch(34% .07 160)}
.bc-7 .r{background:oklch(62% .10 160)}
.bc-8{background:oklch(97% .006 92);grid-template-columns:1fr auto;align-items:center}
.bc-8 .qr{width:clamp(34px,4.4vw,52px);height:clamp(34px,4.4vw,52px);grid-column:2;grid-row:1/4;align-self:center;color:var(--ink)}

@media (min-width:861px){
  .ideas-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
  .bcard{aspect-ratio:3.5/2}
}

/* ----------------------------------------------------------------- gallery */
.gallery{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(24px,3.4vw,40px);
}
.gallery figure{margin:0}
.gallery img{width:100%;object-fit:cover;display:block;background:var(--paper-2)}
.gallery figcaption{
  margin-top:8px;font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
/* phone first: full and half rows */
.g-a,.g-e{grid-column:span 12}
.g-b,.g-c,.g-d{grid-column:span 6}
.g-a img{aspect-ratio:1/1}
.g-b img,.g-c img{aspect-ratio:3/4}
.g-d img{aspect-ratio:1/1}
.g-e img{aspect-ratio:16/10}
@media (min-width:861px){
  .g-a{grid-column:span 5}
  .g-b{grid-column:span 4}
  .g-c{grid-column:span 3}
  .g-d{grid-column:span 3}
  .g-e{grid-column:span 6}
}

.range{
  margin-top:clamp(32px,4vw,54px);
  border-top:1px solid var(--ink);padding-top:16px;
  display:grid;grid-template-columns:1fr;gap:14px;
}
.range-list{
  display:flex;flex-wrap:wrap;gap:6px 0;
  font-size:14px;color:var(--ink-2);
}
.range-list li{margin-right:12px}
@media (min-width:861px){
  .range{grid-template-columns:180px 1fr;gap:24px}
  .range-list li{padding-right:14px;margin-right:14px;border-right:1px solid var(--rule)}
  .range-list li:last-child{border-right:0;padding-right:0;margin-right:0}
}

/* -------------------------------------------------------------- testimonial */
.quote{margin-top:20px}
.quote p{
  font-family:var(--display);font-weight:560;
  font-optical-sizing:auto;font-variation-settings:"opsz" 24;font-weight:560;
  font-size:clamp(20px,2.45vw,30px);
  line-height:1.32;letter-spacing:-.012em;
  max-width:30ch;
}
.quote cite{
  display:flex;align-items:center;gap:12px;margin-top:28px;
  font-style:normal;font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}
.quote cite::before{content:"";width:40px;height:1px;background:var(--mag);flex:none}
@media (min-width:900px){
  .quote p{columns:2;column-gap:56px;max-width:none;column-rule:1px solid var(--rule);orphans:3;widows:3}
}

/* ------------------------------------------------------- testimonials
   Two real client quotes. The slides are stacked in one grid cell and
   crossfaded, not translated: the quotes are very different lengths, so a
   sliding track would jump the page height on every change. Opacity only,
   never a layout property. */
.says{margin-top:22px}
.says-stage{display:grid}
.says-slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
.says-slide.is-on{opacity:1;visibility:visible;pointer-events:auto}

.stars{display:flex;gap:5px;margin-bottom:18px}
.stars svg{width:15px;height:15px;fill:var(--mag);flex:none}

.says-bar{
  display:flex;align-items:center;gap:18px;
  margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);
}
.says-count{
  font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.says-count b{color:var(--ink);font-weight:600}
.says-btn{
  appearance:none;background:none;cursor:pointer;
  width:42px;height:30px;padding:0;
  border:1px solid var(--rule);border-radius:2px;
  display:grid;place-items:center;color:var(--ink-2);
  transition:border-color .2s ease-out,color .2s ease-out;
}
.says-btn svg{width:18px;height:8px}
.says-btn:hover{border-color:var(--mag);color:var(--ink)}
.says-btn:disabled{opacity:.35;cursor:default}
@media (min-width:900px){
  .says-bar{margin-top:34px}
}

/* ----------------------------------------------------------------- catalog */
.catalog{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.catalog-cover{display:block;text-decoration:none}
.catalog-cover img{
  width:100%;
  box-shadow:0 1px 2px rgba(40,28,45,.16),0 22px 46px -22px rgba(40,28,45,.42);
}
.catalog-copy .h2{margin:10px 0 18px}
.catalog-copy p{color:var(--ink-2);max-width:48ch;margin-bottom:26px}
@media (min-width:861px){
  .catalog{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4.4vw,70px)}
}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper);
  text-decoration:none;padding:15px 24px;border-radius:2px;
  font-size:12px;font-weight:700;font-stretch:82%;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s cubic-bezier(.22,1,.36,1);
}
.btn:hover{background:var(--mag-deep)}
.btn .arrow{width:18px;height:8px;flex:none}

/* ----------------------------------------------------------------- contact */
.contact{display:grid;gap:clamp(20px,3vw,34px);justify-items:start}
.contact-tel{
  font-family:var(--display);font-weight:500;
  font-size:clamp(44px,10.2vw,124px);
  line-height:.92;letter-spacing:-.03em;
  text-decoration:none;display:inline-block;
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
.contact-tel:hover{color:var(--mag)}
.contact-mail{
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px,3vw,34px);
  color:var(--mag-deep);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:3px;
  max-width:100%;
}
.contact-mail:hover{border-bottom-color:var(--mag)}

/* ------------------------------------------------------------------ footer */
.foot{border-top:1px solid var(--rule);padding:34px 0 0;margin-top:0}
.foot-in{
  max-width:var(--max);margin:0 auto;padding-inline:var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  font-size:11px;font-weight:600;font-stretch:80%;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.foot-in .sp{flex:1 1 auto}
.foot-in a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-in a:hover{border-bottom-color:var(--mag);color:var(--ink)}
.foot .mark{width:22px;height:22px}
.foot-tag{font-family:var(--display);font-style:italic;text-transform:none;
  letter-spacing:.01em;font-size:13px;color:var(--mag-deep)}
.foot-in{padding-bottom:30px}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reg-word::before,.reg-word::after{display:none}
}

/* ------------------------------------------------------------------- print */
@media print{
  .masthead,.sheen,.shade,.grain,.skip{display:none !important}
  body{background:#fff;font-size:11pt}
  .band{border-top:1px solid #ccc;padding:18pt 0}
  a{text-decoration:none;color:#000}
  .lab-stage{position:static}
}

/* ---------------------------------------------------------------
   Products as a horizontal rail (2026-08-14). Fourteen products
   stacked vertically ate the page; sideways is the right shape for
   a catalog you browse rather than read.
   --------------------------------------------------------------- */
.rail{position:relative;margin-top:26px}
.rail-track{
  display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:4px 0 18px;scrollbar-width:thin;
}
.rail-track::-webkit-scrollbar{height:8px}
.rail-track::-webkit-scrollbar-thumb{background:#d8d3c8;border-radius:99px}
.rail-track::-webkit-scrollbar-track{background:transparent}
.rail-item{
  flex:0 0 auto;width:300px;margin:0;scroll-snap-align:start;
}
.rail-item img{
  width:100%;height:300px;object-fit:cover;display:block;
  border-radius:3px;background:#efece6;
}
.rail-item figcaption{
  margin-top:9px;font-family:var(--sans);font-size:13px;letter-spacing:.02em;
  color:#3a352c;
}
.rail-hint{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#8b8478;margin:2px 0 0;
}
@media(min-width:900px){
  .rail-item{width:340px}
  .rail-item img{height:340px}
}
@media(max-width:520px){
  .rail-item{width:78vw}
  .rail-item img{height:78vw}
}
/* the rail is allowed to bleed to the screen edge, it reads as more to come */
@media(max-width:900px){
  .rail-track{margin-left:calc(var(--gutter,20px) * -1);padding-left:var(--gutter,20px)}
}

/* rail arrows: without a visible control a scroll container reads as static */
.rail{position:relative}
.rail-nav{
  position:absolute;top:calc(50% - 34px);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid #ded8cc;
  background:rgba(255,255,255,.94);color:#2c2820;font-size:26px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
  box-shadow:0 2px 14px rgba(40,34,24,.13);transition:transform .15s,opacity .15s;
}
.rail-nav:hover{transform:scale(1.06)}
.rail-nav:focus-visible{outline:2px solid var(--mag,#e6007e);outline-offset:3px}
.rail-prev{left:-8px}
.rail-next{right:-8px}
.rail-nav[disabled]{opacity:.25;cursor:default}
@media(max-width:760px){ .rail-nav{display:none} }

/* ==========================================================================
   Product catalog (2026-08-14). Four groups, category rails, expanding
   variant panels. Every product is a photographed card. No pricing, ever.
   ========================================================================== */
.cat-group{margin-top:clamp(34px,4.6vw,58px)}
.cat-group:first-of-type{margin-top:clamp(22px,3vw,36px)}
.cat-group-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  border-top:1px solid var(--ink);padding-top:14px;
}
.cat-group-title{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,27px);
  letter-spacing:-.01em;color:var(--ink);
}
.cat-group-sub{font-size:13px;color:var(--ink-3);letter-spacing:.01em}

/* the category card */
.cat-card{
  display:flex;flex-direction:column;text-align:left;
  padding:0;border:1px solid var(--rule);background:#fff;
  cursor:pointer;font:inherit;color:inherit;
}
.cat-card--flat{cursor:default}
.cat-photo{display:block;overflow:hidden;background:var(--paper-2)}
.cat-photo img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .45s ease;
}
@media (hover:hover){
  .cat-card:not(.cat-card--flat):hover .cat-photo img{transform:scale(1.04)}
}
.cat-meta{display:flex;flex-direction:column;gap:3px;padding:12px 14px 13px}
.cat-name{
  font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:-.008em;color:var(--ink);
}
.cat-sub{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;font-stretch:80%;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.cat-more{
  margin-left:auto;width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;border:0;
  border-radius:50%;font-size:17px;font-weight:500;line-height:1;
  color:#fff;background:var(--ink);
  box-shadow:0 1px 3px rgba(30,26,20,.18);
  transition:transform .3s cubic-bezier(.34,1.4,.5,1),background .2s ease;
}
.cat-card:hover .cat-more,.cat-card:focus-visible .cat-more{ background:var(--mag); }
.cat-card:focus-visible{outline:2px solid var(--mag);outline-offset:3px}
.cat-card[aria-expanded="true"]{border-color:var(--ink)}
.cat-card[aria-expanded="true"] .cat-more{
  transform:rotate(45deg);background:var(--mag);color:#fff;
}

/* the variant panel */
.cat-panel{
  margin-top:14px;border:1px solid var(--ink);background:#fff;
  padding:clamp(16px,2.4vw,26px);
}
.cat-panel-head{
  display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  align-items:start;margin-bottom:14px;
}
.cat-panel-title{
  font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,22px);
  letter-spacing:-.01em;color:var(--ink);
}
.cat-panel-note{grid-column:1;font-size:13.5px;color:var(--ink-2)}
.cat-close{
  grid-column:2;grid-row:1 / span 2;align-self:start;
  font:inherit;font-size:11px;font-weight:700;font-stretch:80%;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--rule);background:none;color:var(--ink-2);
  padding:8px 14px;cursor:pointer;border-radius:99px;
}
.cat-close:hover{border-color:var(--ink);color:var(--ink)}
.cat-close:focus-visible{outline:2px solid var(--mag);outline-offset:3px}

.variant-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.6vw,18px);
}
.variant-grid figure{margin:0}
.variant-grid img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  background:var(--paper-2);border:1px solid var(--rule-2);
}
.variant-grid figcaption{
  margin-top:7px;font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
@media (min-width:640px){ .variant-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1000px){ .variant-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.variant-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){ .variant-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* business card finish chips, they drive the finishes lab above */
.finish-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.finish-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--rule);border-radius:99px;
  padding:9px 16px 9px 12px;text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:border-color .2s ease,background .2s ease;
}
.finish-chip .num{
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--mag);
}
.finish-chip:hover{border-color:var(--ink)}
.finish-chip:focus-visible{outline:2px solid var(--mag);outline-offset:3px}

.catalog-foot{
  margin-top:clamp(28px,3.6vw,44px);border-top:1px solid var(--rule);
  padding-top:16px;font-size:14.5px;line-height:1.65;color:var(--ink-2);
  max-width:62ch;
}

/* rail sizing for category cards */
.cat-rail{margin-top:18px}
.cat-rail .rail-item{width:300px}
@media (max-width:860px){
  .cat-rail .rail-item{width:66vw}
}
@media (max-width:480px){
  .cat-rail .rail-item{width:72vw}
}

/* the category rail inherits .rail-item sizing from the old product rail;
   pin the image back to a true square at every width */
.cat-rail .rail-item img{height:auto;aspect-ratio:1/1;border-radius:0}
.cat-rail .rail-item{width:300px}
@media(min-width:900px){ .cat-rail .rail-item{width:300px} }
@media(max-width:860px){ .cat-rail .rail-item{width:66vw} }
@media(max-width:520px){ .cat-rail .rail-item{width:72vw} }

/* tablet: two category cards and a peek, not one and a half giants */
@media(min-width:521px) and (max-width:860px){
  .cat-rail .rail-item{width:42vw}
}
/* a rail with nothing to scroll hides its arrows entirely */
.rail-nav.rail-nav--off{display:none}
.cat-panel{scroll-margin-top:86px}
.cat-group-count{
  margin-left:auto;font-size:11px;font-weight:600;font-stretch:80%;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
@media(max-width:520px){ .cat-group-count{display:none} }

/* ==========================================================================
   Books highlight (2026-08-14). Direct Mail's old slot, promoted. Her
   catalog lists Hard Cover and Soft Cover Books, and Catalogs / Magazines,
   so books get a feature block, not a rail: big imagery, a binding
   specification list in the finishes-lab voice, no pricing.
   ========================================================================== */
.band--books .ticket{margin-bottom:clamp(22px,3vw,34px)}
.books-head{margin-bottom:0}

/* the imagery. phone first: the hardcover stack full width, the two
   soft covers side by side under it */
.books-stage{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin-top:clamp(24px,3.4vw,42px);
}
.books-photo{margin:0;display:flex;flex-direction:column}
.books-photo img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  background:var(--paper-2);
  box-shadow:0 1px 2px rgba(40,28,45,.14),0 18px 38px -22px rgba(40,28,45,.38);
}
.books-photo--main{grid-column:span 2}
/* with hardcover gone only two photos remain: stack both full width on phones */
.books-stage--pair .books-photo--b{grid-column:span 2}
.books-photo--main img{aspect-ratio:4/3}
.books-photo figcaption{
  margin-top:9px;font-size:10.5px;font-weight:600;font-stretch:80%;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.books-photo figcaption b{color:var(--ink);font-weight:700;margin-right:8px}

@media (min-width:861px){
  .books-stage{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:clamp(14px,1.8vw,24px);
    align-items:stretch;
  }
  .books-photo--main{grid-column:1/8;grid-row:1/3}
  .books-photo--main img{aspect-ratio:auto;height:100%;flex:1 1 auto}
  .books-photo--b{grid-column:8/13;grid-row:1}
  .books-photo--c{grid-column:8/13;grid-row:2}
  .books-photo--b img,.books-photo--c img{aspect-ratio:16/10}
  /* two photos left after hardcover came out: sit them side by side */
  .books-stage--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books-stage--pair .books-photo--main{grid-column:1;grid-row:1}
  .books-stage--pair .books-photo--main img{aspect-ratio:16/10;height:auto}
  .books-stage--pair .books-photo--b{grid-column:2;grid-row:1}
}

/* the five bindings, set like the finishes list: numbered, Fraunces names,
   one plain-English line each */
.bind-list{
  margin-top:clamp(30px,4vw,52px);
  border-top:1px solid var(--ink);
  display:grid;grid-template-columns:1fr;
}
.bind-list li{
  display:grid;grid-template-columns:34px 1fr;gap:3px 14px;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.bind-num{
  grid-row:span 2;font-size:11px;font-weight:600;font-stretch:78%;
  letter-spacing:.14em;color:var(--mag);padding-top:7px;
}
.bind-name{
  font-family:var(--display);font-weight:500;
  font-size:clamp(20px,2.2vw,24px);line-height:1.08;letter-spacing:-.012em;
  color:var(--ink);
}
.bind-note{grid-column:2;font-size:13.5px;color:var(--ink-2);line-height:1.45}

@media (min-width:861px){
  .bind-list{grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--rule)}
  .bind-list li{
    display:block;border-bottom:0;
    padding:18px clamp(14px,1.6vw,24px) 20px 0;
  }
  .bind-list li + li{border-left:1px solid var(--rule);padding-left:clamp(14px,1.6vw,24px)}
  .bind-num{display:block;padding-top:0;margin-bottom:10px}
  .bind-name{display:block;margin-bottom:8px;font-size:clamp(19px,1.7vw,23px)}
  .bind-note{font-size:13px}
}

.books-foot{
  margin-top:clamp(24px,3.2vw,38px);
  color:var(--ink-2);max-width:62ch;font-size:15px;
}

/* ---------------------------------------------------------------
   2026-08-14 mobile rail fix. On a phone the category cards were
   stacking instead of sliding sideways, and content overran the
   right edge. Force the rails to be true horizontal scrollers and
   clamp anything that tries to exceed the viewport.
   --------------------------------------------------------------- */
.cat-rail .rail-track,.rail .rail-track{
  display:flex !important;flex-wrap:nowrap !important;
  overflow-x:auto !important;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.cat-rail .rail-item,.cat-rail .cat-card,.rail .rail-item{
  flex:0 0 auto !important;scroll-snap-align:start;min-width:0;
}
@media(max-width:760px){
  .cat-rail .rail-item,.cat-rail .cat-card{ width:80vw !important;max-width:340px }
  .cat-rail .cat-photo img{ height:80vw;max-height:340px }
}
/* nothing anywhere may push the page wider than the screen */
html,body{overflow-x:clip;max-width:100vw}
.wrap,section,.band,header{max-width:100%}
img,svg,video,iframe{max-width:100%}
@media(max-width:760px){
  .hero-actions .mail-link,.cat-sub,.cat-name{overflow-wrap:anywhere;word-break:break-word}
}

/* catalog footer prose was clipping a few px on the right on phones */
.catalog-foot{padding-right:var(--gut,20px);overflow-wrap:anywhere}
@media(max-width:760px){
  .catalog-copy,.cat-group-head,.section-head{padding-right:2px}
  .catalog-foot{max-width:100%}
}

/* contact form */
.contact-form{margin-top:28px;max-width:620px}
.cf-row{display:flex;gap:16px}
.cf-field{display:block;margin:0 0 14px;flex:1}
.cf-field>span{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;
  color:var(--ink-2);margin-bottom:6px}
.cf-field input,.cf-field textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:6px;padding:11px 13px;
  transition:border-color .15s,box-shadow .15s}
.cf-field textarea{resize:vertical;min-height:110px}
.cf-field input:focus,.cf-field textarea:focus{outline:0;border-color:var(--mag);
  box-shadow:0 0 0 3px rgba(214,0,120,.12)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.cf-send{font:inherit;font-size:15px;font-weight:600;color:#fff;background:var(--ink);
  border:0;border-radius:8px;padding:13px 26px;cursor:pointer;transition:background .15s}
.cf-send:hover{background:var(--mag)} .cf-send:disabled{opacity:.6;cursor:default}
.cf-status{margin:0;font-size:14px} .cf-ok{color:#1a7a44} .cf-err{color:#a63a2b}
@media(max-width:600px){ .cf-row{display:block} }