/* ============================================================
   SAMUEL BEAST — STUDIO OS  ·  design system
   A warm, light "retro desktop" portfolio system.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* palette — warm paper OS (default). Swappable via [data-theme] */
  --ink:        #1c1813;
  --ink-soft:   #524a3d;
  --ink-faint:  #8c8270;
  --paper:      #efe7d6;   /* desktop wallpaper base */
  --paper-2:    #e7dcc4;   /* deeper wallpaper band   */
  --cream:      #faf5ea;   /* window / card surface   */
  --bone:       #efe6d3;   /* sunken panels           */
  --line:       #d7c8a9;   /* hairlines               */
  --line-soft:  #e6dbc4;

  --accent:     #ff5b35;   /* coral — primary action  */
  --accent-deep:#dd421d;
  --accent-ink: #fff6f1;   /* text on accent          */
  --mint:       #a3dabb;
  --mint-deep:  #3f9c77;
  --ochre:      #f0a83c;
  --sky:        #95bbe8;
  --grape:      #b9a6e6;

  /* type */
  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-pixel:   'Pixelify Sans', sans-serif;
  --f-mono:    'Space Mono', monospace;

  /* form */
  --r-win: 14px;
  --r-sm: 8px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 0 24px 60px -28px rgba(28,24,19,.55);
  --shadow-float: 0 30px 70px -30px rgba(28,24,19,.45), 0 2px 0 rgba(255,255,255,.6) inset;

  --menubar-h: 44px;
  --maxw: 1280px;
}

/* alternate themes (driven by Tweaks panel) */
[data-theme="mint"]{
  --paper:#dcefe4; --paper-2:#c8e6d6; --cream:#f4fbf6; --bone:#e3f2ea;
  --line:#a9d6bf; --line-soft:#cce8da; --accent:#ef6b4b; --accent-deep:#d44f30;
}
[data-theme="paper"]{ /* warm bone, electric lime accent */
  --paper:#ece7dc; --paper-2:#ddd6c5; --cream:#fbf8f1; --bone:#efe9db;
  --line:#cfc4ad; --accent:#9bd028; --accent-deep:#79a814; --accent-ink:#16210a;
}
[data-theme="dusk"]{ /* warm taupe + bronze, still light */
  --ink:#241d16; --ink-soft:#5a4f42; --paper:#e6dccb; --paper-2:#d6c8b1;
  --cream:#f6efe2; --bone:#eadfca; --line:#c9b896; --accent:#c2762e; --accent-deep:#a35d1d;
  --mint:#bcd0b0;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body[data-cursor]{ cursor:none; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* wallpaper texture */
.wallpaper{ position:fixed; inset:0; z-index:-2; background:
   radial-gradient(120% 90% at 80% -10%, var(--cream) 0%, transparent 45%),
   radial-gradient(100% 120% at -10% 110%, var(--mint) 0%, transparent 40%),
   linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.wallpaper::after{ content:""; position:absolute; inset:0;
   background-image:radial-gradient(rgba(28,24,19,.05) 1px, transparent 1px);
   background-size:5px 5px; opacity:.5; mix-blend-mode:multiply; }

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.stack-lg{ display:flex; flex-direction:column; gap:120px; }
section{ position:relative; }

/* ---------- OS MENU BAR ---------- */
.os-menubar{
  position:fixed; top:0; left:0; right:0; height:var(--menubar-h); z-index:1000;
  display:flex; align-items:center; gap:6px; padding:0 16px;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1.5px solid var(--ink);
  font-family:var(--f-pixel); font-size:16px;
}
.os-menubar .mb-logo{ display:flex; align-items:center; gap:8px; font-weight:700;
  font-size:18px; letter-spacing:.5px; padding-right:8px; }
.mb-logo .glyph{ width:20px; height:20px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); border:1.5px solid var(--ink);
  border-radius:5px; font-family:var(--f-display); font-weight:800; font-size:14px; }
.os-menubar nav{ display:flex; gap:2px; }
.os-menubar nav a{ padding:5px 11px; border-radius:7px; line-height:1;
  transition:background .12s, color .12s; position:relative; }
.os-menubar nav a:hover{ background:var(--bone); }
.os-menubar nav a[aria-current="page"]{ background:var(--ink); color:var(--cream); }
.mb-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.mb-clock{ font-size:15px; color:var(--ink-soft); letter-spacing:.5px; }
.mb-rec{ display:flex; align-items:center; gap:6px; font-size:14px; }
.mb-rec .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent); animation:rec 1.6s infinite; }
.mb-cta{ font-family:var(--f-pixel); font-size:15px; padding:6px 13px;
  background:var(--accent); color:var(--accent-ink); border:1.5px solid var(--ink);
  border-radius:8px; box-shadow:var(--shadow-hard-sm); transition:transform .1s; }
