/* Club Giraffe · Drawn from Life
   Material: hairline-flat. Black ink + one terracotta wash on oatmeal. Two inks, never three. */
:root {
  /* neutral field: oatmeal, hue ~40deg, chroma low on purpose */
  --paper:  #e6ddcc;  /* page */
  --sheet:  #ece5d7;  /* a lighter sheet laid on the page, hairline edge */
  --raised: #f3eee4;  /* lightest: fields, the sample summary */
  --inset:  #ddd2be;  /* well */
  --ink:    #141210;  /* the one black ink */
  --ink-2:  #4f483e;
  --ink-3:  #6f6556;  /* AA on paper for 14px+ */
  --hair:   color-mix(in srgb, var(--ink) 20%, transparent);
  --hair-2: color-mix(in srgb, var(--ink) 55%, transparent);
  /* the one accent, terracotta: one job, the club's warm hand (candle glow, the strike, the countersign) */
  --tc-700:#8c3f26; --tc-500:#b65a3a; --tc-300:#d69a7f; --tc-200:#e5bba5; --tc-100:#efd8c8;
  --wash: var(--tc-500);
  --wash-blend: multiply;
  --error:#7a3a4c; --error-wash:#efdcdc;
  --r-sheet:4px; --r-control:3px; --r-inner:2px;
  --display:"Cormorant Garamond", "Cormorant", Georgia, serif;
  --text:"Literata", Georgia, serif;
  --ui:"Familjen Grotesk", system-ui, sans-serif;
  --gutter: 64px;
  --ease: cubic-bezier(.3,.1,.2,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper:#1a1815; --sheet:#211e1a; --raised:#29251f; --inset:#141210;
    --ink:#e8dfcd; --ink-2:#c3b8a5; --ink-3:#a19683;
    --tc-700:#e2a084; --tc-500:#c96e4e; --tc-300:#8f4a32; --tc-200:#5e3426; --tc-100:#3a241b;
    --wash-blend: normal;
    --error:#d79aa9; --error-wash:#2e1d22;
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --paper:#1a1815; --sheet:#211e1a; --raised:#29251f; --inset:#141210;
  --ink:#e8dfcd; --ink-2:#c3b8a5; --ink-3:#a19683;
  --tc-700:#e2a084; --tc-500:#c96e4e; --tc-300:#8f4a32; --tc-200:#5e3426; --tc-100:#3a241b;
  --wash-blend: normal;
  --error:#d79aa9; --error-wash:#2e1d22;
  color-scheme: dark;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--paper); -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font:400 17px/1.65 var(--text); -webkit-font-smoothing:antialiased; overflow-x:clip; font-variant-numeric:oldstyle-nums proportional-nums; }
img, svg { display:block; }
main { overflow-x:clip; }
a { color:inherit; }
:focus-visible { outline:none; box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); border-radius:var(--r-inner); }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:16px; top:-60px; background:var(--ink); color:var(--paper); padding:10px 14px; font:500 14px/1 var(--ui); z-index:50; border-radius:var(--r-control); text-decoration:none; }
.skip:focus { top:12px; }

/* ---------- type scale ---------- */
.d1 { font:500 72px/1.03 var(--display); letter-spacing:-.012em; text-wrap:balance; }
.d2 { font:500 48px/1.08 var(--display); letter-spacing:-.008em; text-wrap:balance; }
.d3 { font:500 32px/1.25 var(--display); letter-spacing:0; }
.lead { font:400 20px/1.6 var(--text); }
.ui { font:400 14px/1.45 var(--ui); letter-spacing:.005em; }
.cap { font:400 13px/1.45 var(--ui); letter-spacing:.01em; color:var(--ink-3); font-variant-numeric:lining-nums tabular-nums; }
p + p { margin-top:1em; }

/* ---------- ink artwork: alpha masks filled with the ink token, so drawings work in light and dark ---------- */
.ink { background:var(--ink); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-position:0 0; mask-position:0 0; }

