/* ==================================================================
   Berry Systems
   ------------------------------------------------------------------
   One stylesheet, one token set. Type is in rem so text-only zoom
   scales it; clamp() keeps a fluid vw middle term with rem bounds.
   ================================================================== */

/* ---- fonts ------------------------------------------------------- */
/* Latin subset only: no glyph outside U+0000–00FF, U+2000–206F etc.
   appears anywhere in the site's copy. */
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 400;
  font-display:swap;src:url("/fonts/cormorant-garamond-300.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:200 400;
  font-display:swap;src:url("/fonts/source-serif-4-200-400.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:200 400;
  font-display:swap;src:url("/fonts/source-serif-4-200-400-italic.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- tokens ------------------------------------------------------ */
/* color-scheme is a deliberate single-scheme declaration, not an
   omission: this is a cream-paper world with no dark counterpart, and
   saying so stops the UA theming scrollbars against a light page. */
:root{
  color-scheme:light;

  --ink:#131217;            /* headings, emphasis          15.6:1 */
  --body:#2A2F3A;           /* running text                11.2:1 */
  --micro:#4A505C;          /* all sub-12px UI text          6.8:1 */

  --accent:#4E7F9E;         /* functional marks              3.6:1 */
  --ornament:#BBDEF0;       /* decorative only — the wordmark diamond */

  --paper-hi:#FCFAEF;
  --paper:#F7F3E4;
  --paper-lo:#F0EBD9;
  --ground:radial-gradient(120% 90% at 50% 24%,
            var(--paper-hi) 0%, var(--paper) 62%, var(--paper-lo) 100%);
  --card:rgba(255,255,255,.4);
  --chip:rgba(252,250,239,.92);

  --rule:rgba(19,18,23,.13);
  --rule-strong:rgba(19,18,23,.34);
  --underline:rgba(19,18,23,.30);
  --underline-q:rgba(19,18,23,.25);

  --display:"Cormorant Garamond",Georgia,serif;
  --text:"Source Serif 4",Georgia,serif;

  --ease:cubic-bezier(.2,.8,.2,1);
  --tap:44px;               /* the measurement the whole site is built on */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--body);font-family:var(--text)}

/* ---- motion ------------------------------------------------------ */
@keyframes bs-fade{from{opacity:0}to{opacity:1}}
@keyframes bs-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bs-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bs-ink{from{clip-path:inset(0 0 100%);opacity:.12}to{clip-path:inset(0);opacity:1}}

/* Near-zero duration rather than `animation:none` so fill-mode:both still
   resolves to each END state — killing bs-ink outright would leave the
   video clipped to nothing. Video playback is paused in JS; CSS can't. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ---- shared marks ------------------------------------------------ */
.dia{width:5px;height:5px;background:var(--accent);transform:rotate(45deg);
  flex:0 0 auto;display:inline-block}
.dia-lg{width:8px;height:8px;background:var(--ornament)}

/* ================= landing ======================================== */
.stage{
  min-height:100svh;
  background:var(--ground);
  color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(52px,8vw,120px) clamp(44px,7vw,104px);
  position:relative;overflow:hidden;
}

.hero{
  position:relative;
  width:1027px;max-height:62vh;height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;opacity:.92;
  filter:invert(1) grayscale(1) brightness(1.24) contrast(1.34);
  mask-image:radial-gradient(74% 74% at 50% 46%,#000 46%,rgba(0,0,0,.5) 74%,transparent 93%);
  -webkit-mask-image:radial-gradient(74% 74% at 50% 46%,#000 46%,rgba(0,0,0,.5) 74%,transparent 93%);
  transform:translateY(calc(-26% - 36px)) scale(1.55);
  animation:bs-ink 2.2s cubic-bezier(.35,.7,.2,1) .3s both;
}

/* the invisible pause control, sized to the artwork in JS */
.motion{
  position:fixed;z-index:5;display:block;
  margin:0;padding:0;border:0;background:none;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;font:inherit;color:transparent;
}
.motion:focus-visible{outline:2px solid var(--body);outline-offset:-3px;border-radius:1px}
.motion[hidden]{display:none!important}
.motion-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .3s;pointer-events:none;
  display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tap);padding:0 15px;
  font-family:var(--text);font-weight:300;font-size:.6875rem;
  letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
  color:var(--micro);background:var(--chip);border:1px solid var(--rule);
}
.motion:focus-visible .motion-hint{opacity:1}
.motion-hint .dia{background:var(--ornament)}

.identity{
  position:absolute;left:clamp(30px,4vw,54px);bottom:clamp(52px,7vw,104px);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(4px,.7vh,9px);
}
.wordmark{
  margin:0 0 clamp(10px,1.4vh,16px);
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.0625rem,4.1vw,3.6875rem);
  line-height:1;letter-spacing:.03em;color:var(--ink);white-space:nowrap;
  animation:bs-fade 1.6s ease 1.5s both;
}
.rule{
  display:flex;align-items:center;gap:9px;width:clamp(210px,30vw,380px);
  transform-origin:0 50%;
  animation:bs-rule 1.4s var(--ease) 2s both;
}
.rule i{flex:1 1 0;height:1px;
  background:linear-gradient(90deg,rgba(19,18,23,.42) 0%,rgba(19,18,23,.26) 62%,rgba(19,18,23,0) 100%)}
.rule b{flex:1.6 1 0;height:1px;
  background:linear-gradient(90deg,rgba(19,18,23,.22) 0%,rgba(19,18,23,0) 100%)}
.tagline{
  margin:0;font-style:italic;font-weight:300;
  font-size:clamp(.75rem,1.275vw,1.171875rem);
  line-height:1.38;color:var(--body);white-space:nowrap;
  animation:bs-rise 1.3s var(--ease) 2.15s both;
}

.links{
  position:absolute;right:clamp(38px,5.6vw,74px);bottom:clamp(52px,7vw,104px);
  display:flex;flex-direction:column;align-items:flex-end;gap:11px;
}
.links a{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--micro);text-transform:uppercase;line-height:1;
  text-decoration:none;transition:color .3s;
}
.links a:hover{color:var(--ink)}
.links a:focus-visible{outline:2px solid var(--body);outline-offset:4px;border-radius:1px}
/* both links clear the 11px floor; the size step carries the hierarchy */
.link-contact{font-size:clamp(.6875rem,.95vw,.75rem);letter-spacing:.42em;
  animation:bs-fade 1.6s ease 2.6s both}
