/* Codificio · flight directions. Shared tokens, the project component and the bird.
   Each direction sets the theme tokens (--ground … --mark) and its own layout; no raw hex outside this block. */
@import url("fonts.css");

:root {
  /* The brand's palette as locked on the design board (12 Oct 2026): gold on black. black is the ground, surface a
     card on it, cream what is read, quiet what comes second, gold the name, the dove and the one thing to press.
     The gold is champagne since 13 Oct 2026 (it was #E3B341; the owner: "i still feel like the color is off", then
     of six golds "okay champagne is good"). It is the flat gold: links, rules, the caret, a button, the tab icon.
     The logo is lit: the dove and the name each run straight down from gold-hi at the top to gold-lo at the foot,
     over a halo of the flat gold (line.css, line.js).
     All three are a shade darker than the board drew them, and a little warmer so that darker is still gold and
     not khaki (they were #E8C877, #F4D88E and #DEA632). The owner, seeing the lit dove on the page: "can we make
     everything a lil shade more darker yellor, cuz the top of the pigeon kinda looks like piss, just a lil darker".
     The top, which was the complaint, is moved the most and the foot the least.
     The tab icon is not the flat gold but a step deeper, #E2B34D, half way down the logo's run, which is what the
     lit logo comes to as a whole: on a browser's tab the flat gold was still pale at 16px (the owner, of the icon
     in the board's champagne: "also the browser thing there is piss"). It is in the icon files, which read no tokens. */
  --black: #13120F; --surface: #1D1B16; --cream: #EFE9DA; --quiet: #A69F8C; --gold: #E2BB60; --gold-hi: #EEC973; --gold-lo: #D79D27;
  /* the palette before it, blue and marble. The board rejected the blue; the line (line.css) uses none of these */
  --marble: #F1EEE7; --paper: #FBF8F0; --white: #FFFFFF;
  --sky: #8FC6F3; --night: #0A1236; --night-2: #141F4F;
  --ink: #1B43C4; --navy: #0E1C52; --dim: #5B6480; --dim-night: #A3ADD0; --dim-sky: #233472;
  --stone: #DAD6CC; --night-line: #2B376E; --sky-line: #6FA9DA;
  --gold-deep: #8A6508;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;

  /* five sizes */
  --t-tag: 14px; --t-body: 17px; --t-row: 24px;
  --t-head: clamp(44px, 8vw, 80px);
  --t-hero: clamp(64px, 20vw, 260px);

  --font-display: "Pirata One", "Times New Roman", serif;
  --font-ui: "Oxanium", system-ui, sans-serif;
  --radius: 6px;
  --pad: var(--s4);
  --tap: 44px;
}
@media (min-width: 720px) { :root { --pad: var(--s7); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--fg); font: 400 var(--t-body)/1.6 var(--font-ui); overflow-x: clip; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* content sits on layer 2; the bird flies on layer 1 (behind) or 3 (in front) */
.wrap { position: relative; z-index: 2; max-width: 1200px; margin-inline: auto; padding-inline: var(--pad); }

.top ul { display: flex; justify-content: flex-end; gap: var(--s5); }
.top a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-tag); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.top a:hover, .top a:active { text-decoration: underline; text-underline-offset: 6px; }