.mb-cta:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.mb-cta:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
@keyframes rec{ 0%{box-shadow:0 0 0 0 rgba(255,91,53,.55)} 70%{box-shadow:0 0 0 7px rgba(255,91,53,0)} 100%{box-shadow:0 0 0 0 rgba(255,91,53,0)} }

.page{ padding-top:calc(var(--menubar-h) + 56px); }

/* ---------- WINDOW (the core surface) ---------- */
.win{
  background:var(--cream); border:1.5px solid var(--ink); border-radius:var(--r-win);
  box-shadow:var(--shadow-hard); overflow:hidden;
}
.win-soft{ box-shadow:var(--shadow-soft); }
.win-bar{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1.5px solid var(--ink); background:var(--bone);
  font-family:var(--f-pixel); font-size:15px; letter-spacing:.3px;
}
.win-bar .lights{ display:flex; gap:6px; }
.win-bar .lights i{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--ink); display:block; }
.win-bar .lights i:nth-child(1){ background:var(--accent); }
.win-bar .lights i:nth-child(2){ background:var(--ochre); }
.win-bar .lights i:nth-child(3){ background:var(--mint-deep); }
.win-bar .title{ flex:1; text-align:center; color:var(--ink-soft); }
.win-bar .meta{ font-family:var(--f-mono); font-size:12px; color:var(--ink-faint); }
.win-body{ padding:22px; }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-pixel);
  font-size:17px; padding:12px 22px; border-radius:10px; border:1.5px solid var(--ink);
  background:var(--cream); color:var(--ink); cursor:pointer; line-height:1;
  box-shadow:var(--shadow-hard-sm); transition:transform .1s, box-shadow .1s, background .15s; }
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-ink{ background:var(--ink); color:var(--cream); }
.btn-ghost{ box-shadow:none; background:transparent; }
.btn-ghost:hover{ background:var(--bone); transform:none; box-shadow:none; }
.btn .arr{ transition:transform .18s; }
.btn:hover .arr{ transform:translate(3px,-3px); }

/* ---------- CHIPS / TAGS / KBD ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono);
  font-size:12px; text-transform:uppercase; letter-spacing:1px; padding:5px 11px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--cream); }
.chip.is-accent{ background:var(--accent); color:var(--accent-ink); }
.chip.is-mint{ background:var(--mint); }
.eyebrow{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--accent-deep); }
.kbd{ font-family:var(--f-pixel); font-size:13px; padding:2px 8px; border:1.5px solid var(--ink);
  border-radius:6px; background:var(--cream); box-shadow:0 2px 0 var(--ink); }

/* ---------- TYPE ---------- */
.display{ font-family:var(--f-display); font-weight:800; line-height:.92;
  letter-spacing:-.02em; text-wrap:balance; }
.h-mega{ font-size:clamp(58px, 13vw, 200px); }
.h-1{ font-size:clamp(40px, 7vw, 92px); }
.h-2{ font-size:clamp(30px, 4.6vw, 60px); }
.h-3{ font-size:clamp(22px, 3vw, 36px); }
.lead{ font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--ink-soft); max-width:60ch; }
.mono-label{ font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); }
.outline-text{ color:transparent; -webkit-text-stroke:2px var(--ink); }
.serif-i{ font-style:italic; }

/* ---------- MARQUEE ---------- */
.marquee{ overflow:hidden; border-block:1.5px solid var(--ink); background:var(--ink); color:var(--cream); }
.marquee .track{ display:flex; gap:48px; padding:12px 0; width:max-content;
  animation:scroll-x 28s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee .item{ font-family:var(--f-pixel); font-size:20px; display:flex; align-items:center; gap:48px; white-space:nowrap; }
.marquee .item .star{ color:var(--accent); }
@keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:normal; }
.cursor-dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); }
.cursor-ring{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--ink);
  transition:width .18s, height .18s, background .18s, border-color .18s; }
.cursor-ring.is-hot{ width:54px; height:54px; background:color-mix(in srgb,var(--accent) 22%, transparent); border-color:var(--accent); }
.cursor-ring.is-text{ width:3px; height:26px; border-radius:2px; background:var(--ink); border:none; }
@media (max-width:860px){ .cursor-dot,.cursor-ring{ display:none; } body[data-cursor]{ cursor:auto; } }

