/* ============================================================
   site.css — shared by every page: index, the blog, and each post.
   Change a colour or a face here and it changes everywhere.
   Font paths are root-relative so this works from /blog/ too.
   ============================================================ */

@font-face{font-family:'Clash Display';src:url('/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
:root{/* Ground and ink taken from Daniela's ORCADE poster (#D6D5EC lavender, #252136 violet-black).
     Every discipline hue below is lifted from one of her own graphic-design projects. */
  --bg:#EFEDF8;
  --bg-2:#E6E3F3;
  --surface:#FFFFFF;
  --surface-2:#F8F7FD;
  --line:rgba(34,30,51,.13);
  --line-2:rgba(34,30,51,.26);
  --text:#221E33;
  --dim:#3B3554;
  --faint:#5A5476;

  --stage:#E3DFF4;    /* map panel, a step deeper than the page */
  --signal:#E8524E;   /* coral, from Project 5 */
  --warm:#2C7E6A;     /* teal, from Project 5 */

  --c-hardware:#1F6FA8;        /* blue, High School poster */
  --c-ml:#6A4FB0;              /* violet, ORCADE poster */
  --c-sustainability:#1F885C;  /* green, High School poster */
  --c-product:#C25E07;         /* orange, Project 5 */
  --c-biology:#B8446B;         /* rose, Project 5 */
  --c-commercial:#2C7E6A;      /* teal, Project 5 */
  --c-field:#6E7D0B;           /* olive, Compocycler poster */
  --c-safety:#A4322B;          /* brick, High School poster */
  --c-human:#7D3C6B;           /* plum, human systems */

  --statement:'Clash Display','Satoshi',system-ui,sans-serif;  /* hook + call to action only */
  --display:'Instrument Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
  --wonk:normal;
  --wonk-calm:normal;
  --read:'Satoshi',system-ui,-apple-system,sans-serif;   /* long-form reading */
  --hand:'Caveat','Bradley Hand','Segoe Script',cursive; /* post titles and bylines */
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --t:cubic-bezier(.23,1,.32,1);          /* strong ease-out, for entering and exiting */
  --t-io:cubic-bezier(.77,0,.175,1);      /* strong ease-in-out, for on-screen movement */}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:clamp(16px,.5vw + 14.6px,17.5px);line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;}
.shell{position:relative;z-index:1}
a{color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--signal);color:#fff;padding:12px 18px;font-weight:500}
.skip:focus{left:0}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.012em;margin:0;text-wrap:balance;
  overflow-wrap:anywhere;min-width:0}
h1{font-family:var(--statement);font-size:clamp(30px,4.2vw,58px);line-height:1.02;
  letter-spacing:-.02em;font-weight:600}
h2{font-size:clamp(32px,4.6vw,64px);line-height:.98;letter-spacing:-.014em;font-weight:400}
.lede{font-size:clamp(17px,1vw + 14px,20px);line-height:1.62;color:#4A455F;max-width:40em}
.lede b{color:var(--text);font-weight:500}
.hl{color:var(--accent,var(--signal));font-weight:500}
.masthead{padding-block:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,30px)}
.mast-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,32px)}
.wordmark{font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.25vw,19px);
  letter-spacing:-.015em;text-decoration:none}
.wordmark i{font-style:normal;color:var(--signal)}
.mast-links{display:flex;gap:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.mast-links a{color:var(--dim);text-decoration:none;transition:color .2s var(--t)}
.mast-links a:hover{color:var(--signal)}
.nav-blog{color:var(--signal);font-weight:500;position:relative}
.nav-blog::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--signal);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--t)}
.mast-links a.nav-blog:hover{color:var(--signal)}
.nav-blog:hover::after{transform:scaleX(1);transform-origin:left}
.nav-blog:active{transform:scale(.97)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14.5px;font-weight:500;
  padding:12px 22px;min-height:44px;border-radius:100px;background:var(--signal);color:#fff;
  border:1px solid var(--signal);white-space:nowrap;
  transition:transform .2s var(--t),box-shadow .2s var(--t),background .22s var(--t)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,82,78,.3)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--text);background:var(--text);color:var(--bg);box-shadow:none}
