/* Trellan v2 · homepage proposals (30 Oct 2026). Live colour set: Trellan (data-colors="trellan", set in site.js). P66 set kept below for reference only.
   data-colors="p66"     Project 66 Studio: ink #0A0A0B, white, signal red #FF2E2E, action red #D40F14
   data-colors="trellan" Trellan: obsidian #0A0A0C, ice-white #FAFBFC, ice-cyan #5FE0FF
   Type: Newsreader (light display, italic turn) + Hanken Grotesk (text, labels). No grey body text. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}

[data-colors="p66"]{
  --ink:#0A0A0B; --paper:#FFFFFF; --mist:#F6F6F7;
  --accent:#FF2E2E; --act:#D40F14; --on-act:#FFFFFF;
  --on-dark:#FFFFFF; --on-dark-2:rgba(255,255,255,.86); --line-dark:rgba(255,255,255,.18);
  --on-light:#0A0A0B; --on-light-2:rgba(10,10,11,.82); --line-light:rgba(10,10,11,.14);
  --glow:rgba(255,46,46,.22);
}
/* Trellan is the default before any script runs (3 Nov 2026: the old red flashed on every refresh) */
:root,[data-colors="trellan"]{
  --ink:#0A0A0C; --paper:#FAFBFC; --mist:#F1F4F6;
  --accent:#5FE0FF; --act:#5FE0FF; --on-act:#04121A;
  --on-dark:#FAFBFC; --on-dark-2:rgba(250,251,252,.86); --line-dark:rgba(250,251,252,.18);
  --on-light:#0A0A0C; --on-light-2:rgba(10,10,12,.82); --line-light:rgba(10,10,12,.12);
  --glow:rgba(95,224,255,.20);
}
/* On light backgrounds cyan is unreadable as text: Trellan uses its deep cyan ink there. */
[data-colors="trellan"] .light{--accent:#0B7F97}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--on-dark);font:400 17px/1.55 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.serif{font-family:"Newsreader",Georgia,serif}
em,.turn{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;color:var(--accent)}
.dot{color:var(--accent)}
.label{font:600 12px/1 "Hanken Grotesk",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap{padding:0 18px}}

/* ── Header ─────────────────────────────────────── */
.top{position:absolute;top:0;left:0;right:0;z-index:20;background:linear-gradient(180deg,rgba(10,10,11,.85),rgba(10,10,11,0))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;height:22px}
.logo svg{height:20px;width:auto}
.logo .l-txt{fill:var(--on-dark)} .logo .l-bar{fill:var(--accent)}
.topnav{display:flex;gap:28px;align-items:center;font-size:15px}
.topnav a{text-decoration:none;color:var(--on-dark)}
.topnav .btn{padding:11px 18px}
@media(max-width:820px){.topnav a:not(.btn){display:none}}

/* ── Buttons, inputs: Trellan is rounded (pill), Project 66 was square ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#8AEAFF 0%,var(--act) 100%);color:var(--on-act);font-weight:560;font-size:15px;letter-spacing:.005em;padding:14px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.25),0 10px 28px -14px var(--glow);transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(0,0,0,.25),0 16px 36px -14px rgba(95,224,255,.55)}
.btn:active{transform:none}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--line-dark)}
.btn.ghost:hover{background:rgba(255,255,255,.09)}
.light .btn.ghost{background:transparent;color:var(--on-light);box-shadow:inset 0 0 0 1px var(--line-light)}
.field{display:flex;align-items:center;gap:6px;padding:5px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-dark);border-radius:999px;transition:box-shadow .2s}
.field:focus-within{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px rgba(95,224,255,.12)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--on-dark);font:400 16px "Hanken Grotesk",sans-serif;padding:10px 6px 10px 18px}
.field input::placeholder{color:var(--on-dark-2);opacity:.7}
.field .btn{padding:12px 20px}

/* Icons from brands.js */
.gl{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4}
.named{display:inline-flex;align-items:center;gap:12px}
.named .bl{display:inline-flex;width:20px;height:20px}
.named .bl svg{width:100%;height:100%;fill:currentColor}

/* ── Start module: two ways in. No boxes: two columns on the page ── */
.start{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.start>div{min-width:0}
.start .label{display:flex;gap:10px;align-items:center;margin-bottom:10px;color:var(--on-dark)}
.start .label b{color:var(--accent);font-weight:600}
.start p{font-size:15px;color:var(--on-dark-2);margin-bottom:16px;min-height:46px}
.drop{display:flex;flex-wrap:wrap;align-items:center;gap:22px;cursor:pointer;color:var(--on-dark)}
.drop .btn{padding:12px 22px}
.start .note{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--on-dark-2)}
.start .note svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.start{grid-template-columns:1fr}}

/* Phone and post previews: previews.css */

/* chip for platform + format */
.chip{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 "Hanken Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}

/* ── Sections ───────────────────────────────────── */
.light{background:var(--paper);color:var(--on-light)}
.light .chip{color:var(--on-light)}
h1,h2{font-family:"Newsreader",Georgia,serif;font-weight:300;letter-spacing:-.015em;line-height:1.02}
h1{font-size:clamp(46px,6.4vw,92px)}
h2{font-size:clamp(38px,4.6vw,66px)}
h1 em,h2 em{font-weight:300}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--on-dark-2);max-width:560px}
.light .lead{color:var(--on-light-2)}
section{position:relative}
.sec{padding:130px 0}
@media(max-width:700px){.sec{padding:90px 0}}

/* motion */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.fade-up{opacity:0;transform:translateY(18px);animation:fu .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fu{to{opacity:1;transform:none}}

/* Platform badges: brand icon + format glyph (brands.js) */
.badge{display:inline-flex;align-items:center;gap:.45em;line-height:1;color:var(--on-dark);vertical-align:middle}
.light .badge{color:var(--on-light)}
.badge .bl,.badge .bf{display:inline-flex;width:1.25em;height:1.25em}
.badge .bl svg{width:100%;height:100%;fill:currentColor}
.badge .bf{opacity:1;padding-left:.45em;box-shadow:inset 1px 0 0 currentColor;width:1.7em;justify-content:flex-end}
.badge .bf svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge .bf svg .f{fill:currentColor;stroke:none}
.badge .bt{font:600 .72em/1 "Hanken Grotesk";letter-spacing:.12em;text-transform:uppercase;padding-left:.55em;box-shadow:inset 1px 0 0 currentColor;margin-left:-.05em}
.badge.lg{font-size:22px}
.badge.md{font-size:17px}
.badge.sm{font-size:14px}