/* ---------- header / nav ---------- */
.top { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px var(--gutter) 0; }
.wordmark { white-space:nowrap; display:inline-flex; align-items:center; gap:10px; font:500 27px/1 var(--display); letter-spacing:-.005em; text-decoration:none; }
.wordmark svg { width:26px; height:23px; color:var(--ink); transform:translateY(-1px); }
symbol path { fill:currentColor; }
symbol path.w { fill:var(--wash); }
.nav { display:flex; gap:30px; align-items:center; font:400 15px/1 var(--text); }
.nav .short { display:none; }
.nav a { text-decoration:none; padding:8px 0; position:relative; }
.nav a[aria-current=page]::after, .nav a:not(.btn):hover::after { content:""; position:absolute; left:-2px; right:-2px; bottom:1px; height:5px; background:var(--ink); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 20 2.2, 55 2.6, 99 1.6 L 99 3.2 C 60 4.4, 25 4.8, 1 5.4 Z'/%3E%3C/svg%3E") 0 0/100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 20 2.2, 55 2.6, 99 1.6 L 99 3.2 C 60 4.4, 25 4.8, 1 5.4 Z'/%3E%3C/svg%3E") 0 0/100% 100%; }
.nav a:not([aria-current]):hover::after { opacity:.45; }
@media (hover:none) { .nav a:not([aria-current]):hover::after { display:none; } }

/* ---------- controls ---------- */
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font:500 15px/1 var(--text); letter-spacing:.005em; padding:17px 28px 18px; min-height:50px; cursor:pointer; text-decoration:none; border:0; transition:background-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease); }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--ink); color:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 4.5, 80 6, 120 4 C 150 2.6, 180 3.4, 197 5.6 C 199.4 16, 198 30, 198.6 44.4 C 170 47.6, 120 45.2, 80 46.6 C 50 47.6, 20 46.2, 2.4 45.4 C 1 34, 1.6 20, 3 9 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 4.5, 80 6, 120 4 C 150 2.6, 180 3.4, 197 5.6 C 199.4 16, 198 30, 198.6 44.4 C 170 47.6, 120 45.2, 80 46.6 C 50 47.6, 20 46.2, 2.4 45.4 C 1 34, 1.6 20, 3 9 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.btn-primary:focus-visible { box-shadow:none; background:var(--tc-700); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.btn-quiet { background:transparent; color:var(--ink); }
@media (hover:hover) { .btn-primary:hover { background:var(--ink-2); } .btn-quiet:hover { background:var(--sheet); } }
.btn[aria-busy=true] { pointer-events:none; }
/* signature: the brushed link (replaces the outlined secondary button) */
.brushlink { font:500 15px/1.3 var(--text); text-decoration:none; padding:12px 0; position:relative; display:inline-block; background:none; border:0; color:var(--ink); cursor:pointer; }
.brushlink::after { content:""; position:absolute; left:-1px; right:-3px; bottom:6px; height:6px; background:var(--wash); opacity:.9; mix-blend-mode:var(--wash-blend); transform-origin:left; transition:transform .22s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2 C 14 3, 40 3.6, 70 2.8 C 92 2.2, 108 1.6, 119 2.6 C 116 4.4, 104 5.2, 86 5.6 C 56 6.4, 26 7, 2 7.2 Z'/%3E%3C/svg%3E") 0 0/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2 C 14 3, 40 3.6, 70 2.8 C 92 2.2, 108 1.6, 119 2.6 C 116 4.4, 104 5.2, 86 5.6 C 56 6.4, 26 7, 2 7.2 Z'/%3E%3C/svg%3E") 0 0/100% 100%; }
@media (hover:hover) { .brushlink:hover::after { transform:scaleX(1.04); } }

/* ---------- motif: the coat cell (every cell a different shape, like every coat) ---------- */
.cell { display:inline-block; width:16px; height:14px; color:var(--ink); flex:none; }

/* ---------- the giraffe: one brushed neck, cropped by the page margin, once per page ---------- */
.neck { position:absolute; pointer-events:none; -webkit-mask-image:var(--neck); mask-image:var(--neck); --neck:url(../img/giraffe-neck.webp); aspect-ratio:2/3; z-index:0; }

/* ---------- footer ---------- */
.foot { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; padding:40px var(--gutter) 44px; border-top:1px solid var(--hair); margin-top:0; }
.foot p { margin:0; }
.foot a { color:var(--ink-2); }

/* ---------- reveal (fades only; reduced motion keeps opacity) ---------- */
.rise { opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rise.in { opacity:1; transform:none; }
.no-js .rise, .moment-off .rise { opacity:1; transform:none; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size:16.5px; }
  .d1 { font-size:44px; line-height:1.04; }
  .d2 { font-size:34px; line-height:1.1; }
  .d3 { font-size:25px; line-height:1.3; }
  .lead { font-size:18px; line-height:1.6; }
  .top { padding-top:16px; flex-wrap:nowrap; gap:14px; }
  .wordmark { font-size:22px; gap:8px; }
  .wordmark svg { width:22px; height:20px; }
  .nav { gap:16px; font-size:15px; }
  .nav .nav-home, .nav .long { display:none; }
  .nav .short { display:inline; }
  .foot { padding:32px var(--gutter) 36px; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { transform:none; transition:opacity .6s linear; }
  .btn, .brushlink::after { transition:none; }
}