/* ═══════════════════════════════════════════════════════════════════════════
   CARLO SCHEMBRI — core
   Two materials: ink and paper. One serif in three voices, one grotesk.
   No gradients, no bronze, no atmosphere layers. The plates carry the colour.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-400-normal.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: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  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: 'Archivo';
  font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin-wdth-italic.woff2) format('woff2-variations');
  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: 'Archivo';
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Lucky Sunday — Hues of Harmony. Each hue is a pair: the surface and its lighter tone
     (used only for hairlines, hover fills and decorative numerals — never body text). */
  --ink:        #000000;   /* the stage */
  --ink-2:      #0c0c0b;
  --paper:      #c9c2b0;   /* bone */
  --paper-2:    #b1a58b;   /* bone, lighter tone */
  --brass:      #402919;
  --brass-2:    #775f3d;
  --oxblood:    #351111;
  --oxblood-2:  #512c26;
  --green:      #112117;
  --green-2:    #324f39;
  --grey:       #4a453b;   /* muted text on bone (5.4:1) */
  --grey-2:     #9d9584;   /* muted text on dark surfaces (>= 4.6:1) */

  /* material-relative colours: set per surface */
  --fg:         var(--ink);
  --fg-muted:   var(--grey);
  --bg:         var(--paper);
  --line:       rgba(0, 0, 0, 0.14);
  --line-strong:rgba(0, 0, 0, 0.5);

  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* display scale */
  --d0: clamp(72px, 12.5vw, 200px);   /* one word */
  --d1: clamp(56px, 9vw, 140px);      /* headline */
  --d2: clamp(40px, 5.6vw, 84px);     /* section title */
  --d3: clamp(28px, 3.2vw, 46px);     /* sub */
  --lead: 17px;
  --body: 14.5px;
  --label: 11px;

  --gutter: clamp(20px, 4vw, 64px);
  --nav-h: 72px;

  --ease-out:  cubic-bezier(0.29, 0.52, 0.5, 1);   /* Sobha reveal */
  --ease-io:   cubic-bezier(0.7, 0, 0.3, 1);       /* Sobha wipe */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.4s;
  --t-mid:  0.9s;
  --t-slow: 1.4s;
}

/* Surfaces: any element declares its material. Dark rooms share bone text. */
.on-ink, [data-material="ink"],
[data-material="green"], [data-material="brass"], [data-material="oxblood"] {
  --fg: var(--paper); --fg-muted: var(--grey-2); --bg: var(--ink); --accent: var(--paper-2);
  --line: rgba(201, 194, 176, 0.18); --line-strong: rgba(201, 194, 176, 0.55);
  background: var(--bg); color: var(--fg);
}
[data-material="green"]   { --bg: var(--green);   --accent: var(--green-2);   --line: rgba(201, 194, 176, 0.16); }
[data-material="brass"]   { --bg: var(--brass);   --accent: var(--brass-2);   --line: rgba(201, 194, 176, 0.2); }
[data-material="oxblood"] { --bg: var(--oxblood); --accent: var(--oxblood-2); --line: rgba(201, 194, 176, 0.18); }
.on-paper, [data-material="paper"] {
  --fg: var(--ink); --fg-muted: var(--grey); --bg: var(--paper); --accent: var(--paper-2);
  --line: rgba(0, 0, 0, 0.16); --line-strong: rgba(0, 0, 0, 0.55);
  background: var(--bg); color: var(--fg);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--body);
  font-stretch: 96%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
.on-ink ::selection { background: var(--paper); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ── Type voices ─────────────────────────────────────────────────────── */
.serif    { font-family: var(--serif); font-weight: 400; }
.display  { font-family: var(--serif); font-weight: 400; line-height: 0.92; letter-spacing: -0.015em; }
.display em { font-style: italic; letter-spacing: -0.01em; }
.caps     { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; }
.label {
  font-family: var(--sans); font-size: var(--label); font-weight: 500; font-stretch: 100%;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3;
}
.label--muted { color: var(--fg-muted); }
.lead   { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); line-height: 1.25; }
.body   { font-size: var(--body); line-height: 1.6; }
.body p + p { margin-top: 1.1em; }
.muted  { color: var(--fg-muted); }
.num    { font-family: var(--serif); font-variant-numeric: lining-nums; }