.wm { font: 400 var(--t-hero)/1 var(--font-display); color: var(--mark); letter-spacing: -.01em; white-space: nowrap; }
.slogan { font-size: var(--t-row); font-weight: 600; letter-spacing: .02em; line-height: 1.2; }
.sprig { display: block; width: 120px; height: 40px; color: var(--accent); }
.tag { font-size: var(--t-tag); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h2 { font: 400 var(--t-head)/1.05 var(--font-display); }

/* a project: head (always), frame + more (per direction) */
.pj-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); width: 100%; min-height: 64px; padding: var(--s3) var(--s4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pj-n { font-size: var(--t-tag); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pj-name { font-size: var(--t-row); font-weight: 700; line-height: 1.2; }
.pj-ic { width: var(--s5); height: var(--s5); display: grid; place-items: center; font-size: var(--t-row); line-height: 1; color: var(--accent-text); transition: transform .2s; }
.pj.is-open .pj-ic { transform: rotate(45deg); }
.pj-head:active { opacity: .7; }
.pj-frame { aspect-ratio: 16 / 10; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--radius); font-size: var(--t-body); color: var(--muted); text-align: center; padding: var(--s4); }
.pj-more { padding: 0 var(--s4) var(--s5); max-width: 60ch; }
.pj-go { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; text-underline-offset: 5px; }

.cta { display: inline-flex; align-items: center; min-height: 56px; padding: var(--s3) var(--s6); border-radius: var(--radius); background: var(--accent-fill); color: var(--accent-on); font-size: var(--t-row); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(1px); }

/* the bird: one painting, cut along the shoulder into body and wing so the wing can beat */
.bird { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transform-origin: 46% 71%; will-change: transform; }
.bird.on { opacity: 1; }
.bird i { position: absolute; inset: 0; background: url("dove.png") center / contain no-repeat; }
.bird-body { clip-path: polygon(58.6% 0, 100% 0, 100% 100%, 0 100%, 0 50.8%, 11.7% 50.8%, 29.3% 62.5%, 36.6% 62.5%, 55.2% 46.4%, 58.6% 42%); }
.bird-wing { clip-path: polygon(11.7% 13.7%, 58.6% 13.7%, 58.6% 42%, 55.2% 46.4%, 36.6% 62.5%, 29.3% 62.5%, 11.7% 50.8%); transform-origin: 45.9% 54.4%; }

/* the bird as painted sprites (shared/sprites): one frame shown at a time, see perch.js */
.sbird { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: transform; }
.sbird.on { opacity: 1; }
.sbird i { position: absolute; inset: 0; background: center / contain no-repeat; opacity: 0; transition: opacity .07s; }
.sbird i.show { opacity: 1; transition: none; }     /* the new frame is there at once and the old one fades under it: no two half-birds */
/* it can be hit (perch.js): only this takes the pointer, over the body and the roots of the wings. A drag that
   starts on it is a flick, not a scroll. The feathers it loses, the mark of the blow
   and the branch knocked out of its beak are laid on the page where it was touched. */
.sbird .hit { position: absolute; inset: 14% 0% 10% 18%; border-radius: 50%; pointer-events: auto; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.plume { position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 12px; pointer-events: none; }
.plume svg { display: block; }
.pow { position: absolute; z-index: 3; pointer-events: none; }
.pow svg { display: block; overflow: visible; }
.pow path { fill: none; stroke: var(--dove-2, var(--dim)); stroke-width: 1.5; stroke-linecap: round; }
.loose { position: absolute; z-index: 3; pointer-events: none; }
.loose b { position: absolute; inset: 0; }
.loose b b b { background: center / contain no-repeat; transform-origin: 85% 42%; }
.plume path { stroke: var(--dove-2, var(--dim)); stroke-width: .7; }
.plume-ink { position: absolute; }     /* the feathers' fill, as the bird is painted: shaded at the quill, white along the vane */
.plume-ink stop { stop-color: var(--white); }
.plume-ink stop:first-child { stop-color: var(--dove-1, var(--stone)); }
/* in flight: one body and two painted wing poses, each swung about its shoulder line (see perch.js).
   The flight painting is drawn smaller on its sheet than the other frames, hence the larger box. */
/* in depth (perch.js wraps the frames in .rig): the sheets stand in a small 3D space of the bird's own */
.sbird.d3 { perspective: 320px; }     /* perch.js sets it to three bird-widths */
.sbird .rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.sbird.d3 [data-f="fly"] { transform-style: preserve-3d; }
.sbird [data-f="fly"] { inset: -15%; }
.sbird [data-f="fly"] b { position: absolute; inset: 0; background: center / contain no-repeat; }
.sbird [data-f="fly"] .l-body { background-image: url("sprites/dove-body.png"); }
.sbird [data-f="fly"] .l-up { background-image: url("sprites/dove-wing-up.png"); transform-origin: 45.9% 54.4%; }
.sbird [data-f="fly"] .l-down { background-image: url("sprites/dove-wing-down.png"); transform-origin: 47.8% 58%; }
/* landing: five painted frames on a larger sheet, feet on the same point in each */
.sbird [data-f^="l"] { inset: -26.2%; }
.sbird [data-f="l1"] { background-image: url("sprites/dove-l1.png"); }
.sbird [data-f="l2"] { background-image: url("sprites/dove-l2.png"); }
.sbird [data-f="l3"] { background-image: url("sprites/dove-l3.png"); }
.sbird [data-f="l4"] { background-image: url("sprites/dove-l4.png"); }
.sbird [data-f="l5"] { background-image: url("sprites/dove-l5.png"); }

/* the white dove: the same sprites re-tinted (sprites/dove-*-w.png) */
:root[data-dove="white"] .sbird [data-f="fly"] .l-body { background-image: url("sprites/dove-body-w.png"); }
:root[data-dove="white"] .sbird [data-f="fly"] .l-up { background-image: url("sprites/dove-wing-up-w.png"); }
:root[data-dove="white"] .sbird [data-f="fly"] .l-down { background-image: url("sprites/dove-wing-down-w.png"); }
:root[data-dove="white"] .sbird [data-f="l1"] { background-image: url("sprites/dove-l1-w.png"); }
:root[data-dove="white"] .sbird [data-f="l2"] { background-image: url("sprites/dove-l2-w.png"); }
:root[data-dove="white"] .sbird [data-f="l3"] { background-image: url("sprites/dove-l3-w.png"); }
:root[data-dove="white"] .sbird [data-f="l4"] { background-image: url("sprites/dove-l4-w.png"); }
:root[data-dove="white"] .sbird [data-f="l5"] { background-image: url("sprites/dove-l5-w.png"); }
/* in depth (the page says data-flat when it is not: reduced motion, ?dove3d=0) the landing frames are drawn from parts
   (below), and these whole sheets, half a megabyte, are not fetched */
:root:not([data-flat]) .sbird [data-f^="l"] { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pj-ic { transition: none; }
  .sbird i { transition: none; }
}
/* in depth the landing sheets are drawn from parts (perch.js sets the pictures): the sheet without its branch, the
   feet, the flying sheet's branch (.sprig, which is that sheet at its own size, .853 of this one), and on l5 a head */
.sbird.d3 [data-f^="l"] b, .sbird.d3 [data-f^="l"] span { position: absolute; inset: 0; background: center / contain no-repeat; }
.sbird.d3 [data-f^="l"] b.sprig { inset: auto; width: 85.3%; height: 85.3%; }
:root .sbird.d3.d3 [data-f^="l"] { background-image: none; }