/* ============================================================
   Zane Roberge — personal site design system
   Warm editorial. Newsreader display serif + Inter interface.
   Light-themed, restrained, timeless.
   ============================================================ */

:root{
  /* color */
  --paper:#f7f6f2;        /* warm ivory, page ground */
  --ink:#202522;          /* deep charcoal, text + headings */
  --accent:#2c3b55;        /* deep muted navy, accent */
  --accent-soft:#42598a;
  --stone:#e9e7e1;        /* soft stone, secondary surface */
  --mist:#eceeea;         /* lighter grey, bubbles + tiles */
  --gray:#777b74;         /* warm gray, secondary text */
  --white:#ffffff;
  --line:#e3e0d8;         /* hairline */
  --line-2:#d7d3c9;       /* stronger hairline */

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* layout */
  --wrap:1180px;
  --measure:64ch;
  --ease:cubic-bezier(.33,0,.15,1);
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,5vw,56px)}
.serif{font-family:var(--serif)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.018em;line-height:1.06;color:var(--ink)}
.display{font-weight:400;font-size:clamp(46px,8.6vw,92px);line-height:.96;letter-spacing:-.03em}
.h-sect{font-weight:400;font-size:clamp(30px,5vw,50px);line-height:1.03;letter-spacing:-.022em}
.h-sub{font-weight:500;font-size:clamp(21px,2.5vw,28px);line-height:1.14}
.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--ink);font-weight:400}
.muted{color:var(--gray)}
.measure{max-width:var(--measure)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.meta{font-size:12.5px;letter-spacing:.04em;color:var(--gray)}
em,.it{font-style:italic}

/* understated text link with arrow */
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .25s var(--ease),color .25s var(--ease)}
.tlink .ar{transition:transform .3s var(--ease);color:var(--accent)}
.tlink:hover{color:var(--accent);border-color:var(--accent)}
.tlink:hover .ar{transform:translateX(4px)}

/* rare real button */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
  padding:12px 22px;border-radius:3px;transition:.25s var(--ease)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--accent)}
.btn.ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.05em;color:var(--ink);white-space:nowrap}
.nav-links{display:flex;gap:clamp(16px,3vw,32px);align-items:center}
.nav-links a{position:relative;font-size:14.5px;font-weight:450;color:var(--gray);padding:3px 0;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--accent)}

/* ---------- section rhythm ---------- */
section{padding:clamp(56px,9vw,112px) 0}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.sect-label{display:flex;align-items:center;gap:14px;margin-bottom:clamp(26px,4vw,44px)}
.sect-label .eyebrow{white-space:nowrap}
.sect-label .ln{flex:1;height:1px;background:var(--line)}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(36px,6vw,76px);align-items:center}
.hero h1{margin:.12em 0 .34em}
.hero .lead{max-width:46ch}
.hero .hero-links{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px}
.portrait{position:relative}
.portrait img{width:100%;border:1px solid var(--line-2);border-radius:2px;
  filter:grayscale(.12) contrast(1.015);box-shadow:0 24px 50px -28px rgba(32,37,34,.5)}
.portrait::before{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--stone);border-radius:2px;z-index:-1}

/* ---------- selected work ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:stretch}
.feature .cover{min-height:300px}
.cover{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:clamp(24px,3vw,34px);
  border-radius:4px;background:var(--accent);color:var(--paper);position:relative;overflow:hidden}
.cover.stone{background:var(--stone);color:var(--ink)}
.cover.shot{background-size:cover;background-position:center top}
.cover.shot::before{content:"";position:absolute;inset:0;background:linear-gradient(195deg,rgba(32,37,34,.1) 10%,rgba(18,21,19,.86) 92%)}
.cover .ck{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.cover .cn{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.02;letter-spacing:-.02em}
.feat-body{display:flex;flex-direction:column;justify-content:center;gap:16px}
.feat-body .k{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

@media(min-width:861px){.work-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:clamp(20px,3vw,32px)}
.work-grid .cell{background:var(--mist);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:11px;
  transition:background .3s var(--ease)}
.work-grid a.cell:hover{background:var(--white)}

/* -- bubble: soft rounded grey panel behind a block of text -- */
.bubble{background:var(--mist);border-radius:12px;padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,28px)}
.cell .k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cell h3{font-size:clamp(22px,2.6vw,27px);font-weight:500}
.cell p{color:var(--gray);font-size:15.5px;line-height:1.6;flex:1}
.cell .go{margin-top:4px;font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.cell .go .ar{color:var(--accent);transition:transform .3s var(--ease)}
.work-grid a.cell:hover .go .ar{transform:translateX(4px)}

/* ---------- projects page list ---------- */
.proj-list{display:flex;flex-direction:column}
.proj-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);
  align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.proj-row:last-child{border-bottom:1px solid var(--line)}