.link-legal{font-size:.6875rem;font-weight:200;letter-spacing:.34em;
  padding-right:13px;animation:bs-fade 1.6s ease 2.75s both}
/* the separator only exists in the stacked mobile row */
.link-sep{display:none}

@media (max-width:600px){
  /* The links move below the wordmark as one quiet row sharing its left
     margin. Stacked at the right they collided with the tagline. */
  .identity{bottom:118px}
  .links{
    left:clamp(30px,4vw,54px);right:auto;bottom:44px;
    flex-direction:row;align-items:center;gap:22px;
  }
  /* real 44px targets; side by side the height costs nothing visually */
  .links a{padding-top:18px;padding-bottom:18px;white-space:nowrap}
  /* the row must survive 320px: at desktop tracking these two labels are
     ~316px wide against 260px of usable width and each wraps to two lines */
  .link-contact{font-size:.6875rem;letter-spacing:.24em}
  .link-legal{letter-spacing:.2em}
  .links{gap:16px}
  /* the diamond inside the mail link would read as a separator between
     the two links while still opening mail — swap it for a real one */
  .link-contact .dia{display:none}
  .link-sep{display:inline-block;background:var(--ornament)}
  /* show the whole flock instead of 24% of it */
  .hero{width:130%;margin-left:-15%;max-height:none;transform:translateY(-14%)}
}

/* ================= privacy notice ================================= */

.notice,
.notice *{box-sizing:border-box}

.notice{
  position:fixed;inset:0;z-index:2147483000;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  background:var(--ground);
  color:var(--body);
  font-family:var(--text);
  font-weight:350;line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  animation:bslg-in .55s var(--ease) both;
}
.notice:focus{outline:none}
.notice :focus-visible{
  outline:2px solid var(--body);outline-offset:3px;border-radius:1px}
.notice[hidden]{display:none!important}
@keyframes bslg-in{from{opacity:0}to{opacity:1}}
@keyframes bslg-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .notice,.notice *,
  .notice *::before,.notice *::after{
    animation-duration:.01ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
}

.n-wrap{max-width:860px;margin:0 auto;padding:0 clamp(30px,6vw,54px)}

/* skip past the 12-item index straight to the notice — the index sits
   between the Close control and the first line of prose, so a keyboard
   reader otherwise tabs through 12 links to start reading */
