/* ==========================================================================
   thraxshoots.com — Film Stock
   Built against planning/ux-designs/ux-thraxshoots-2026-09-12/DESIGN.md
   and EXPERIENCE.md. Those spines win on any conflict with this file.

   The opacities below are MEASURED FLOORS, not preferences. Each was
   computed against the worst thing a photograph can put behind text —
   a blown-white highlight:

     row fill    .87  ->  #f2ece2  11.75:1  AAA
                          #ff7043   5.03:1  AA
     top wash    .78  ->  #f2ece2   8.47:1  AAA
                          #bcb7ae   4.99:1  AA

   Lowering either to reveal more photograph breaks WCAG AA.
   ========================================================================== */

:root{
  --scrim:            #120d08;              /* warm near-black, never neutral */
  --scrim-row:        rgba(18, 13, 8, .87);
  --scrim-row-hover:  rgba(18, 13, 8, .95);
  --scrim-wash:       rgba(18, 13, 8, .78);
  --on-scrim:         #f2ece2;              /* warm off-white, never #fff */
  --on-scrim-muted:   #bcb7ae;
  --accent:           #ff7043;              /* arrow only */
  --accent-deep:      #cc3300;              /* DECORATIVE ONLY — fails AA as text */

  --gutter:           22px;
  --row-gap:          3px;
  --radius:           3px;
  --column:           420px;

  --mono: ui-monospace, "SF Mono", Menlo, Monaco, "Courier New", monospace;
}

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

html{ height:100%; }

body{
  margin:0;
  min-height:100%;
  color:var(--on-scrim);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Decoration, not content — so it is a CSS background, never an <img>.
     The solid colour behind it is the fallback: if the photograph fails
     to load, every contrast figure above gets strictly better. */
  background-color:var(--scrim);
  background-image:url("assets/hero.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.page{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:var(--gutter);
}

/* Top wash. Holds solid to 22% of viewport height, then fades out by 40%.
   The HOLD is the point: a gradient that starts fading at the top edge
   drops below the contrast floor exactly where the blurb sits. */
.page::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:40vh;
  height:40svh;
  background:linear-gradient(
    180deg,
    var(--scrim-wash) 0%,
    var(--scrim-wash) 55%,
    rgba(18, 13, 8, 0) 100%
  );
  pointer-events:none;
}

/* ---------- identity ------------------------------------------------ */

.mark{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
}

.glyph{ flex:none; }
.glyph circle{ stroke:var(--accent-deep); }   /* the one honest job for #cc3300 */
.glyph path{ fill:var(--on-scrim); }

h1{
  margin:0;
  font-size:19px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
}

.blurb{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  max-width:34ch;
  font-size:13px;
  font-weight:400;
  line-height:1.65;          /* monospace at 13px needs the air */
  color:var(--on-scrim-muted);
}

/* ---------- destinations -------------------------------------------- */

/* True vertical centre, positioned independently of the wordmark:
   identity in one corner, navigation in the middle, two separate jobs. */
.links{
  position:absolute;
  top:50%;
  left:var(--gutter);
  right:var(--gutter);
  z-index:1;
  transform:translateY(-50%);
}

.links ul{
  margin:0;
  padding:0;
  list-style:none;           /* still announced as "list, 5 items" */
}

.links li + li{
  margin-top:var(--row-gap); /* the 3px sliver of photograph — do not close it */
}

.links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;           /* the touch target is the row, not the text */
  padding:13px 14px;
  border-radius:var(--radius);
  background-color:var(--scrim-row);
  color:var(--on-scrim);
  font-size:15px;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:background-color 120ms ease-out;
}

.arw{
  color:var(--accent);
  transition:transform 120ms ease-out;
}

/* Hover does not exist on touch, which is most traffic — so rest and focus
   carry the full burden of legibility and nothing depends on hover. */
.links a:hover{ background-color:var(--scrim-row-hover); }
.links a:hover .arw{ transform:translateX(2px); }
.links a:active{ background-color:var(--scrim); }

.links a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- wide viewports ------------------------------------------ */

/* The photograph gains room; the interface does not. Left-aligned at the
   gutter, never centred — centring turns a labelled print into a landing page. */
@media (min-width:641px){
  .mark,
  .blurb{ max-width:var(--column); }

  .links{
    right:auto;
    width:min(var(--column), calc(100% - var(--gutter) * 2));
  }
}

/* ---------- short viewports ----------------------------------------- */

/* Landscape phones. Rows yield downward out of absolute centring rather
   than colliding with the blurb. Better to flow than to clip. */
@media (max-height:560px){
  .links{
    position:static;
    transform:none;
    margin-top:26px;
  }
  body{ background-attachment:scroll; }
}

/* ---------- reduced motion ------------------------------------------ */

/* Colour still changes — that carries state. Only movement is removed. */
@media (prefers-reduced-motion:reduce){
  .links a,
  .arw{ transition:none; }
  .links a:hover .arw{ transform:none; }
}