/* ============================================================
   PINCODE — shared design system
   Used by every page (coming-soon.html and all content pages).
   Page-specific styles (hero, field, marquee, mail-club form, any
   per-page overrides) stay inline in that page's own <style> block —
   this file is only what's identical everywhere: palette, type,
   resets, i18n, menu toggle, nav overlay, footer, the editorial
   grid system, and the shared content-page scaffold.
   ============================================================ */

:root{
  /* Official Pincode palette — main light surfaces (off-white / ice-melt
     tint) use --off-white / --ice; --ink is the sole dark text/contrast
     color; --ink-soft / --ink-faint / --line are all that same Tap Shoe
     ink at reduced opacity, so no off-palette grays are introduced;
     --ice-water / --blue-frost are the two secondary/support accents. */
  --off-white:  #F0EFEE; /* Wispy Clouds */
  --ice:        #D3E4F1; /* Ice Melt */
  --ice-water:  #BFD5EB; /* Ice Water — secondary/support */
  --blue-frost: #A7C3E2; /* Blue Frost — secondary/support */
  --ink:        #2A2B2D; /* Tap Shoe */
  --ink-soft:   rgba(42,43,45,0.65);
  --ink-faint:  rgba(42,43,45,0.42);
  --ink-strong: rgba(42,43,45,0.82);
  --ink-on-ice: #2A2B2D; /* Tap Shoe */
  --line:       var(--ice-water);

  --font-display: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* The side gutter every section already uses (.field, .editorial__grid,
     .nav-overlay, etc: clamp(24px,6vw,72px)) — named so anything that
     needs to line up with the page's actual left/right content edge
     (not invent its own) can reference the same value. */
  --page-gutter: clamp(24px, 6vw, 72px);
}

/* Real Neue Haas Grotesk Display Pro files, in ./fonts next to this file.
   The source kit only had TTF (no WOFF2), so these are the same TTFs
   converted to WOFF (zlib-compressed, no shape change) for a smaller
   download, with the original TTF listed after as a fallback format. */