/* Fine rule link — the only CTA style on the site */
.rule-link {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--sans); font-size: var(--label); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  padding: 14px 0; position: relative; color: var(--fg);
}
.rule-link::before {
  content: ''; width: 36px; height: 1px; background: currentColor;
  transition: width var(--t-mid) var(--ease-out);
}
.rule-link:hover::before, .rule-link:focus-visible::before { width: 56px; }
.rule-link span { transition: transform var(--t-mid) var(--ease-out); }
.rule-link:hover span { transform: translateX(4px); }
.rule-link sup { font-size: 9px; letter-spacing: 0; vertical-align: top; margin-left: -8px; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); }
.hr { height: 1px; background: var(--line); border: 0; }

/* ── Navigation: fixed, blends with whatever it sits over ─────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 24px;
  padding: 0 var(--gutter);
  color: var(--paper);
  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
  pointer-events: none;
  transition: transform var(--t-mid) var(--ease-out), color .5s var(--ease-out);
}
.nav > * { pointer-events: auto; }
.nav.is-hidden { transform: translateY(-100%); }
.nav[data-tone="dark"] { color: var(--ink); }
.nav a, .nav button { color: inherit; }
.nav-brand { display: block; width: 132px; color: inherit; justify-self: start; }
.nav-brand svg { width: 100%; height: auto; display: block; overflow: visible; }
.nav-right { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; }
.nav-stack { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; }
.nav-stack button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.nav-time { margin: 0; display: grid; }
.nav-clock { font-variant-numeric: tabular-nums; }
.nav-clock i { font-style: normal; animation: navblink 2s steps(1) infinite; }
@keyframes navblink { 50% { opacity: .15 } }
.nav-ring { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; overflow: hidden;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out); }
.nav-ring-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform .5s var(--ease-soft), opacity .3s; }
.nav-ring-txt { position: absolute; font-size: 9px; letter-spacing: .12em; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-soft); }
.nav-ring:hover .nav-ring-dot, .nav-ring:focus-visible .nav-ring-dot { transform: scale(0); opacity: 0; }
.nav-ring:hover .nav-ring-txt, .nav-ring:focus-visible .nav-ring-txt { opacity: 1; transform: none; }

/* the rolling label: the word slides up and its twin rolls in from below */
.roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.roll > * { grid-area: 1 / 1; display: block; transition: transform .6s var(--ease-soft); }
.roll > * + * { transform: translateY(105%); }
a:hover > .roll > :first-child, button.roll:hover > :first-child, a.roll:hover > :first-child, a:focus-visible > .roll > :first-child, .roll:focus-visible > :first-child { transform: translateY(-105%); }
a:hover > .roll > * + *, button.roll:hover > * + *, a.roll:hover > * + *, a:focus-visible > .roll > * + *, .roll:focus-visible > * + * { transform: none; }
/* entrance: every label rises out of its line, the signature writes itself */
.nav.is-intro .roll > :first-child { transform: translateY(105%); }
.nav.is-intro .nav-ring { transform: scale(.4); opacity: 0; }
.nav.is-in .roll > :first-child { transition: transform 1.1s var(--ease-soft) calc(var(--i, 0) * 70ms); }
.nav .nav-ring { transition: transform 1.1s var(--ease-soft) .45s, opacity .8s var(--ease-out) .45s, background-color .5s, color .5s; }
.nav.is-intro .nav-brand svg { opacity: 0; }

.nav-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: var(--label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1; padding: 12px 0;
}
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-right { grid-template-columns: 1fr auto; justify-items: end; }
  .nav-right .nav-stack { grid-column: 1; justify-self: end; justify-items: end; }
  .nav-time, .nav-ring { display: none; }
  .nav-brand { width: 108px; }
}