.n-skip{
  position:absolute;left:-9999px;top:0;z-index:4;
  font-family:var(--text);font-weight:300;font-size:.6875rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
  background:var(--chip);border:1px solid var(--rule-strong);
  padding:0 16px;min-height:var(--tap);
  display:inline-flex;align-items:center;text-decoration:none}
.n-skip:focus{left:clamp(30px,6vw,54px);top:14px}

/* the wordmark diamond, reused as crumb separator and list bullet */

/* the large rule diamond echoes the wordmark verbatim — decorative, so it
   keeps the pale original; nothing depends on seeing it */


/* ---- close control ---- */
.n-close{
  position:fixed;top:clamp(22px,3.4vw,40px);right:clamp(24px,4vw,46px);z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--text);font-weight:300;
  font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--body);cursor:pointer;text-decoration:none;
  min-height:var(--tap);padding:0 16px;
  background:var(--chip);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(19,18,23,.14);
  transition:color .3s,border-color .3s;
  animation:bslg-in .6s ease .15s both;
}
.n-close:hover{color:var(--ink);border-color:var(--rule-strong)}
.n-close .n-dia{transition:background .3s}
.n-close:hover .n-dia{background:var(--ink)}

/* ---- header ---- */
.n-head{padding-top:clamp(72px,12vh,132px);
  animation:bslg-rise .8s var(--ease) both}
.n-crumb{display:inline-flex;align-items:center;gap:10px;
  margin-bottom:clamp(20px,3vh,28px);
  font-weight:300;font-size:.6875rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--micro);line-height:1}
.n-crumb a{color:var(--micro);text-decoration:underline;
  text-decoration-thickness:.5px;text-underline-offset:3px;
  text-decoration-color:var(--underline-q);
  display:inline-flex;align-items:center;min-height:var(--tap);
  transition:color .3s}
.n-crumb a:hover{color:var(--ink)}
.n-title{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(2.375rem,5.4vw,3.875rem);line-height:1.03;
  letter-spacing:.03em;color:var(--ink)}
.n-rule{display:flex;align-items:center;gap:9px;width:clamp(210px,30vw,380px);
  margin:clamp(15px,2.2vh,22px) 0 0;
  animation:bslg-in 1s var(--ease) .25s both}
.n-rule i{flex:1 1 0;height:1px;background:linear-gradient(90deg,rgba(19,18,23,.42) 0%,rgba(19,18,23,.26) 62%,rgba(19,18,23,0) 100%)}
.n-rule b{flex:1.6 1 0;height:1px;background:linear-gradient(90deg,rgba(19,18,23,.22) 0%,rgba(19,18,23,0) 100%)}
.n-meta{margin:clamp(20px,2.6vh,26px) 0 0;font-weight:300;font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--micro);line-height:1.9}
.n-lead{margin:clamp(24px,3.4vh,32px) 0 0;max-width:62ch;font-weight:300;
  font-size:clamp(1rem,1.55vw,1.15625rem);line-height:1.68;
  color:var(--body);text-wrap:pretty}

/* ---- contents index ---- */
.n-toc{margin:clamp(30px,4vh,42px) 0 0;padding-top:clamp(20px,2.6vw,26px);
  max-width:64ch;border-top:1px solid var(--rule);
  animation:bslg-in .9s var(--ease) .35s both}
.n-toc-h{margin:0 0 10px;font-weight:300;font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--micro)}
.n-toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:34px}
.n-toc li{break-inside:avoid}
/* full 44px rows: the index is the layer's densest cluster of targets */
.n-toc a{display:flex;gap:11px;align-items:center;
  min-height:var(--tap);padding:4px 0;
  font-size:.8125rem;line-height:1.35;color:var(--body);
  text-decoration:none;text-wrap:pretty;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.n-toc a:hover{color:var(--ink);border-bottom-color:rgba(19,18,23,.22)}
.n-toc i{flex:0 0 auto;width:1.7em;font-style:normal;font-size:.6875rem;
  letter-spacing:.08em;color:var(--micro)}

/* ---- prose ---- */
.n-prose{max-width:64ch;padding-bottom:clamp(72px,12vh,140px)}
.n-prose section{padding-top:clamp(34px,5vw,54px);scroll-margin-top:88px}
.n-prose h2{margin:0;display:flex;gap:14px;align-items:baseline;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3125rem,2.4vw,1.6875rem);line-height:1.2;
  letter-spacing:.02em;color:var(--ink);text-wrap:balance}
