/* ===================================================================
   RoaringBytes — production site
   Paper-editorial aesthetic, faithful to the RoaringBytes design system.
   Palette: warm paper + flame accent · Archivo Expanded / Archivo / Space Mono
   =================================================================== */

:root{
  --paper:#DED9D1;
  --surface:#E8E4DD;
  --white:#ffffff;
  --ink:#1C1714;
  --ink-2:#241C17;
  --muted:#5C534A;
  --muted-2:#7A6F64;
  --muted-3:#9A8E80;
  --line:#D4CCBF;
  --line-2:#ECE6DD;
  --flame:#E8481E;
  --ember:#C0330D;
  --amber:#F2913B;
  --rust:#B83410;

  --maxw:1180px;
  --gutter:56px;

  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --display:'Archivo Expanded','Archivo',system-ui,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* barely-there paper grain for atmosphere */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,p{ margin:0; }

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---- type primitives ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--flame);
}
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ink);
}
.lead{
  font-family:var(--sans);
  font-size:clamp(17px,0.6vw + 15px,19px);
  line-height:1.55;
  color:var(--muted);
}

/* ---- nav ---- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:34px 0;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand svg{ width:22px; height:22px; display:block; }
.brand-name{
  font-family:var(--display);
  font-weight:800;
  font-size:16px;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.nav-links{
  display:flex;
  gap:38px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted-2);
}
.nav-links a{ position:relative; transition:color .2s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-7px; height:1px;
  background:var(--flame);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---- arrow link ---- */
.arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
}
.arrow .tip{ color:var(--flame); transition:transform .25s ease; }
.arrow:hover .tip{ transform:translateX(5px); }

/* ---- footers ---- */
.foot{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--muted-3); flex-wrap:wrap;
}

/* =================================================================
   HOME
   ================================================================= */
.home{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.home .wrap{ flex:1; display:flex; flex-direction:column; }

.hero{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 0;
}
.hero .eyebrow{ margin-bottom:30px; }
.hero h1{
  font-size:clamp(40px,8vw,88px);
  max-width:980px;
}
.hero .lead{ max-width:560px; margin-top:34px; }

.home-meta{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:30px 0;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--muted-3);
  flex-wrap:wrap;
}

/* =================================================================
   PAGE HEADER (Work / Contact)
   ================================================================= */
.page-head{
  padding:70px 0 56px;
  border-bottom:1px solid var(--line);
}
.page-head .eyebrow{ margin-bottom:26px; }
.page-head h1{
  font-size:clamp(38px,6.4vw,74px);
  max-width:920px;
}
.page-head .lead{ max-width:560px; margin-top:30px; }

/* =================================================================
   WORK
   ================================================================= */
.featured{
  display:grid; grid-template-columns:1.05fr 1fr; gap:48px;
  align-items:center;
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
.thumb{
  position:relative; aspect-ratio:4/3; border-radius:3px; overflow:hidden;
  border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,#DCD5CA,#DCD5CA 11px,#E2DCD2 11px,#E2DCD2 22px);
}
.thumb span{
  position:absolute; left:18px; bottom:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#8A7E70;
}
.feat-meta{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--mono); font-size:13px; color:var(--muted-3);
  margin-bottom:18px;
}
.feat-meta .no{ color:var(--flame); font-weight:700; }
.feat-meta .label{ letter-spacing:.1em; text-transform:uppercase; }
.feat-name{
  font-family:var(--display); font-weight:800; font-size:clamp(34px,4vw,46px);
  line-height:1; letter-spacing:-.02em;
}
.feat-long{
  font-size:18px; line-height:1.55; color:var(--muted);
  margin:18px 0 22px; max-width:420px;
}
.tags{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2);
  border:1px solid var(--line); border-radius:2px; padding:6px 11px;
}

.worklist{ border-bottom:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:52px 1fr auto 28px;
  align-items:center; gap:28px;
  padding:30px 16px;
  border-top:1px solid var(--line);
  transition:background .22s ease, transform .22s ease;
}
.row:hover{ background:var(--white); }
.row .no{ font-family:var(--mono); font-size:13px; color:var(--flame); font-weight:700; }
.row .name{ font-family:var(--display); font-weight:700; font-size:clamp(22px,2.4vw,27px); letter-spacing:-.01em; }
.row .desc{ font-size:15px; color:var(--muted); margin-top:5px; }
.row .kind{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-3); }
.row .tip{ font-family:var(--mono); font-size:16px; color:var(--flame); text-align:right; transition:transform .22s ease; }
.row:hover .tip{ transform:translateX(4px); }

/* =================================================================
   CONTACT
   ================================================================= */
.channels{
  display:grid; grid-template-columns:1.4fr 1fr; gap:28px;
  padding:56px 0; border-bottom:1px solid var(--line);
}
.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:48px;
  border-radius:3px; padding:42px 44px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-top{ position:relative; display:flex; align-items:center; justify-content:space-between; }
.card-body{ position:relative; }
.card-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.card-tip{ font-family:var(--mono); font-size:15px; }
.card-title{ font-family:var(--display); font-weight:800; line-height:1; letter-spacing:-.02em; }
.card-sub{ font-size:15px; margin-top:14px; line-height:1.5; }

.card-email{ background:linear-gradient(165deg,#1C1714 0%,#241C17 100%); }
.card-email .glow{ position:absolute; inset:0; background:radial-gradient(80% 70% at 88% 0%,rgba(232,72,30,.20),transparent 60%); }
.card-email .card-kicker{ color:var(--amber); }
.card-email .card-tip{ color:rgba(244,240,234,.5); }
.card-email .card-title{ color:#F4F0EA; font-size:clamp(28px,3.4vw,38px); }
.card-email .card-sub{ color:rgba(244,240,234,.55); }
.card-email:hover{ transform:translateY(-3px); }

.card-social{ background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.07); }
.card-social .card-kicker{ color:var(--rust); }
.card-social .card-tip{ color:var(--muted-3); }
.card-social .card-title{ color:var(--ink); font-size:clamp(24px,2.8vw,30px); }
.card-social .card-sub{ color:var(--muted); }
.card-social:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.10); }

.legal-section{ padding:56px 0; border-bottom:1px solid var(--line); }
.legal-section .kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-3); margin-bottom:30px;
}
.legal{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:3px; background:var(--white); overflow:hidden;
}
.legal > div{ padding:30px 32px; border-right:1px solid var(--line-2); }
.legal > div:last-child{ border-right:none; }
.legal .label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); margin-bottom:12px; }
.legal .value{ font-weight:600; font-size:18px; line-height:1.3; color:var(--ink); }

.contact-foot{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:40px 0 64px; flex-wrap:wrap;
}
.contact-foot .tagline{
  display:flex; align-items:center; gap:14px;
  font-family:var(--display); font-weight:800; font-size:18px;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--ink);
}
.contact-foot .tagline .accent{ color:var(--flame); }
.contact-foot svg{ width:22px; height:22px; }
.contact-foot .copy{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; word-spacing:.5em; color:var(--muted-3);
}

/* =================================================================
   MOTION
   ================================================================= */
@keyframes riseIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.rise{ opacity:0; animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1{ animation-delay:.08s; }
.rise.d2{ animation-delay:.16s; }
.rise.d3{ animation-delay:.24s; }
.rise.d4{ animation-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .rise{ animation:none; opacity:1; transform:none; }
  *{ transition:none !important; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:900px){
  .featured{ grid-template-columns:1fr; gap:32px; }
  .channels{ grid-template-columns:1fr; }
  .legal{ grid-template-columns:repeat(2,1fr); }
  .legal > div:nth-child(2){ border-right:none; }
  .legal > div:nth-child(1),
  .legal > div:nth-child(2){ border-bottom:1px solid var(--line-2); }
}

@media (max-width:680px){
  :root{ --gutter:24px; }
  .nav{ padding:24px 0; }
  .nav-links{ gap:22px; }
  .row{ grid-template-columns:40px 1fr 24px; gap:16px; padding:24px 6px; }
  .row .kind{ display:none; }
  .page-head{ padding:48px 0 40px; }
  .card{ padding:34px 30px; gap:36px; }
}

@media (max-width:440px){
  .legal{ grid-template-columns:1fr; }
  .legal > div{ border-right:none; border-bottom:1px solid var(--line-2); }
  .legal > div:last-child{ border-bottom:none; }
  .nav-links{ font-size:12px; gap:18px; }
}