/* ---------- REVEAL ANIMATION ---------- */
/* content is visible by default; JS opts-in to the hidden start state via .reveal-ready
   so a script hiccup can never leave the page blank. */
html.reveal-ready [data-reveal]{ opacity:0; transform:translateY(26px); }
html.reveal-ready [data-reveal].in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.reveal-ready [data-reveal][data-d="1"].in{ transition-delay:.08s }
html.reveal-ready [data-reveal][data-d="2"].in{ transition-delay:.16s }
html.reveal-ready [data-reveal][data-d="3"].in{ transition-delay:.24s }
html.reveal-ready [data-reveal][data-d="4"].in{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){
  html.reveal-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  .marquee .track, .mb-rec .dot{ animation:none !important; }
}

/* ---------- THUMB / VIDEO TILE ---------- */
.thumb{ position:relative; border:1.5px solid var(--ink); border-radius:10px; overflow:hidden;
  background:var(--bone); aspect-ratio:16/10; }
.thumb .ph{ position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(28,24,19,.04) 16px 32px),
    linear-gradient(140deg, var(--mint) 0%, var(--sky) 100%); }
.thumb .ph .ico{ font-family:var(--f-pixel); color:var(--ink); opacity:.5; font-size:38px; }
.thumb .scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(28,24,19,.55), transparent 55%); opacity:0; transition:opacity .25s; }
.thumb:hover .scrim{ opacity:1; }
.thumb .play{ position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%;
  background:var(--cream); border:1.5px solid var(--ink); display:grid; place-items:center;
  transform:scale(.7); opacity:0; transition:.25s; }
.thumb:hover .play{ transform:scale(1); opacity:1; }
.thumb .runtime{ position:absolute; right:8px; top:8px; font-family:var(--f-mono); font-size:11px;
  background:var(--ink); color:var(--cream); padding:3px 7px; border-radius:5px; }

/* placeholder palettes for tiles */
.ph-a{ background:linear-gradient(140deg,#a3dabb,#95bbe8)!important; }
.ph-b{ background:linear-gradient(140deg,#f0a83c,#ff5b35)!important; }
.ph-c{ background:linear-gradient(140deg,#b9a6e6,#95bbe8)!important; }
.ph-d{ background:linear-gradient(140deg,#ff5b35,#f0a83c)!important; }
.ph-e{ background:linear-gradient(140deg,#95bbe8,#a3dabb)!important; }
.ph-f{ background:linear-gradient(140deg,#1c1813,#524a3d)!important; }

/* ---------- FORM FIELDS ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--f-pixel); font-size:15px; }
.field .hint{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); }
.input{ font-family:var(--f-body); font-size:16px; padding:13px 15px; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--ink); border-radius:9px; width:100%;
  box-shadow:inset 2px 2px 0 rgba(28,24,19,.06); transition:box-shadow .15s, border-color .15s; }
.input::placeholder{ color:var(--ink-faint); }
.input:focus{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%, transparent); }
textarea.input{ resize:vertical; min-height:120px; }

/* ---------- FOOTER ---------- */
.os-footer{ margin-top:120px; border-top:1.5px solid var(--ink); background:var(--ink); color:var(--cream); }
.os-footer .wrap{ padding-block:64px; }
.os-footer a:hover{ color:var(--accent); }
.os-footer .big{ font-family:var(--f-display); font-weight:800; font-size:clamp(48px,11vw,150px);
  line-height:.9; letter-spacing:-.02em; }
.os-footer .statusbar{ border-top:1.5px solid #3a342b; font-family:var(--f-mono); font-size:12px;
  color:#b8af9e; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 0; }

/* ---------- UTIL ---------- */
.row{ display:flex; gap:16px; }
.row.wrap{ flex-wrap:wrap; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.grid{ display:grid; gap:22px; }
.muted{ color:var(--ink-soft); }
.divider{ height:1.5px; background:var(--line); border:0; }
.tape{ font-family:var(--f-pixel); background:var(--ochre); color:var(--ink); border:1.5px solid var(--ink);
  padding:3px 10px; display:inline-block; transform:rotate(-2deg); box-shadow:var(--shadow-hard-sm); }
.noise-card{ background:var(--cream); border:1.5px solid var(--ink); border-radius:var(--r-win); }

@media (max-width:860px){
  .os-menubar nav{ display:none; }
  .stack-lg{ gap:84px; }
  .win-body{ padding:16px; }
}