@font-face{
  font-family:'Neue Haas Grotesk Display Pro';
  src:url('fonts/NHaasGroteskDSPro-55Rg.woff') format('woff'),
      url('fonts/NHaasGroteskDSPro-55Rg.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Neue Haas Grotesk Display Pro';
  src:url('fonts/NHaasGroteskDSPro-65Md.woff') format('woff'),
      url('fonts/NHaasGroteskDSPro-65Md.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  margin:0;
  background:var(--off-white);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
h1,h2,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--ice); color:var(--ink); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

/* ============ CURSOR — Pincode's mark ============
   The old cursor:url() data-URI approach is gone — it never rendered
   in real Safari. Replaced by a real DOM element (created and
   positioned by pincode.js on pointermove — see #pincode-cursor
   below) that follows the pointer with no lag, plus these rules to
   hide the native arrow so only the custom mark is visible. Only on
   devices with a real pointer and hover (mouse/trackpad) — touch
   devices are untouched entirely, matched via (hover:hover) and
   (pointer:fine) rather than UA-sniffing. Text inputs/textareas/
   editable fields are excluded so the native text-beam still shows
   there, and pincode.js hides the custom mark over them too. */
@media (hover:hover) and (pointer:fine){
  body, a, button, .menu-toggle, [role="button"]{
    cursor:none;
  }
  input, textarea, [contenteditable], [contenteditable] *{
    cursor:text;
  }
}

/* The follower element itself — created once by pincode.js, only when
   the (hover:hover) and (pointer:fine) check above passes. Same
   chamfered-square-rotated-45° geometry as the old cursor image
   (approved separately), just drawn as inline SVG inside a normal,
   fixed-position, pointer-events:none element instead of a cursor
   image. No stroke/glow/blur, fixed 16px size — never grows or
   changes shape on hover, by design. transform (not top/left) is what
   pincode.js updates every frame, so moving it never triggers layout. */
#pincode-cursor{
  position:fixed;
  top:0;
  left:0;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:opacity .12s var(--ease);
  will-change:transform;
}
#pincode-cursor svg{ display:block; width:100%; height:100%; }

/* ============ i18n ============ */
[data-i18n]{ display:none; }
html[data-lang="en"] [data-i18n="en"]{ display:inline-block; }
html[data-lang="tr"] [data-i18n="tr"]{ display:inline-block; }
li [data-i18n]{ display:none; }
html[data-lang="en"] li [data-i18n="en"]{ display:inline; }
html[data-lang="tr"] li [data-i18n="tr"]{ display:inline; }

/* ============ MENU TOGGLE ============ */
.menu-toggle{
  position:fixed; top:clamp(20px,4vw,32px); right:clamp(20px,4vw,32px);
  z-index:60;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle__lines{ position:relative; width:20px; height:12px; }
.menu-toggle__lines span{
  position:absolute; left:0; right:0;
  height:1px; background:var(--ink);
  transition:transform .45s var(--ease), top .45s var(--ease);
}
.menu-toggle__lines span:first-child{ top:0; }
.menu-toggle__lines span:last-child{ top:11px; }
body.menu-open .menu-toggle__lines span:first-child{ top:5px; transform:rotate(45deg); }
body.menu-open .menu-toggle__lines span:last-child{ top:5px; transform:rotate(-45deg); }

/* ============ EDITORIAL GRID SYSTEM ============
   The "big-left / quiet-right" two-column pattern, shared by every page:
   About and Letters on the homepage, and any similar section on a
   content page. .editorial is the section wrapper; .editorial__grid is
   the two-column layout; .editorial__col--left/--right size and align
   each side; .editorial__kicker / .editorial__meta / .editorial__note /
   .editorial__subhead are the small supporting-text pieces. */
.editorial{
  position:relative;
  z-index:2;
  background:var(--off-white);
}
.editorial__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(32px,6vw,80px);
  padding:clamp(70px,12vh,130px) clamp(24px,6vw,72px) clamp(50px,8vh,90px);
}
.editorial__col p{
  font-size:clamp(0.98rem,1.6vw,1.15rem);
  line-height:1.7;
  color:var(--ink);
}
.editorial__col--left p{ max-width:52ch; }
.editorial__col--right{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.editorial__col--right p{
  font-size:clamp(0.9rem,1.4vw,1rem);
  color:var(--ink-soft);
  max-width:34ch;
}
.editorial__meta{
  margin-top:clamp(20px,3.5vw,32px);
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--ink-faint);
}
.editorial__grid--about-second{
  margin-top:clamp(18px,2.8vw,26px);
}
.editorial__kicker{
  display:block;
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:var(--ink-faint);
  margin-bottom:clamp(14px,2.4vw,22px);
}
.editorial__subhead{
  font-size:clamp(0.98rem,1.6vw,1.15rem);
  line-height:1.7;
  color:var(--ink);
  max-width:52ch;
}
.editorial__subhead + .editorial__subhead{ margin-top:1.4em; }
.editorial__note{
  margin-top:clamp(24px,4vw,36px);
  padding-top:clamp(20px,3.2vw,28px);
  border-top:1px solid var(--line);
  font-size:0.82rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:48ch;
}

/* ® — used only in running body copy, never on a large display wordmark;
   sized and positioned to read as part of "Pincode", not a stray mark.
   Do not change size/position/vertical-align/margin — confirmed. */
.reg{
  font-size:0.62em;
  font-weight:500;
  vertical-align:baseline;
  position:relative;
  top:-0.3em;
  line-height:0;
  margin-left:0.03em;
}

@media (max-width:760px){
  .editorial__grid{ grid-template-columns:1fr; gap:36px; }
}

/* ============ FOOTER ============
   A large static line of words (see .footer-marquee), then the 7-item
   link row (see .footer-links-row), then a quiet standalone copyright
   line. Shared default background is off-white; coming-soon.html
   overrides this to continue its own Mail Club's Ice Melt blue — see
   that page's own <style> block, not here, since every other page's
   footer follows plain off-white content and should stay off-white. */
.site-footer{
  position:relative;
  z-index:2;
  background:var(--off-white);
}

/* A static statement line — not a moving ticker, and nothing sits
   above it (no columns, no rule line): the words are the whole
   composition, the way Bando's "Curiosity. Passion. Talent." is.
   .footer-marquee itself has NO horizontal padding — .footer-marquee__text
   is the thing that's sized and centered, via the same --page-gutter
   every other section's content edge already uses, so its left/right
   edges genuinely line up with the rest of the page (Field's quote
   text, the nav overlay, etc.) instead of a bespoke, only-slightly-
   different padding value. width:calc(...) + margin-inline:auto means
   the left and right gap are the SAME number by construction, not by
   estimating text width and hoping it balances. */
.footer-marquee{
  position:relative;
  z-index:2;
  padding:clamp(40px,9vh,88px) 0 clamp(24px,5vh,48px);
}
.footer-marquee__text{
  width:calc(100% - 2 * var(--page-gutter));
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.3rem, calc(9.6vw - 14px), 10.5rem);
  letter-spacing:-0.015em;
  line-height:0.92;
  color:var(--ink-on-ice);
  text-wrap:balance;
}
/* Regular weight (400, the lightest real weight the type family
   ships) instead of Medium — reads as large-but-refined rather than
   heavy. Single line is the desktop priority.

   text-align:center is what actually guarantees equal left/right gap
   — the earlier version centered the BOX (width:calc(...) + margin:
   auto) but left the TEXT itself flush-left inside that box, so any
   slack between the text's true rendered width and the box's width
   (there's always a little, kept on purpose for safety) landed
   entirely on the right. Centering the text moves that same slack to
   both sides evenly, so left gap = right gap regardless of exactly
   how much slack there is — not dependent on the font-size estimate
   being pixel-perfect.

   The calc(9.6vw - 12px) preferred value (not a plain Nvw) exists
   because the box it fills — width:calc(100% - 2*gutter) above — isn't
   simple vw itself once --page-gutter caps at 72px (~1200px wide):
   past that point box-width grows 1:1 with viewport width, not with
   vw, so a plain vw term either overshoots (overflows the box) or
   undershoots (leaves it looking small) on one side of that cap. Fit
   against the ACTUAL rendered text width (hidden width:auto clone
   measurement, not a character-count guess) at several font-sizes so
   the text fills ~95-97% of its box at every desktop width from 761
   to 1920 — as big as it gets without ever touching the edge. Below
   761px nowrap drops so it can wrap onto a second, balanced line
   instead of shrinking further or risking a clip. */
