/* claudlings.com — The Adventures of the Claudlings.
   Hand-authored. No build step, no CDN, no webfonts, no JavaScript.
   Every byte this page needs is in this repo. */

:root{
  --ink:#0B0A09;        /* near-black, warmed */
  --ink-2:#131110;
  --surface:#1A1512;
  --line:#2E2620;
  --text:#F6F1EB;
  --dim:#A6998C;
  --coral:#D97757;      /* the accent — warm, not red */
  --amber:#E8A24A;

  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
         "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, monospace;

  --shell:min(1120px, 100% - 3rem);
}

*{box-sizing:border-box}

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

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--text);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* A single soft light behind the frame. Purely decorative, pointer-inert. */
.glow{
  position:fixed;
  inset:-20vh -10vw auto;
  height:80vh;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(50% 55% at 50% 30%, rgba(217,119,87,.20), transparent 70%),
    radial-gradient(40% 45% at 70% 15%, rgba(232,162,74,.12), transparent 70%);
}

main{
  position:relative;
  z-index:1;
  width:var(--shell);
  margin:0 auto;
  padding:clamp(3rem, 9vh, 6.5rem) 0 4rem;
  flex:1 0 auto;
}

/* ---- titles ---- */
.titles{ text-align:center; margin:0 0 clamp(2rem, 5vh, 3.25rem) }

.eyebrow{
  margin:0 0 1.1rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--coral);
}

h1{
  margin:0;
  font-size:clamp(2.1rem, 7vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.025em;
  font-weight:700;
  text-wrap:balance;
}

h1 .of{
  display:inline-block;
  font-size:.44em;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--dim);
  vertical-align:.32em;
  margin:0 .12em;
}

/* ---- the frame ---- */
.screen{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(246,241,235,.06) inset,
    0 30px 80px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(217,119,87,.07);
}

video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  background:#000;
}

.fallback{ padding:2rem; color:var(--dim); text-align:center }

/* ---- copy ---- */
.about{
  margin:clamp(2rem, 5vh, 3rem) auto 0;
  max-width:52ch;
  text-align:center;
}

.lede{
  margin:0;
  font-size:clamp(1.05rem, 2.2vw, 1.3rem);
  line-height:1.5;
  color:var(--text);
  text-wrap:balance;
}

.note{
  margin:.9rem 0 0;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ---- footer ---- */
footer{
  position:relative;
  z-index:1;
  flex:none;
  width:var(--shell);
  margin:0 auto;
  padding:1.75rem 0 2.5rem;
  border-top:1px solid var(--line);
}

footer p{
  display:flex;
  align-items:center;
  gap:.6rem;
  justify-content:center;
  margin:0;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}

footer .mark{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 12px rgba(217,119,87,.7);
}

/* ---- links & focus ---- */
a{ color:var(--coral) }
a:hover{ color:var(--amber) }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- reduced motion / small screens ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

@media (max-width:640px){
  :root{ --shell:min(1120px, 100% - 1.75rem) }
  .screen{ border-radius:10px }
  h1 .of{ vertical-align:.2em }
}

/* The page is dark by design — a film frame is not a document. Respect a light
   preference only to the extent of easing the surround, never the letterbox. */
@media (prefers-color-scheme:light){
  :root{ --ink:#0E0C0B }
}