/* ------------------------------------------------------------------
   NOCTIS — one-pager
   Design source: Paper file "NOCTIS — Website" (01M2NN4PXY9BEJ63K6KK95K5BV)
   Direction: PLATE — fully achromatic, no accent colour anywhere.

   FONTS (read before changing anything typographic):
   Three weights of Silka, the single brand typeface. Light 300 carries
   display, Regular 400 carries body, Medium 500 carries micro-labels —
   the same vocabulary as the proposal deck. No bold anywhere: that is a
   standing brand rule, not an oversight.

   Regular is the foundry's own webfont build, shipped unmodified.
   Light and Medium are generated from the brand folder's desktop .otf
   files and SUBSET to the characters this page uses (Latin + Romanian
   diacritics), which is why they are ~7 KB each rather than ~27 KB.
   Regenerate with website/scripts/make-fonts.sh after any copy change
   that introduces a new character.

   The @font-face family is deliberately named "SilkaWeb", not "Silka". Silka
   is installed on the designer's machine, and a same-named @font-face family
   invites the browser to resolve against the local install instead of these
   subset files — so the page would render differently for a visitor who owns
   the font than for one who doesn't. A unique name makes rendering
   deterministic for everyone.

   LICENCE NOTE: the brand folder's licence PDFs cover Regular + Italic.
   Atipo sells webfont rights as a tier separate from desktop, and the
   complete Silka family is pay-what-you-want. If Light/Medium are not
   covered for web, close that off at atipofoundry.com/fonts/silka.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "SilkaWeb";
  src: url("fonts/silka-light-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SilkaWeb";
  src: url("fonts/silka-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SilkaWeb";
  src: url("fonts/silka-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --deck:            #F1F1F0;
  --text-primary:    #0D0E10;
  --text-secondary:  #2B2C2E;
  --text-tertiary:   #5E5F61;
  --border:          rgb(13 14 16 / 11%);

  /* The deck's vocabulary: Light carries display, Medium carries labels. */
  --weight-display: 300;
  --weight-body:    400;
  --weight-label:   500;

  --page-margin: 64px;
  --measure:     860px;

  --font: "SilkaWeb", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deck);
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: var(--weight-body);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Three real faces are loaded, and no bold exists by design. If anything
     ever asks for a weight none of them supplies, the browser would fake it
     by smearing the glyphs. Forbid synthesis so that degrades honestly
     instead of silently inventing a bold that isn't in the brand. */
  font-synthesis: none;
  -webkit-font-synthesis: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--text-primary);
  color: var(--deck);
  text-decoration: none;
  z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- header */

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px var(--page-margin) 0;
}

.logo { display: block; line-height: 0; }
.logo img { width: 132px; height: auto; display: block; }

.header-cta,
.cta {
  font-weight: var(--weight-label);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.header-cta:hover,
.cta:hover { border-bottom-color: var(--text-primary); }

.arrow { transition: transform 140ms ease; display: inline-block; }
.header-cta:hover .arrow,
.cta:hover .arrow { transform: translateX(3px); }

/* ----------------------------------------------------------- plate */

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
}

.plate {
  margin: 40px 0 0;
  width: 100%;
  padding: 0 var(--page-margin);
  display: flex;
  justify-content: center;
}

/* The plate is a halftone: its dot grid is generated for an exact display
   width (see website/scripts/make-plates.py). Scaling it re-samples the grid
   and turns it to mud, so each breakpoint ships its own file at its own
   width and browser scaling is kept under ~12%. Do not make this fluid.

   The width lives on <picture>, not on <img>. Inside a flex container the
   <picture> is the flex item, so a percentage max-width on the <img> would
   resolve against the picture's own content-derived width and shrink the
   image against itself. */
.plate picture {
  display: block;
  width: 860px;
  max-width: 100%;
}
.plate img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------- headline */

.headline {
  width: 680px;
  max-width: 100%;
  margin: 4px 0 0;
  font-weight: var(--weight-display);
  font-size: 52px;
  line-height: 60px;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------- columns */

.columns {
  width: var(--measure);
  max-width: calc(100% - var(--page-margin) * 2);
  margin-top: 56px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.col:last-child { flex-grow: 1.3; }

.col p { margin: 0; }

.label {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: var(--weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.col a { text-decoration: none; border-bottom: 1px solid transparent; }
.col a:hover { border-bottom-color: var(--text-secondary); }

.cta-line { margin-top: 6px !important; }
.cta { font-size: 14px; }

/* ----------------------------------------------------------- legal */

.legal {
  width: 100%;
  margin-top: 72px;
  padding: 0 var(--page-margin) 40px;
  display: flex;
  justify-content: center;
}
.legal p {
  width: 1312px;
  max-width: 100%;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

/* --------------------------------------------------------- 404 page */

.nf {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--page-margin);
}
.nf .code {
  margin: 0 0 18px;
  font-size: 11px;
  line-height: 14px;
  font-weight: var(--weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.nf h1 { margin: 0 0 22px; }
.nf p  { margin: 0; font-size: 14px; line-height: 22px; }

/* ------------------------------------------------------ breakpoints */

/* Tablet / small laptop: the 680px plate. */
@media (max-width: 1099px) {
  :root { --page-margin: 40px; --measure: 720px; }
  .plate picture { width: 680px; }
  .headline { width: 600px; font-size: 44px; line-height: 52px; }
  .columns { gap: 36px; }
}

@media (max-width: 700px) {
  :root { --page-margin: 24px; }

  .header { padding-top: 28px; }
  .logo img { width: 106px; }
  .header-cta { font-size: 12px; }

  /* Mobile plate is full-bleed, generated at 390px display width. It is the
     one place the plate ignores the page margin, by design. */
  .plate { margin-top: 26px; padding: 0; }
  .plate picture { width: 390px; }

  .headline {
    width: 342px;
    margin-top: 10px;
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -0.022em;
  }

  .columns {
    width: 342px;
    max-width: calc(100% - var(--page-margin) * 2);
    margin-top: 40px;
    flex-direction: column;
    /* Stacked, the cross axis is horizontal: flex-start would shrink each
       block to its content width and the separator rules would come out
       ragged. Stretch keeps every rule the full measure. */
    align-items: stretch;
    gap: 26px;
  }
  .col { gap: 12px; font-size: 15px; line-height: 24px; }
  /* Inline links are 19px tall at this size; give thumbs a 24px+ target
     without moving the text. */
  .col a, .cta { padding: 4px 0; margin: -4px 0; }
  .header-cta { padding: 8px 0; margin: -8px 0; }
  .col:last-child { flex-grow: 1; }
  .col + .col { border-top: 1px solid var(--border); padding-top: 26px; }
  .cta { font-size: 15px; }

  .legal { margin-top: 48px; padding-bottom: 28px; }
  .legal p { width: 342px; padding-top: 16px; }
}

/* Very narrow phones: the mobile plate shrinks to fit. max-width:100% on
   <picture> already handles it; nothing further needed. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .header-cta, .skip { display: none; }
  body { background: #fff; }
}