.proj-row.rev .cover{order:2}
.proj-row .pinfo .k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.proj-row .pinfo h3{font-size:clamp(28px,3.4vw,40px);font-weight:400;margin:12px 0 14px}
.proj-row .pinfo p{color:var(--ink);font-size:16.5px;line-height:1.62;max-width:46ch}
.proj-row .pinfo .pcta{margin-top:22px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.proj-row .cover{min-height:260px}
.statusword{font-size:13px;font-weight:500;color:var(--gray)}

/* ---------- background rows ---------- */
.bg-list{display:flex;flex-direction:column}
.bg-row{display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,3vw,34px);
  padding:22px 0;border-top:1px solid var(--line)}
.bg-row .yr{font-size:14px;font-weight:600;color:var(--gray);padding-top:3px}
.bg-row .role{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.2}
.bg-row .role .at{color:var(--accent)}
.bg-row .desc{color:var(--gray);font-size:15.5px;line-height:1.6;margin-top:5px;max-width:58ch}

/* ---------- prose ---------- */
.prose p{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.72;color:var(--ink);max-width:var(--measure)}
.prose p + p{margin-top:1.1em}
.prose .lead{margin-bottom:.4em}

/* ---------- contact (intentional dark) ---------- */
.contact{background:var(--ink);color:var(--paper)}
.contact .eyebrow{color:#a7b6cf}
.contact h2{color:var(--paper)}
.contact .lead{color:#d9d8d1}
/* -- connect rows: elegant text-based contact, no buttons -- */
.connect-list{margin-top:36px;border-top:1px solid rgba(247,246,242,.16)}
.connect-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;border-bottom:1px solid rgba(247,246,242,.16);transition:padding-left .3s var(--ease)}
.connect-row .cl{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#9fb0ca}
.connect-row .cv{font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);font-weight:400;color:var(--paper);
  display:inline-flex;align-items:center;gap:10px}
.connect-row .cv .ar{color:#9fb0ca;transition:transform .3s var(--ease)}
.connect-row:hover{padding-left:10px}
.connect-row:hover .cv .ar{transform:translateX(6px)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#aeb6af;padding-top:38px;font-size:12.5px;line-height:1.7;border-top:1px solid rgba(247,246,242,.1)}
.foot-main{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-bottom:24px}
.foot-brand{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--paper)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot-links a{color:var(--paper);font-weight:500;font-size:13.5px}
.foot-copy{color:#80877f;font-size:12px;white-space:nowrap}
.foot-compliance{border-top:1px solid rgba(247,246,242,.08);padding:16px 0 32px;font-size:11px;line-height:1.7;color:#6c746d}
.foot-compliance b{color:#99a199;font-weight:600}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .portrait{max-width:380px}
  .portrait::before{inset:12px -12px -12px 12px}
  .feature{grid-template-columns:1fr;gap:22px}
  .feature .cover{min-height:200px}
  .work-grid{grid-template-columns:1fr}
  .proj-row,.proj-row.rev{grid-template-columns:1fr;gap:22px}
  .proj-row .cover,.proj-row.rev .cover{order:0;min-height:180px}
}
@media(max-width:560px){
  body{font-size:16px}
  .bg-row{grid-template-columns:1fr;gap:3px}
  .bg-row .yr{padding-top:0}
  .nav-in{height:58px}
  .brand{font-size:17px}
  .nav-links{gap:16px}
  .nav-links a{font-size:14px}
  .hero-links{gap:18px}
}

/* ---------- tools / project tiles ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(22px,3vw,40px)}
.tool{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:7px;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
a.tool:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 26px 48px -32px rgba(32,37,34,.55)}
.tool .thumb{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  padding:clamp(22px,2.6vw,30px);background:var(--accent);color:var(--paper);position:relative;overflow:hidden}
.tool .thumb.stone{background:var(--stone);color:var(--ink)}
.tool .thumb.shot{background-size:cover;background-position:center top}
.tool .thumb.shot::before{content:"";position:absolute;inset:0;background:linear-gradient(195deg,rgba(32,37,34,.1) 10%,rgba(18,21,19,.86) 92%)}
.tool .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 85% -10%,rgba(255,255,255,.08),transparent 60%);pointer-events:none}
.tool .thumb .ttag{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;opacity:.82}
.tool .thumb .tname{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.02;letter-spacing:-.02em}
.tool .tfoot{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:14px;flex:1}
.tool .tfoot p{color:var(--gray);font-size:15.5px;line-height:1.58;flex:1;margin:0}
.tool .topen{font-size:14.5px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.tool .topen .ar{color:var(--accent);transition:transform .3s var(--ease)}
a.tool:hover .topen .ar{transform:translateX(4px)}
.tool .tstatus{font-size:14px;font-weight:500;color:var(--gray)}
@media(max-width:720px){.tool-grid{grid-template-columns:1fr}}