/* ── Menu: full ink screen ───────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 950; background: var(--ink); color: var(--paper);
  display: grid; grid-template-rows: var(--nav-h) 1fr auto;
  padding: 0 var(--gutter) 36px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--t-slow) var(--ease-io), visibility 0s linear var(--t-slow);
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--t-slow) var(--ease-io), visibility 0s; }
.menu-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu-close { justify-self: start; }
.nav-btn .x { position: relative; width: 22px; height: 22px; display: block; }
.nav-btn .x::before, .nav-btn .x::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; }
.nav-btn .x::before { transform: rotate(45deg); } .nav-btn .x::after { transform: rotate(-45deg); }
.menu-body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding-bottom: 8vh; }
.menu-links a {
  display: block; font-family: var(--serif); font-size: clamp(44px, 8vw, 112px); line-height: 0.95; letter-spacing: -0.02em;
  padding: 0.04em 0; color: var(--paper);
  opacity: 0; transform: translateY(0.5em);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), color var(--t-fast);
}
.menu.is-open .menu-links a { opacity: 1; transform: none; }
.menu.is-open .menu-links a:nth-child(1) { transition-delay: .35s } .menu.is-open .menu-links a:nth-child(2) { transition-delay: .42s }
.menu.is-open .menu-links a:nth-child(3) { transition-delay: .49s } .menu.is-open .menu-links a:nth-child(4) { transition-delay: .56s }
.menu.is-open .menu-links a:nth-child(5) { transition-delay: .63s } .menu.is-open .menu-links a:nth-child(6) { transition-delay: .70s }
.menu-links a sup { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; vertical-align: top; margin-left: .3em; top: .6em; position: relative; color: var(--grey-2); }
.menu-links a:hover { color: var(--grey-2); }
.menu-aside { display: grid; gap: 22px; text-align: right; opacity: 0; transition: opacity var(--t-mid) var(--ease-out) .7s; }
.menu.is-open .menu-aside { opacity: 1; }
.menu-aside a:hover { color: var(--grey-2); }
.menu-foot { display: flex; justify-content: space-between; color: var(--grey-2); }
@media (max-width: 900px) { .menu-body { grid-template-columns: 1fr; } .menu-aside { text-align: left; } }

/* ── Preloader ───────────────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
}
.loader-sig { width: min(62vw, 560px); color: var(--paper); will-change: transform; }
.loader-sig svg { width: 100%; height: auto; display: block; overflow: visible; }
/* the loader steps aside and the signature flies up into the top bar */
.loader.is-flying { background: transparent; transition: background-color 1s var(--ease-io) .1s; }
.loader.is-flying .loader-count, .loader.is-flying .loader-meta { opacity: 0; transition: opacity .35s; }
.nav.brand-wait .nav-brand svg { opacity: 0 !important; }
.loader-count {
  position: absolute; left: var(--gutter); bottom: 32px;
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.04em; color: var(--grey-2);
  font-variant-numeric: tabular-nums;
}
.loader-meta { position: absolute; right: var(--gutter); bottom: 34px; color: var(--grey-2); }
.loader.is-done { transform: translateY(-100%); transition: transform var(--t-slow) var(--ease-io); }
.loader.is-done .loader-count, .loader.is-done .loader-meta { opacity: 0; transition: opacity .3s; }
html.is-loading { overflow: hidden; }
html.is-loading body { overflow: hidden; height: 100vh; }
html.loaded .loader { pointer-events: none; }