@media (min-width:761px){
  .footer-marquee__text{ white-space:nowrap; }
}

/* Türkçe karşılığı EN'den belirgin uzun ("Fark Et. Bağlantıyı Gör.
   Yeniden Anlamlandır." vs "Notice. Connect. Recode."), o yüzden
   sadece TR için biraz küçültülmüş bir ölçek + nowrap zorunluluğunu
   kaldırıyoruz (text-wrap:balance zaten 2 satıra düşünce dengeli
   kırıyor) — EN'in kendi tasarımına/boyutuna dokunulmuyor. */
html[data-lang="tr"] .footer-marquee__text{
  font-size:clamp(1.8rem, calc(5.4vw - 8px), 6.1rem);
  white-space:normal;
}

/* ============ FOOTER LINKS ROW ============
   7 links spread across the full width, same baseline, small type.
   It's the LAST content row, so when the privacy bar (fixed, bottom-
   right) is present, it naturally sits on top of this row's rightmost
   items (Social/Contact/Privacy) the same way the made-thought.com
   reference's own cookie bar covers its last footer links — no JS
   needed, just normal z-index stacking. Once the bar is dismissed
   those items are simply visible again; they were in the DOM the
   whole time. */
.footer-links-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px clamp(12px,2.5vw,28px);
  padding:clamp(18px,3vh,26px) var(--page-gutter) 0;
  margin-top:18px;
  position:relative;
  /* Higher than .footer-marquee's z-index:2 — otherwise the Legal
     dropdown (an absolutely-positioned descendant here, opening
     upward into the marquee's own box) would render/hit-test BEHIND
     the marquee, making Privacy Notice/Data Rights unclickable even
     though they're visually in front. */
  z-index:3;
}
.footer-links-row a{
  font-size:0.7rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.footer-links-row a:hover, .footer-links-row a:focus-visible{ color:var(--ink); }

@media (max-width:760px){
  .footer-links-row{ justify-content:flex-start; row-gap:10px; }
}

/* Legal is the one item in the 7-link row that isn't a plain <a> — a
   made-thought.com-style upward dropdown (Privacy Notice/Data Rights/
   Cookie Preferences) instead of a direct link. Toggle styled to match
   the plain <a> siblings exactly so it doesn't stand out in the row. */
.footer-legal{ position:relative; }
.footer-legal__toggle{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  font-family:inherit;
  font-size:0.7rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  white-space:nowrap;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  transition:color .2s var(--ease);
}
.footer-legal__toggle:hover, .footer-legal__toggle:focus-visible{ color:var(--ink); }
.footer-legal.is-open .footer-legal__toggle{ color:var(--ink); }
.footer-legal__arrow{ display:none; font-size:0.85em; }
.footer-legal.is-open .footer-legal__arrow{ display:inline; }

/* Opens UPWARD (bottom:100%) since the footer sits at the bottom of
   the viewport — a downward menu would run off-screen. No box/border/
   background: three quiet stacked lines, same type scale as the row
   it belongs to. */
.footer-legal__menu{
  position:absolute;
  right:0;
  bottom:100%;
  /* Gap above the Legal toggle itself — kept small and exact (not a
     transform hack) so it can't overshoot past the toggle the way a
     translateY nudge did before. The row's own margin-top:15px (see
     .footer-links-row) is what keeps the menu's TOP clear of the
     marquee slogan above; this margin only controls the BOTTOM gap. */
  margin-bottom:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  white-space:nowrap;
}
.footer-legal__menu[hidden]{ display:none; }
.footer-legal__menu a,
.footer-legal__menu button{
  font-family:inherit;
  font-size:0.7rem;
  line-height:1.3;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-align:right;
  transition:color .2s var(--ease);
}
.footer-legal__menu a:hover, .footer-legal__menu a:focus-visible,
.footer-legal__menu button:hover, .footer-legal__menu button:focus-visible{ color:var(--ink); }

/* Legal wraps to its own row near the left gutter on narrow screens
   (.footer-links-row goes flex-start, not space-between, below), so a
   right-anchored dropdown would grow off the left edge of the screen
   — anchor it to the toggle's own left edge and left-align the stack
   instead. Placed after the base rules above so it wins the cascade
   (equal specificity, later source) once the media query is true. */
@media (max-width:760px){
  /* Rows wrap tightly here (only 10px between the Legal row and the
     row above it), not enough clearance for 3 transparent lines of
     text without colliding with whatever sits behind them — so on
     mobile only, the menu gets the same quiet floating-panel treatment
     already used for the privacy bar elsewhere on this page (same
     tokens: tint, blur, radius, shadow), instead of the background-
     free desktop treatment made-thought's own reference uses. */
  .footer-legal__menu{
    right:auto;
    left:0;
    align-items:flex-start;
    background:rgba(240,239,238,0.95);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    padding:10px 14px;
    border-radius:3px;
    box-shadow:0 2px 10px rgba(42,43,45,0.06);
  }
  .footer-legal__menu a,
  .footer-legal__menu button{ text-align:left; }
}

/* A clearly separate utility row underneath the 7 links — not squeezed
   onto their baseline, not visually read as "belonging to" whichever
   link happens to share its left/right edge. A hairline rule + real
   gap (not just a little padding) is what actually breaks that read;
   copyright sits left, the existing EN/TR language toggle sits right,
   sharing one baseline. */
.site-footer__copyright{
  margin:8px var(--page-gutter) 0;
  padding:20px 0 clamp(18px,2.6vh,24px);
  border-top:1px solid rgba(42,43,45,0.08);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.site-footer__copyright p{
  font-size:0.68rem;
  line-height:1.4;
  letter-spacing:0.03em;
  color:var(--ink-faint);
}
.site-footer__lang{
  display:flex;
  gap:5px;
  align-items:baseline;
  font-size:0.68rem;
  letter-spacing:0.03em;
  flex:0 0 auto;
}
.site-footer__lang button{ color:var(--ink-faint); transition:color .3s var(--ease); }
.site-footer__lang button:hover, .site-footer__lang button:focus-visible{ color:var(--ink); }
.site-footer__lang button[aria-current="true"]{ color:var(--ink); }
.site-footer__lang .dot{ opacity:0.5; color:var(--ink-faint); }
.footer-reg{
  font-size:0.62em;
  vertical-align:0.24em;
  margin-left:0.03em;
}

/* ============ NAV OVERLAY ============
   Kinfolk-style editorial menu, grid-based: a quiet Pincode mark top-
   left (.nav-mark), a utility column (publications/objects/practices/
   about/contact/mail club/social/privacy + language) under it, the
   long list of content pillars on the right sharing the same top edge
   as mark+utility, and a small Letters promo pinned bottom-left. Same
   fade-up-with-stagger entrance the site already used. overflow-y:auto
   stays since the content can exceed small viewports. */
.nav-overlay{
  position:fixed; inset:0;
  z-index:50;
  background:var(--off-white);
  opacity:0;
  visibility:hidden;
  overflow-x:hidden;
  overflow-y:auto;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
  display:flex;
  flex-direction:column;
  padding:clamp(96px,18vh,168px) clamp(24px,6vw,80px) clamp(32px,6vh,64px);
}
body.menu-open .nav-overlay{ opacity:1; visibility:visible; }

.nav-overlay__grid{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,0.9fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "mark    util large"
    "letters lang large";
  column-gap:clamp(32px,5vw,96px);
  width:100%;
}

.nav-mark{
  grid-area:mark;
  align-self:start;
  justify-self:start;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--ink);
}

/* Three quiet groups (site pages / social / legal) instead of one long
   flat list — same idea as a Kinfolk-style compact utility column:
   tight within a group, a clear but small break between groups. */
.nav-utility{
  grid-area:util;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.nav-small{ display:flex; flex-direction:column; gap:7px; }
.nav-small a,
.nav-small button{
  font-size:0.78rem;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--ink-soft);
  display:inline-block;
  width:max-content;
  padding-bottom:1px;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
/* Data Rights needs two full <a> tags (different href per language,
   e.g. #rights-en vs #rights-tr — a single link can't carry both), so
   unlike every other nav-small item its data-i18n sits directly on
   the <a> inside an <li>. That trips the site-wide "li [data-i18n]"
   toggle (for hiding/showing whole list items), which has the same
   specificity as .nav-small a above and loses to it on source order —
   both language links were showing at once. Re-assert the toggle with
   enough specificity to win regardless of order. */
.nav-small li a[data-i18n]{ display:none; }
html[data-lang="en"] .nav-small li a[data-i18n="en"]{ display:inline-block; }
html[data-lang="tr"] .nav-small li a[data-i18n="tr"]{ display:inline-block; }

.nav-small a:hover, .nav-small a:focus-visible,
.nav-small button:hover, .nav-small button:focus-visible{
  color:var(--ink); border-color:var(--line);
}
/* Terms of Use has no real page yet — a plain, quiet, non-interactive
   line rather than a broken "#" link. */
.nav-small__inert{
  font-size:0.78rem;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--ink-faint);
  opacity:0.55;
  display:inline-block;
  cursor:default;
}
.nav-small--lang{ grid-area:lang; align-self:start; margin-top:clamp(24px,4vh,36px); }
.nav-lang{ display:flex; gap:6px; align-items:center; }
.nav-lang button{ opacity:0.55; }
.nav-lang button[aria-current="true"]{ opacity:1; color:var(--ink); }
.nav-lang .dot{ opacity:0.4; font-size:0.9rem; }

.nav-letters{
  grid-area:letters;
  align-self:end;
  max-width:28ch;
  padding-top:40px;
}
.nav-letters__kicker{
  display:block;
  font-size:0.66rem;
  letter-spacing:0.16em;
  color:var(--ink-faint);
}
.nav-letters__text{
  margin-top:10px;
  font-size:0.9rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.nav-letters__link{
  display:inline-block;
  margin-top:12px;
  font-size:0.85rem;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--line);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.nav-letters__link:hover, .nav-letters__link:focus-visible{
  color:var(--ink); text-decoration-color:var(--ink);
}

.nav-large{ grid-area:large; align-self:start; display:flex; flex-direction:column; align-items:flex-end; gap:clamp(4px,1.2vw,10px); }
.nav-large a{
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.12;
  color:var(--ink);
  position:relative;
}
.nav-large a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0.06em;
  height:1px; background:var(--ink);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-large a:hover::after, .nav-large a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav-mark, .nav-utility, .nav-small--lang, .nav-letters, .nav-large li{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .nav-mark{ opacity:1; transform:translateY(0); transition-delay:.06s; }
body.menu-open .nav-utility{ opacity:1; transform:translateY(0); transition-delay:.12s; }
body.menu-open .nav-small--lang{ opacity:1; transform:translateY(0); transition-delay:.18s; }
body.menu-open .nav-letters{ opacity:1; transform:translateY(0); transition-delay:.22s; }
body.menu-open .nav-large li{ opacity:1; transform:translateY(0); }
body.menu-open .nav-large li:nth-child(1){ transition-delay:.08s; }
body.menu-open .nav-large li:nth-child(2){ transition-delay:.13s; }
body.menu-open .nav-large li:nth-child(3){ transition-delay:.18s; }
body.menu-open .nav-large li:nth-child(4){ transition-delay:.23s; }
body.menu-open .nav-large li:nth-child(5){ transition-delay:.28s; }
body.menu-open .nav-large li:nth-child(6){ transition-delay:.33s; }
body.menu-open .nav-large li:nth-child(7){ transition-delay:.38s; }

@media (max-width:760px){
  .nav-overlay{ padding:clamp(26px,5vw,34px) 24px 48px; }
  .nav-overlay__grid{
    flex:0 0 auto;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:"mark" "large" "util" "letters" "lang";
    row-gap:clamp(36px,6vh,48px);
  }
  .nav-mark{ font-size:1.5rem; }
  .nav-large{ align-items:flex-start; }
  .nav-large a{ font-size:clamp(1.8rem,8vw,2.4rem); }
  .nav-letters{ align-self:start; padding-top:0; }
  .nav-small--lang{ margin-top:0; }
}

/* ============ CONTENT PAGES (Design / Music / Fashion / Archive /
   Publications / Objects / Practices) ============
   Shared scaffold: a quiet page header (back link, kicker, title, short
   intro) followed by either a content-grid (image-led work) or a plain
   content-placeholder note for sections not populated yet. No cards,
   no shadows, no e-commerce grid — flat tinted rectangles standing in
   for images until real assets are added. */
.page{
  min-height:100vh;
  background:var(--off-white);
  padding-bottom:clamp(60px,10vh,100px);
}
.page-header{
  padding:clamp(120px,18vh,180px) clamp(24px,6vw,72px) clamp(50px,8vh,90px);
  max-width:900px;
}
.page-header__back{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.1em;
  color:var(--ink-faint);
  margin-bottom:clamp(24px,4vw,36px);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.page-header__back:hover, .page-header__back:focus-visible{ color:var(--ink); border-color:var(--line); }
.page-header__kicker{
  display:block;
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:var(--ink-faint);
  margin-bottom:clamp(14px,2.4vw,22px);
}
.page-header__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.page-header__intro{
  margin-top:clamp(18px,2.8vw,26px);
  max-width:56ch;
  font-size:clamp(0.98rem,1.6vw,1.15rem);
  line-height:1.7;
  color:var(--ink-soft);
}

.content-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,44px);
  padding:0 clamp(24px,6vw,72px);
}
.content-card{
  display:block;
  transition:transform .4s var(--ease);
}
.content-card:hover,
.content-card:focus-visible{
  transform:translateY(-6px);
}
/* aspect-ratio + overflow:hidden on the wrapper is the crop frame;
   background is only a placeholder color, visible until/unless a real
   <img> is placed inside (that img gets its own rule below). Kept as a
   plain div in pages that don't have real cover art yet. */
.content-card__media{
  aspect-ratio:4/5;
  background:var(--ice);
  overflow:hidden;
}
.content-card__media.content-card--tint2{ background:var(--ice-water); }
.content-card__media.content-card--tint3{ background:var(--blue-frost); }
.content-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s var(--ease);
}
.content-card:hover .content-card__media img,
.content-card:focus-visible .content-card__media img{
  transform:scale(1.03);
}
.content-card__caption{
  margin-top:14px;
  font-size:0.86rem;
  line-height:1.5;
  color:var(--ink);
}
.content-card__meta{
  display:block;
  margin-top:4px;
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:var(--ink-faint);
}

.content-placeholder{
  padding:clamp(40px,7vh,70px) clamp(24px,6vw,72px) clamp(60px,10vh,100px);
  max-width:560px;
  font-size:clamp(0.92rem,1.5vw,1rem);
  line-height:1.7;
  color:var(--ink-soft);
}
/* A short, quiet second line under a .content-placeholder paragraph
   (e.g. "the first pieces will be here soon") — same small/faint scale
   as .content-card__meta, not the paragraph's own body-copy size. */
.content-note{
  margin-top:clamp(12px,2vw,18px);
  font-size:0.78rem;
  color:var(--ink-faint);
}

@media (max-width:900px){
  .content-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .content-grid{ grid-template-columns:1fr; }
}

/* ============ PRIVACY BAR ============
   A thin, single-line strip modeled on a made-thought.com-style info
   bar — NOT a static card: the sentence on the left is a continuous
   left-moving ticker (own viewport, fixed 2-item track, seamless
   loop), and three small fixed actions (Privacy / Rights / Close) sit
   on the right and never move. Pincode sets no tracking/analytics
   cookies (see privacy.html §2), so those three replace a real
   cookie-consent banner's Settings/Reject/Accept.

   Lives INSIDE .footer-links-row (not pinned to the viewport) — it
   only exists within the footer's own box, positioned absolute
   against that row so it sits over Social/Contact/Legal exactly like
   before, but scrolls away with the page instead of following it. */
.privacy-bar{
  position:absolute;
  /* right:0 here is relative to .footer-links-row's PADDING edge,
     which for an absolutely-positioned child is the row's full
     border-box — i.e. the same as the viewport edge, ignoring the
     row's own right padding entirely. That's what was pinning the
     bar flush to the screen's right edge. Using the row's own
     --page-gutter here instead makes the bar sit inset exactly like
     the rest of the footer's content edge (made-thought reference:
     small, clear gutter, never flush to the edge). */
  right:var(--page-gutter);
  bottom:-9px;
  z-index:40;
  display:flex;
  align-items:stretch;
  height:36px;
  /* +26px over the previous 452px, extended purely leftward (right
     stays pinned via the right:var(--page-gutter) above) so Social's
     "S" sits fully under the bar instead of peeking past its left
     edge. */
  width:min(478px, calc(100vw - 24px - var(--page-gutter)));
  background:rgba(240,239,238,0.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(42,43,45,0.1);
  border-radius:3px;
  box-shadow:0 2px 10px rgba(42,43,45,0.06);
  overflow:hidden;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
body.menu-open .privacy-bar{ opacity:0; visibility:hidden; }
.privacy-bar.is-dismissed{ opacity:0; transform:translateY(8px); pointer-events:none; }

/* The moving part: a fixed-width viewport, overflow hidden, masked
   soft at both edges so the loop never shows a hard clip — especially
   important on the right, where text fades out just before the
   buttons instead of visibly slicing off. */
.privacy-bar__ticker{
  position:relative;
  flex:1 1 0%;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.privacy-bar__ticker-track{
  position:absolute;
  top:0; left:0;
  height:100%;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  animation:privacyBarTicker 29s linear infinite;
  will-change:transform;
}
body.menu-open .privacy-bar__ticker-track{ animation-play-state:paused; }
.privacy-bar__ticker-item{
  display:inline-block;
  padding:0 clamp(20px,4vw,40px) 0 16px;
  font-size:0.7rem;
  color:var(--ink-soft);
}
@keyframes privacyBarTicker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Fixed, compact, plain-rectangular — no pill, no padding-heavy SaaS
   button feel. Equal height with the bar, one thin divider between
   each so they read as a single connected control. */
.privacy-bar__actions{
  display:flex;
  align-items:stretch;
  flex:0 0 auto;
}
.privacy-bar__action{
  display:flex;
  align-items:center;
  padding:0 12px;
  font-size:0.68rem;
  letter-spacing:0.01em;
  color:var(--ink-soft);
  border-left:1px solid rgba(42,43,45,0.1);
  white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.privacy-bar__action:hover, .privacy-bar__action:focus-visible{
  color:var(--ink);
  background:rgba(42,43,45,0.06);
}
.privacy-bar__accept{ color:var(--ink); }

@media (max-width:640px){
  /* No left/right override needed here — the base rule's
     right:var(--page-gutter) plus its width formula (which already
     subtracts --page-gutter) gives a matching, symmetric inset on
     both sides at every width, mobile included. The old left:0;right:0
     here pinned the bar flush to the screen's LEFT edge instead
     (over-constrained left+width+right drops `right` in LTR), which
     is the same "flush to the edge" bug the desktop fix corrected. */
  .privacy-bar__ticker-item{ padding:0 clamp(16px,6vw,28px) 0 12px; }
  .privacy-bar__action{ padding:0 9px; font-size:0.64rem; }
}