.n-num{flex:0 0 auto;width:1.7em;
  font-family:var(--text);font-weight:300;font-size:.6875rem;
  letter-spacing:.1em;color:var(--micro);line-height:1}
.n-prose h3{margin:26px 0 0;font-family:var(--text);
  font-weight:400;font-size:.90625rem;letter-spacing:.02em;
  color:var(--ink);line-height:1.5}
.n-prose p{margin:14px 0 0;font-size:.96875rem;line-height:1.76;
  color:var(--body);font-weight:350;text-wrap:pretty}
.n-prose h2 + p{margin-top:12px}
.n-prose p.n-caps{letter-spacing:.012em;line-height:1.8}
.n-prose strong{color:var(--ink);font-weight:400}
.n-prose ul{margin:14px 0 0;padding:0;list-style:none}
.n-prose li{position:relative;margin-top:10px;padding-left:23px;
  font-size:.96875rem;line-height:1.72;color:var(--body);
  font-weight:350;text-wrap:pretty}
.n-prose li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}
.n-prose a.n-inl{color:var(--ink);text-decoration:underline;
  text-decoration-thickness:.5px;text-underline-offset:3px;
  text-decoration-color:var(--underline);transition:text-decoration-color .3s}
/* hover DARKENS the underline — the pale accent made a hovered link
   less visible than an unhovered one */
.n-prose a.n-inl:hover{text-decoration-color:var(--ink)}

/* ---- contact card ---- */
.n-card{margin-top:20px;padding:clamp(17px,2.4vw,22px) clamp(18px,2.6vw,24px);
  border:1px solid var(--rule);background:var(--card);
  font-size:.84375rem;line-height:1.7;color:var(--body);font-weight:350;
  /* One grid for the whole card, so the label column is sized by the
     WIDEST label instead of a guessed em value. A fixed 6.4em box was
     70.4px while "Controller" at .16em tracking paints 93.2px — and
     `flex:0 0 auto` let the text spill out of its box and across the
     value beside it. max-content cannot overflow, and one shared column
     keeps every value on the same left edge.
     Rows align on centre, not baseline: the 44px tap-target link carries
     its baseline ~22px down, which dragged its label out of line. */
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:clamp(18px,2.4vw,28px);
  align-items:center;
  grid-auto-rows:minmax(var(--tap),auto)}
.n-card > div{display:contents}
.n-card b{white-space:nowrap;font-weight:300;font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--micro)}
.n-card a{color:var(--ink);text-decoration:underline;
  text-decoration-thickness:.5px;text-underline-offset:3px;
  text-decoration-color:var(--underline);
  display:inline-flex;align-items:center;min-height:var(--tap);
  transition:text-decoration-color .3s}
.n-card a:hover{text-decoration-color:var(--ink)}

/* ---- overlay footer ---- */
.n-foot{display:flex;align-items:center;flex-wrap:wrap;gap:13px;
  margin-top:clamp(44px,6vw,66px);padding-top:clamp(22px,3vw,28px);
  border-top:1px solid var(--rule)}
.n-foot a{font-weight:300;font-size:.6875rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--micro);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--tap);
  transition:color .3s}
.n-foot a:hover{color:var(--ink)}

@media (max-width:600px){
  .n-meta{letter-spacing:.18em}
  /* the close chip is fixed; keep the measure from sliding under it */
  .n-head{padding-top:96px}
  .n-close{top:16px;right:16px;padding:0 13px;letter-spacing:.2em}
  .n-toc ol{columns:1}
  .n-toc a{font-size:.84375rem}
  /* stack label over value; the shared column collapses to one */
  .n-card{grid-template-columns:minmax(0,1fr);
    grid-auto-rows:auto;column-gap:0}
  .n-card b{margin-top:15px}
  .n-card > div:first-child b{margin-top:0}
  .n-prose h2{gap:11px}
}

/* /privacy is a real document, not a layer: it scrolls the page rather
   than an inset box, and needs no dialog semantics. Everything else —
   type, measure, index, card — is shared with the overlay. */
.notice--page{
  position:static;inset:auto;z-index:auto;
  min-height:100svh;overflow:visible;animation:none}
.notice--page .n-close{
  position:absolute;text-decoration:none;
  font-size:.6875rem;letter-spacing:.26em}
.notice--page .n-close:hover{color:var(--ink)}