/* Signature inline SVG */
.sig { color: currentColor; }
.sig svg { width: 100%; height: auto; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { position: relative; padding: clamp(56px, 7vw, 96px) var(--gutter) 28px; overflow: hidden; }
.foot-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.foot-col { grid-column: span 3; display: grid; align-content: start; gap: 10px; }
.foot-col .label { margin-bottom: 8px; color: var(--grey-2); }
.foot-col a { font-family: var(--serif); font-size: 20px; line-height: 1.1; width: fit-content; }
.foot-col a:hover { color: var(--grey-2); }
.foot-bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 96px); color: var(--grey-2); }
.foot-bottom em { font-style: italic; font-family: var(--serif); font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) { .foot-col { grid-column: span 6; } .foot-col:nth-child(3) { grid-column: span 12; } }

/* ── Reveal primitives (driven by core.js) ───────────────────────────── */
.mask { overflow: hidden; }
.mask > * { display: block; }
[data-reveal] { opacity: 0; }
[data-reveal].is-in { opacity: 1; }
.unmask { overflow: hidden; position: relative; }
.unmask > img, .unmask > video, .unmask > picture { transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.unmask.is-in > img, .unmask.is-in > video, .unmask.is-in > picture { transform: scale(1); }
.unmask::after {
  content: ''; position: absolute; inset: 0; background: var(--bg);
  transform-origin: bottom; transition: transform 1.4s var(--ease-io);
}
.unmask.is-in::after { transform: scaleY(0); }
.split .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.split .line > span { display: block; }

/* Toast (shop coming soon) */
.toast {
  position: fixed; left: 50%; bottom: 36px; z-index: 990; transform: translate(-50%, 12px);
  display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px;
  background: var(--paper); color: var(--ink); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .rule { width: 22px; height: 1px; background: currentColor; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; }
  .unmask::after { display: none; }
  .unmask > img, .unmask > video { transform: none; }
}


/* ── Curtain (page transitions) ──────────────────────────────────────── */
.curtain { position: fixed; inset: 0; z-index: 1200; pointer-events: none; display: grid; place-items: center;
  transform: translateY(100%); transition: transform .8s var(--ease-io); }
.curtain.is-cover { transform: translateY(0); pointer-events: auto; }
.curtain.is-leaving { transform: translateY(-100%); }
.curtain.no-anim { transition: none; }
.curtain-sig { width: min(34vw, 240px); opacity: 0; transition: opacity .4s var(--ease-out) .25s; }
.curtain.is-cover .curtain-sig { opacity: .9; }
.curtain.is-leaving .curtain-sig { opacity: 0; transition-delay: 0s; }

/* ── Cursor ──────────────────────────────────────────────────────────── */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .desk-hs polygon { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 1300; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor-on .cur-dot, .cursor-on .cur-ring { opacity: 1; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--paper); mix-blend-mode: difference; }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cur-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--paper); mix-blend-mode: difference;
  transition: transform .45s var(--ease-soft), background .3s, border-color .3s; }
.cur-ring.is-link::before { transform: scale(1.6); }
.cur-ring.is-label::before { transform: scale(2.3); background: var(--paper); mix-blend-mode: normal; border-color: var(--paper); }
.cur-ring.is-down::before { transform: scale(.8); }
.cur-txt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cur-ring.is-label .cur-txt { opacity: 1; }

/* ── Skip link + information notice ─────────────────────────────────── */
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--paper); color: var(--ink); padding: 12px 16px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; transition: top .2s; }
.skip:focus { top: 12px; outline: 1px solid var(--ink); outline-offset: 2px; }
.notice { position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 120; width: min(380px, calc(100vw - 24px)); background: var(--paper); color: var(--ink); border: 1px solid rgba(0,0,0,.2); padding: 18px 20px; display: grid; gap: 14px; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); pointer-events: none; }
.notice.is-in { opacity: 1; transform: none; pointer-events: auto; }
.notice p { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0; }
.notice-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.notice-actions a, .notice-actions button { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.notice-actions a { border-bottom: 1px solid rgba(0,0,0,.35); padding-bottom: 2px; }
.notice-actions button { border: 1px solid var(--ink); padding: 10px 14px; background: transparent; transition: background .3s, color .3s; }
.notice-actions button:hover { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }