/* Thomas E. Graul, AIA — "The Drawing Index"
   Architectural monograph layout · violet signature accent */

/* ============ FONTS ============ */
@font-face{font-family:"Archivo";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/archivo-500.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/archivo-600.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/archivo-800.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/newsreader-400.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url("fonts/newsreader-400i.woff2") format("woff2");}
@font-face{font-family:"PlexMono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/plexmono-400.woff2") format("woff2");}
@font-face{font-family:"PlexMono";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/plexmono-500.woff2") format("woff2");}

/* ============ TOKENS ============ */
:root{
  --paper:#F4F4F6;        /* cool gallery paper, faint violet bias */
  --paper-2:#ECEBF0;      /* deeper panel */
  --ink:#17161C;          /* near-black, cool-violet bias */
  --graphite:#5F5C69;     /* secondary text */
  --line:#D6D4DD;         /* hairline */
  --line-soft:#E4E2EA;
  --violet:#5B3E8C;       /* signature accent */
  --violet-bright:#8A6BEE;/* highlight (dark band, emphasis) */
  --violet-tint:rgba(91,62,140,.10);
  --disp:"Archivo",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"PlexMono",ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1280px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:clamp(1rem,.55rem + .55vw,1.14rem);
  line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--violet);color:var(--paper);}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:.98;margin:0;text-wrap:balance;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);}
.mono--accent{color:var(--violet);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ============ TOP BAR ============ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem var(--pad);
  background:rgba(244,244,246,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:transform .4s ease;
}
.brand{display:flex;align-items:baseline;gap:.6rem;font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:-.01em;}
.brand span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--violet);font-weight:500;}
.topnav{display:flex;gap:1.6rem;}
.topnav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.topnav a:hover{color:var(--ink);border-color:var(--violet);}
@media(max-width:640px){.topnav{gap:1rem;}.topnav a:nth-child(1){display:none;}}

/* ============ HERO ============ */
.hero{padding-top:clamp(7rem,14vh,10rem);padding-bottom:clamp(2.5rem,6vw,5rem);position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 20% 0%,#000 30%,transparent 78%);
  opacity:.75;
}
.hero .wrap{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2rem;}}
.hero-eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;}
.hero-eyebrow .tick{flex:0 0 34px;height:1px;background:var(--violet);}
.hero h1{font-size:clamp(2.7rem,7.2vw,6rem);}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet);}
.hero-lede{max-width:34ch;margin-top:1.8rem;color:var(--graphite);font-size:clamp(1.05rem,.7rem + .6vw,1.28rem);line-height:1.55;}
.hero-figure{position:relative;}
.hero-figure img{width:100%;height:clamp(300px,42vh,460px);object-fit:cover;filter:grayscale(.12) contrast(1.02);}
.figtag{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;border-top:1px solid var(--ink);padding-top:.5rem;}
.figtag .r{text-align:right;}

.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem);margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.4rem;border-top:1px solid var(--line);}
.stat .n{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
.stat .n b{color:var(--violet);font-weight:800;}
.stat .l{margin-top:.5rem;}

/* ============ SECTIONS ============ */
.sec{padding:clamp(3.5rem,8vw,7rem) 0;}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(2rem,4vw,3.2rem);flex-wrap:wrap;}
.sechead h2{font-size:clamp(1.9rem,4vw,3rem);}
.sechead .idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--violet);}

/* ============ THESIS ============ */
.thesis{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
.thesis-grid{display:grid;grid-template-columns:.4fr 1fr;gap:clamp(1.5rem,4vw,4rem);}
@media(max-width:820px){.thesis-grid{grid-template-columns:1fr;gap:1.2rem;}}
.thesis p{font-family:var(--serif);font-size:clamp(1.25rem,1rem + 1vw,1.7rem);line-height:1.5;max-width:32ch;margin:0 0 1.1rem;}
.thesis p:last-child{margin-bottom:0;}
.thesis .lead-first::first-letter{font-family:var(--disp);font-weight:800;float:left;font-size:3.4em;line-height:.72;padding:.06em .12em 0 0;color:var(--violet);}

/* ============ WORKS INDEX ============ */
.work{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2.2rem,5vw,4rem) 0;border-top:1px solid var(--line);}
.work:nth-child(even) .work-media{order:2;}
@media(max-width:860px){.work{grid-template-columns:1fr;gap:1.4rem;}.work:nth-child(even) .work-media{order:0;}}
.work-media{position:relative;overflow:hidden;background:var(--paper-2);}
.work-media img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover;filter:grayscale(.15) contrast(1.03);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s;}
.work:hover .work-media img{transform:scale(1.045);filter:grayscale(0) contrast(1.05);}
.work-no{position:absolute;top:0;left:0;font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--paper);mix-blend-mode:difference;padding:.3rem .5rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.work-body h3{font-size:clamp(1.55rem,2.4vw,2.3rem);margin-bottom:.2rem;}
.work-loc{font-family:var(--serif);font-style:italic;color:var(--violet);font-size:1.05rem;margin-bottom:1.2rem;}
.work-desc{color:var(--graphite);max-width:52ch;font-size:1.02rem;}
.tblock{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;margin:1.3rem 0 0;border-top:1px solid var(--line);padding-top:1rem;}
.tblock dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);padding-top:.15rem;}
.tblock dd{margin:0;font-family:var(--mono);font-size:.8rem;color:var(--ink);letter-spacing:.01em;}
.work-credit{margin-top:.9rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--graphite);text-transform:uppercase;}

/* ============ PRACTICE / SERVICES ============ */
.practice{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);}
@media(max-width:820px){.practice-grid{grid-template-columns:1fr;gap:2rem;}}
.practice p{max-width:46ch;color:var(--graphite);}
.practice p strong{color:var(--ink);font-weight:400;font-style:italic;}
.svc-list{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--line);}
.svc-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line);}
.svc-list .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--violet);}
.svc-list .v{font-family:var(--serif);font-size:1.05rem;}
.types{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;}
.types span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);color:var(--graphite);padding:.4rem .7rem;background:var(--paper);}

/* ============ CONTACT ============ */
.contact{background:#151320;color:var(--paper);position:relative;overflow:hidden;}
.contact::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(100% 100% at 85% 100%,#000,transparent 70%);mask-image:radial-gradient(100% 100% at 85% 100%,#000,transparent 70%);}
.contact .wrap{position:relative;z-index:1;padding-top:clamp(3.5rem,8vw,7rem);padding-bottom:clamp(3.5rem,8vw,7rem);}
.contact .mono{color:#9a8fb5;}
.contact h2{font-size:clamp(2.2rem,6vw,4.2rem);margin:1.2rem 0 2.4rem;color:var(--paper);}
.contact h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--violet-bright);}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);border-top:1px solid rgba(255,255,255,.15);padding-top:2rem;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:1.6rem;}}
.cblock .h{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:.7rem;}
.cblock p{margin:.1rem 0;color:#e0dde6;font-size:1.05rem;}
.cblock a{border-bottom:1px solid rgba(138,107,238,.5);transition:border-color .2s;}
.cblock a:hover{border-color:var(--violet-bright);}
.license{margin-top:2.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#9a8fb5;display:flex;align-items:center;gap:.7rem;}
.license .dot{width:6px;height:6px;border-radius:50%;background:var(--violet-bright);flex:0 0 auto;}

/* ============ FOOTER ============ */
.foot{background:#100e18;color:#9a8fb5;padding:1.6rem var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .work-media img{transition:none;}
}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}