/* ==========================================================================
   NateOS theme — project page only

   The page wears the app's own design system, the way /work/poppycal/ wears
   Poppycal's. Loaded after styles.css and only by /work/nateos/, so the other
   four pages are untouched by construction.

   READ THIS BEFORE EDITING THE TOKENS.
   The base sheet names its tokens for a dark theme: --ink is the page and
   --bone is the type sitting on it. That relationship still holds here. The two
   just swap lightness, so --ink becomes the grey surface and --bone becomes
   near-black type on it. Read them as "page" and "type", never as "dark" and
   "light", and every rule in styles.css keeps working with no edits.

   THE ONE RULE THE WHOLE LOOK RESTS ON.
   NateOS is soft UI, and it works because the page and the controls are the
   same colour. Depth is light falling across one continuous surface, not cards
   stacked on a background. So --ink and --ink-2 are the same #eef0f3 on
   purpose; that is not a mistake to tidy up. Three things break it: a white
   background anywhere, a border used as decoration, and a drop shadow with a
   single stop. The highlight has to be brighter than the page, which is why the
   page can never be white.

   CONTRAST IS THE REASON THIS IS NOT A STRAIGHT TOKEN COPY.
   NateOS's own ramp has --faint #a2aab6, which measures 2.05:1 on this surface
   and cannot carry text. There is no lighter grey that clears 4.5 either: the
   first passing value on that hue is #636d7e, which is the muted grey already.
   So --faint is not mapped to any text on this page. Everything a person reads
   is #3d434c (8.74:1), #545c69 (5.91:1) or #636b77 (4.72:1), and the accent
   #54688f carries links at 4.90:1. Re-run that audit after any colour change.

   NO WEBFONT. The app never loads one, and this page doesn't either, so the
   Google Fonts <link> is absent from the markup rather than overridden here.
   The system stack is the real design decision, not a fallback.
   ========================================================================== */

.nos {
  /* surface. --ink and --ink-2 are deliberately identical; see above. */
  --ink:        #eef0f3;   /* the page AND every control on it */
  --ink-2:      #eef0f3;
  --ink-3:      #f2f4f7;   /* only where a panel must read a shade up */

  /* type, every step measured against the surface */
  --bone:       #3d434c;   /* 8.74:1 */
  --bone-dim:   #545c69;   /* 5.91:1 */
  --bone-faint: #636b77;   /* 4.72:1 — the app's --muted, doing the work its
                              --faint cannot */

  /* one accent for the whole page. A warm accent on a cool grey surface reads
     as a stain, which is why the app's other branch accents stay out of here. */
  --amber:      #54688f;   /* 4.90:1 */
  --amber-soft: #42537a;   /* 6.69:1. On light, hover goes down in lightness. */

  --rule:       #dde2e9;   /* the app's --line */

  --sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
           Helvetica, Arial, sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
           Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* the soft-UI light, always from the top-left: negative offsets are white,
     positive offsets are grey. Never flipped for one component. */
  --nos-light: #ffffff;
  --nos-dark:  #c6ccd6;

  --nos-lift-sm: -3px -3px 6px var(--nos-light), 3px 3px 6px var(--nos-dark);
  --nos-sink-sm: inset -2px -2px 4px var(--nos-light), inset 2px 2px 4px var(--nos-dark);
  --nos-sink:    inset -3px -3px 7px var(--nos-light), inset 3px 3px 7px var(--nos-dark);

  /* Two stops a side, for anything bigger than about 200px across. A single
     shadow has a single falloff, so its outer edge terminates somewhere you can
     see it: on a rounded corner the light crescent is widest along the 45°
     diagonal and narrows to a hard point coming round. A tight near-opaque stop
     under a wide faint one approximates a smooth falloff and the terminator
     stops being a shape. */
  --nos-raise:
    -3px -3px  7px rgba(255, 255, 255, .95),
    -9px -9px 22px rgba(255, 255, 255, .55),
     3px  3px  7px rgba(198, 204, 214, .48),
     9px  9px 22px rgba(198, 204, 214, .34);
  --nos-inset:
    inset  2px  2px 5px rgba(198, 204, 214, .55),
    inset -2px -2px 5px rgba(255, 255, 255, .9);

  --nos-r-ctl:   10px;
  --nos-r-panel: 18px;
}

/* Fraunces' axes are meaningless to the system stack. Clear them everywhere the
   base sheet sets them, so the browser is never asked to resolve SOFT, WONK or
   opsz against a font that has no such thing. */
.nos h2, .nos h3, .nos .home-h1, .nos .topbar-mark {
  font-variation-settings: normal;
}

/* The grain is a dark-page device. Over a soft-UI surface it is sandpaper: the
   whole illusion is one smooth continuous plane catching light. */
.nos .grain { display: none; }

.nos body, body.nos { background: var(--ink); }

/* --- type ---------------------------------------------------------------- */
/* 650 is heavier than semibold and lighter than bold. It is on every heading
   and tab label in NateOS and is part of the fingerprint. So is 550 on tabs. */
