/* blacksh33p: shared across pages. Navigation, Say hello panel, footer, and the signed-off touches (T1 T3 T4 T6 T12). */
:root {
  --paper: #FAFAF6;
  --ink: #111110;
  --soft: #6E6E68;
  --rule: #DEDED6;
  --flood: #1E1BFF;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gut: clamp(16px, 3vw, 32px);
}
body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45; }
.mono { font: 400 .75rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; }

/* Type never breaks badly: headings balance their lines, paragraphs avoid a lonely last word */
h1, h2, h3, .lede { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.steps p, .say, .part p:only-of-type, figcaption, .tall-note { text-wrap: balance; } /* short paragraphs: even lines, never one word left alone */

/* T12: selecting text goes blue */
::selection { background: var(--flood); color: #fff; }
:focus-visible { outline: 2px solid var(--flood); outline-offset: 3px; border-radius: 3px; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px var(--gut); color: var(--ink); background: transparent;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease, visibility 0s linear 0s, color .3s ease;
}
/* One piece, no ground and no line: the sheep, the name, the links and Say hello slide and fade out together going down, and back together going up.
   No blend mode: it made Chrome on a Mac smear the header while scrolling. The colours switch on purpose instead. */
.top.away { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease, visibility 0s linear .5s, color .3s ease; }
.top.light { color: #fff; }
html.js:not(.fonts) .top { opacity: 0; } /* first visit: the whole header waits for its fonts and fades in as one piece; after that it's there from the first frame */
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand .mark { display: block; height: 27px; width: auto; flex: none; overflow: visible; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.top [data-wordmark] { font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; text-decoration: none; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.nav a { color: inherit; text-decoration: none; position: relative; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -11px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.hello { background: var(--flood); color: #fff; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; font: 400 .75rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; transition: background .3s, color .3s; }
.top.light .hello { background: #fff; color: var(--flood); }
.nav .slot { width: var(--hello-w, 92px); height: 1px; }

/* T4: links draw their underline */
.draw { position: relative; text-decoration: none; color: inherit; }
.draw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.draw:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* the email opens a new message; a small Copy button sits beside it in the Say hello panel */
.email { color: inherit; text-decoration: none; display: inline-block; }
.copy-btn { background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 11px; color: var(--soft); cursor: pointer; transition: color .25s, border-color .25s; }
.panel .row { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Say hello panel ---------- */
.panel { position: fixed; inset: 0 0 auto 0; z-index: 70; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
  padding: 64px var(--gut) 28px; transform: translateY(-102%); transition: transform .6s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
.panel.open { transform: none; visibility: visible; }
.panel .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: end; }
.panel .half { padding-right: 32px; }
.panel .half + .half { padding: 0 0 0 32px; border-left: 1px solid var(--rule); } /* two matching halves: email, then Instagram */
.panel .half p { margin: 0 0 12px; color: var(--soft); text-wrap: balance; }
.panel h2 { margin: 0 0 10px; font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -.035em; }
.panel .big { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; letter-spacing: -.02em; border-bottom: 2px solid var(--flood); padding-bottom: 2px; color: var(--ink); text-decoration: none; display: inline-block; }
.panel .x { position: absolute; top: 18px; right: var(--gut); background: none; border: 0; cursor: pointer; color: var(--ink); }
/* Gone (display: none) while closed: iOS 26 Safari tints its bars from fixed layers at the screen edges, even invisible ones. It still fades both ways. */
.scrim { position: fixed; inset: 0; z-index: 65; background: rgba(17,17,16,.18); opacity: 0; pointer-events: none; display: none; transition: opacity .4s, display .4s allow-discrete; }
.scrim.on { display: block; opacity: 1; pointer-events: auto; }
@starting-style { .scrim.on { opacity: 0; } }

/* ---------- footer ---------- */
.foot { background: var(--paper); color: var(--ink); padding: 0 var(--gut); }
.f-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 7vw; padding: 9vh 0 40px; border-top: 1px solid var(--ink); }
.f-top .up { margin-left: auto; } /* the sheep keeps to the right */
.f-col { display: grid; gap: 12px; justify-items: start; }
.f-col .f-lead { margin: 0 0 4px; }
/* contact rows, footer and homepage alike: the address large, what it is small beside it */
.reach-row { margin: 0; display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.reach-row .mono { color: var(--soft); }
.f-lead { color: var(--soft); margin: 0 0 14px; }
.f-mail { font: 500 clamp(1.6rem, 1rem + 2.4vw, 3.4rem)/1 var(--sans); letter-spacing: -.04em; color: var(--ink); text-decoration: none; display: inline-block; }
.f-mail .addr { background: linear-gradient(var(--flood), var(--flood)) 0 100% / 0 2px no-repeat; padding-bottom: .08em; transition: background-size .5s cubic-bezier(.3,.7,.2,1); }
.f-mail:focus-visible .addr { background-size: 100% 2px; }
/* the bottom line is always one line: it drops what it can spare as the screen narrows, never wraps */
.f-base { display: flex; align-items: center; gap: 24px; padding: 18px 0 22px; border-top: 1px solid var(--rule); color: var(--soft); white-space: nowrap; }
.foot[data-compact] .f-base { border-top-color: var(--ink); }
.f-links { display: flex; gap: 22px; align-items: center; }
.f-links a { color: var(--ink); }
.f-sign { margin-left: auto; }
.f-end { display: inline-flex; align-items: center; gap: 18px; flex: none; }
.foot .up { width: 30px; height: 39px; cursor: pointer; background: none; border: 0; padding: 0; flex: none; }
.f-base .up { width: 20px; height: 26px; }
.foot .up svg { width: 100%; height: 100%; overflow: visible; }
.foot .up .body { transform-box: fill-box; transform-origin: 50% 100%; }
@media (max-width: 1080px) { /* tablets: the studio line goes; links left, © and the sheep right */
  .f-sign { display: none; }
  .f-end { margin-left: auto; }
}
@media (max-width: 760px) {
  .f-top { padding-top: 7vh; }
  .f-base { gap: 18px; }
  .f-links { gap: 18px; }
  .f-links .extra { display: none; } /* on the homepage the email and Instagram are just above, so the line keeps only the pages */
}

/* T3: words come into focus */
[data-focus] .w { display: inline-block; }
html.js [data-focus] .w { opacity: 0; } /* hidden until its one entrance; shown at once with reduced motion */

/* T6: titles take a pattern on hover */
.fill { position: relative; display: inline-block; }
.fill::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; -webkit-background-clip: text; background-clip: text; clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.3,.7,.2,1); pointer-events: none; }
.fill.g::after { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 6px, transparent 6px 12px), linear-gradient(#FF7AC6, #FF7AC6); }
.fill.s::after { background-image: repeating-linear-gradient(115deg, #FF3B1F 0 7px, #FFB81C 7px 14px); }
.fill.d::after { background-image: radial-gradient(circle at 5px 5px, #111110 2.4px, transparent 2.6px), linear-gradient(#B7F23A, #B7F23A); background-size: 11px 11px, auto; }
.fill:focus-visible::after, .fill.on::after { clip-path: inset(0 0 0 0); } /* .on: on touch screens the pattern sweeps in once as the title arrives */


@media (max-width: 760px) {
  .panel .inner { grid-template-columns: 1fr; }
  .panel .half { padding: 0; }
  .panel .half + .half { padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--rule); }
  .nav a:not(.hello)[aria-current="page"]::before { display: none; }
}
@media (max-width: 420px) { .nav { gap: 12px; } .hello { padding: 8px 11px; } }
.nav a, .nav .hello { white-space: nowrap; } /* menu labels never break onto two lines */
@media (max-width: 460px) { .top [data-wordmark] { display: none; } .brand .mark { height: 30px; } } /* phones: the sheep alone is the logo, so the whole menu fits on one line */
/* Desktop vs phone, decided once for every page:
   hover and cursor effects only where there is a real mouse: (hover: hover) and (pointer: fine).
   Touch screens never get stuck hover states; they get the tap or in-view version instead.
   Layout: phone up to 760px, tablet 761 to 1080px, desktop above. */
@media (hover: hover) and (pointer: fine) {
  .draw:hover::after { transform: scaleX(1); transform-origin: left; }
  .f-mail:hover .addr { background-size: 100% 2px; }
  .fill:hover::after { clip-path: inset(0 0 0 0); }
  .copy-btn:hover { color: var(--ink); border-color: var(--ink); }
  .brand:hover .mark { transform: translateY(-2px) rotate(-6deg); } /* the sheep nods along with the 33 turning */
}
@media (prefers-reduced-motion: reduce) { .panel, .draw::after, .fill::after { transition: none; } }