.btn .ar{transition:transform .22s var(--t)}
.btn:hover .ar{transform:translateX(4px)}
footer{border-top:1px solid var(--line);padding-block:32px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--faint)}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.chip,.medialinks a,.went-t a,.mast-links a,.wordmark,.mail,.geo-list li,.node,.anchor{transition:transform .16s var(--t),color .22s var(--t),border-color .22s var(--t),
             background .22s var(--t),opacity .3s var(--t)}
.btn,.tab,.cred li a.rlink{transition:transform .16s var(--t),box-shadow .2s var(--t),background .22s var(--t),color .22s var(--t)}
@media (prefers-reduced-motion:no-preference){
}
@media (prefers-reduced-motion:reduce){
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-main{padding-block:clamp(30px,4vw,54px) clamp(40px,5vw,70px)}
.blog-head{max-width:none}
.blog-head h1{font-family:var(--statement);font-size:clamp(31px,4.4vw,60px);line-height:1.0;
  letter-spacing:-.02em;font-weight:600;margin-bottom:18px}
.blog-head h1 em{font-style:normal;color:var(--signal)}
.soon{display:inline-block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);
  background:color-mix(in srgb,var(--signal) 14%,#fff);padding:6px 13px;border-radius:100px;
  margin-bottom:18px}
.blog-body{max-width:none;margin-top:clamp(22px,2.6vw,32px)}
.blog-body p{font-size:16.5px;line-height:1.66;color:var(--dim);margin:0 0 16px}
.blog-body p b{color:var(--text);font-weight:700}


/* notify form */
.notify{margin-top:clamp(38px,4.6vw,60px);padding-top:clamp(28px,3.2vw,40px);
  border-top:1px solid var(--line)}
.notify h2{font-family:var(--sans);font-weight:700;font-size:clamp(17px,1.4vw,20px);
  line-height:1.35;letter-spacing:-.012em;margin-bottom:8px;color:var(--text)}
.notify p{font-size:15px;line-height:1.6;color:var(--dim);margin:0 0 20px}
.notify-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.notify input[type=email]{flex:1 1 260px;min-width:0;font-family:var(--sans);font-size:15px;
  color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:100px;
  padding:12px 20px;min-height:44px;
  transition:border-color .22s var(--t),box-shadow .22s var(--t)}
.notify input[type=email]::placeholder{color:var(--faint)}
.notify input[type=email]:focus{outline:none;border-color:var(--signal);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 16%,transparent)}
.notify button{font-family:var(--sans)}
.notify-note{font-size:13px;color:var(--faint);margin-top:12px;line-height:1.5}
.notify-msg{font-size:14.5px;margin-top:14px;line-height:1.5;min-height:1.2em}
.notify-msg.ok{color:var(--c-sustainability);font-weight:500}
.notify-msg.err{color:var(--signal);font-weight:500}

.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-decoration:none;
  margin-bottom:clamp(22px,2.6vw,32px);transition:color .2s var(--t),transform .16s var(--t)}
.back:hover{color:var(--signal)}
.back:active{transform:scale(.97)}

/* entrance, matching the home page */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--t),transform .7s var(--t)}
  .rv.in{opacity:1;transform:none}
  .ready .r1{animation:rise .72s var(--t) .06s forwards}
  .ready .r2{animation:rise .72s var(--t) .18s forwards}
  .ready .r3{animation:rise .72s var(--t) .30s forwards}
  .ready .r4{animation:rise .72s var(--t) .42s forwards}
  .r1,.r2,.r3,.r4{opacity:0}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .r1,.r2,.r3,.r4,.rv{opacity:1;transform:none;animation:none;transition:none}
}
@media (max-width:620px){
  .notify-row{flex-direction:column}
  .notify button{width:100%;justify-content:center}
}

/* ============================================================
   BLOG INDEX — the list of posts
   ============================================================ */
.post-list{list-style:none;margin:clamp(28px,3.4vw,42px) 0 0;padding:0;display:grid;
  gap:clamp(12px,1.4vw,16px)}
/* Each entry is a sheet of the same paper the post is printed on, so it reads
   as an object rather than a line of text, and carries its own affordance
   instead of only revealing one on hover. */
.post-link{display:grid;gap:8px;text-decoration:none;
  background:var(--paper);border:1px solid var(--paper-rule);border-radius:12px;
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,28px);
  box-shadow:0 1px 2px rgba(50,44,34,.05);
  transition:transform .22s var(--t),box-shadow .22s var(--t),border-color .22s var(--t)}
.post-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-weight:700;font-size:13.5px;color:var(--signal);margin-top:2px}
.post-go .ar{transition:transform .22s var(--t)}
@media (hover:hover) and (pointer:fine){
  .post-link:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--signal) 45%,var(--paper-rule));
    box-shadow:0 10px 26px rgba(50,44,34,.13)}
  .post-link:hover .post-go .ar{transform:translateX(5px)}
}
.post-link:active{transform:scale(.99)}
.post-link:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.post-date{font-family:var(--hand);font-weight:500;font-size:17px;letter-spacing:0;
  text-transform:none;color:var(--dim)}
.post-title{font-family:var(--hand);font-weight:700;font-size:clamp(29px,3vw,40px);
  line-height:1.04;letter-spacing:0;color:var(--signal);text-wrap:balance}
.post-sum{font-size:15px;line-height:1.58;color:var(--ink,var(--dim))}

/* ============================================================
   A POST
   ============================================================ */
/* Reading pages narrow the whole container so the masthead, the text and the
   footer line up. Posts sit on a sheet of paper: warm, slightly lighter than
   the lilac ground, so the page reads as something physical rather than text
   printed straight onto a tinted screen. */
body.blog{--maxw:760px}
body.blog{--paper:#EFECE6;--paper-rule:rgba(72,62,44,.20)}
body.post-page{--maxw:940px;
  --bg:#F3F2F6;                  /* the lilac keeps its hue but loses most of its
                                    chroma here: 700 words on a saturated ground
                                    is tiring, and it lets the paper come forward */
  --ink:#241F31;
  --paper-rule:rgba(72,62,44,.20)}   /* see body.blog above for the paper itself */   /* the rule follows the paper */
.post{padding-block:clamp(20px,2.4vw,32px) clamp(34px,4vw,56px)}

/* the sheet */
.post-paper{background:var(--paper);border:1px solid var(--paper-rule);border-radius:16px;
  padding:clamp(26px,5vw,74px) clamp(22px,5.4vw,84px) clamp(32px,5vw,78px);
  box-shadow:0 1px 2px rgba(50,44,34,.06), 0 18px 46px rgba(46,40,34,.13);
  overflow-wrap:break-word}
.post-head{margin-bottom:clamp(24px,2.8vw,36px);padding-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--paper-rule)}
.post h1{font-family:var(--hand);font-size:clamp(40px,5.4vw,72px);line-height:1.02;
  letter-spacing:0;font-weight:700;margin-bottom:8px;text-wrap:balance;color:var(--signal)}
.post-meta{font-family:var(--hand);font-weight:500;font-size:clamp(19px,1.7vw,23px);
  letter-spacing:0;text-transform:none;color:var(--dim);white-space:nowrap;line-height:1.3}
.post-meta .sep{margin-inline:9px;color:var(--faint)}
.post-article{max-width:none}
.post-article{font-family:var(--read);color:var(--ink)}
.post-article p{font-size:17.5px;line-height:1.75;margin:0 0 1.2em;
  font-weight:500;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  /* hyphenation is what keeps justified text from opening rivers of white:
     without it the browser can only stretch the word spaces */
  text-wrap:pretty}
.post-article p:first-of-type{font-size:19px;line-height:1.68;margin-bottom:1.35em}
.post-article p.signpost{font-weight:700;color:var(--signal);
  margin:1.75em 0 1.15em}
.post-article h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);
  line-height:1.15;letter-spacing:-.014em;margin:clamp(32px,3.6vw,48px) 0 14px;color:var(--text)}
.post-article a{color:var(--signal);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--signal) 35%,transparent)}
.post-article a:hover{border-bottom-color:var(--signal)}
.post-end{margin-top:clamp(34px,4vw,52px);padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--line)}
@media (max-width:620px){
  .post-article p{font-size:16.5px;text-align:left;hyphens:none}
  .post-article p:first-of-type{font-size:17.5px}
}