.nos .home-h1 {
  font-weight: 650;
  font-size: clamp(2.1rem, 1.5rem + 2.9vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.022em;
}
.nos h2 {
  font-weight: 650;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -.014em;
}

/* NateOS has no monospace chrome. Mono is for tabular figures only, and there
   are none on this page, so every label that the base sheet sets in mono comes
   back to the system sans at the app's own tracking. */
.nos .mono,
.nos .btn,
.nos .topbar-links a,
.nos .topbar-name {
  font-family: var(--sans);
}
.nos .mono { font-weight: 600; letter-spacing: .14em; }

.nos .lede { color: var(--bone-dim); }
.nos .big  { font-size: 1.14em; }
.nos .tag  { color: var(--bone-dim); }

/* --- buttons and links --------------------------------------------------- */
/* The filled button is the only filled element in a NateOS screen, one per
   view. It keeps the accent; everything else on the page is the surface. */
.nos .btn {
  color: #fff;                    /* 5.59:1 on the accent */
  background: var(--amber);
  border-radius: var(--nos-r-ctl);
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: var(--nos-lift-sm);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nos .btn:hover { background: var(--amber-soft); transform: translateY(-1px); }
/* Press inverts the geometry so the control sinks into the page. This is the
   single most recognisable NateOS interaction and it is worth keeping on a
   page that is otherwise only prose and pictures. */
.nos .btn:active { box-shadow: var(--nos-sink-sm); transform: translateY(0); }

/* Links are accent-coloured and underline on hover. The base sheet's standing
   bottom border is a border used as decoration, which the system does not do. */
.nos .link-plain,
.nos .crumb {
  color: var(--amber);
  border-bottom: 0;
  padding-bottom: 0;
}
.nos .link-plain:hover,
.nos .crumb:hover {
  color: var(--amber-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* --- section rhythm ------------------------------------------------------ */
.nos .daymark { color: var(--bone-faint); font-weight: 600; letter-spacing: .14em; }
.nos .daymark::after {
  background: linear-gradient(90deg, var(--rule), transparent);
}

/* --- images -------------------------------------------------------------- */
/* A screenshot sits in the surface rather than floating on it. Raised is the
   default: the shot is an object resting on the page. */
.nos .shot-frame {
  background: var(--ink);
  border: 0;
  border-radius: var(--nos-r-panel);
  box-shadow: var(--nos-raise);
}
.nos .wide-shot { padding: clamp(.55rem, 1.2vw, .85rem); padding-bottom: 0; }
.nos .wide-shot img { border-radius: 11px; }

/* Sunk, for the Library. Those captures are dark, and a dark rectangle with a
   white outer highlight around it reads as a hole punched in the page. Set into
   a well it reads as a screen recessed into the surface, which is what it is. */
.nos .shot-sunk {
  box-shadow: var(--nos-sink);
  padding: clamp(.7rem, 1.5vw, 1.05rem);
  padding-bottom: 0;
}

.nos .wide-shot figcaption {
  color: var(--bone-faint);
  font-size: .78rem;
  line-height: 1.55;
  letter-spacing: 0;
  padding-top: .95rem;
}

/* The stand-in-data disclosure. Sunk rather than boxed, so it reads as a note
   pressed into the page instead of a warning laid on top of it. */
.nos .datanote {
  margin-top: 1.6rem;
  padding: .85rem 1.1rem;
  border-radius: var(--nos-r-ctl);
  box-shadow: var(--nos-inset);
  color: var(--bone-faint);
  font-size: .82rem;
  line-height: 1.6;
  max-width: 62ch;
}

.nos .also { color: var(--bone-dim); }

/* --- footer -------------------------------------------------------------- */
/* Same surface as the page, because everything is. The hairline is the app's
   own groove, which is the one border the system keeps. */
.nos .foot { background: var(--ink); border-top: 1px solid var(--rule); }
.nos .foot-links a { color: var(--bone-dim); font-weight: 600; }
.nos .foot-links a:hover { color: var(--amber); }

/* --- utility bar --------------------------------------------------------- */
.nos .topbar.in {
  background: rgba(238, 240, 243, .92);
  border-bottom-color: var(--rule);
}
/* The wordmark stays an N in the accent. Without Fraunces it is the system
   stack's letterform rather than the favicon's, which is the price of the
   page loading no webfont at all. */
.nos .topbar-mark { color: var(--amber); font-weight: 800; font-size: 1.45rem; }
.nos .topbar-mark:hover { color: var(--amber-soft); }
.nos .topbar-links a { color: var(--bone-dim); font-weight: 600; }
.nos .topbar-links a:hover { color: var(--bone); }
.nos .topbar-links .topbar-cta { color: var(--amber); }

/* --- focus --------------------------------------------------------------- */
.nos a:focus-visible { outline-color: var(--amber); }

/* --- print --------------------------------------------------------------- */
@media print {
  .nos .shot-frame, .nos .btn, .nos .datanote { box-shadow: none; }
}