/* ============================================================
   DESIGN SYSTEM
   Token architecture recovered from computed styles; light is
   the default, dark is the explicit override.
   ============================================================ */
:root{
  --green:#43713d; --carmine:#8f0a30; --ochre:#7a5e02;
  --paper:#f4f1ea; --paper-sunk:#e9e4d8;
  --ink:#1a1813; --ink-muted:#6b665c;
  --rule:#d8d2c4; --rule-strong:#1a1813;
  --accent:var(--green); --accent-alt:var(--carmine); --accent-third:var(--ochre);

  --font-grotesk:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-serif:"Newsreader","Times New Roman",Times,serif;
  --font-script:"Aboreto","Marker Felt",cursive;

  --t--2:.688rem; --t--1:.75rem; --t-0:.9375rem; --t-1:1.0625rem;
  --t-2:1.4375rem; --t-3:1.9375rem; --t-4:2.5625rem; --t-5:3.4375rem;
  --t-6:4.5625rem; --t-7:6.0625rem; --t-8:8.0625rem; --t-9:10.75rem;
  --t-display:clamp(var(--t-4),15vw,var(--t-7));
  --t-case:clamp(var(--t-4),11vw,var(--t-8));
  --t-page:clamp(var(--t-4),7vw,var(--t-6));

  --lh-tight:.9; --lh-snug:1.15; --lh-body:1.55; --lh-ui:1.4;
  --tr-display:-.035em; --tr-tight:-.015em; --tr-label:.12em; --tr-wide:.18em;

  --u:.5rem; --u2:1rem; --u3:1.5rem; --u4:2rem;
  --u6:3rem; --u8:4rem; --u12:6rem; --u16:8rem;

  --cols:12; --gutter:1.5rem; --margin:2in; --page-max:1760px;
  --content-w:calc(min(100vw, var(--page-max)) - var(--margin)*2);
  --col-w:calc((var(--content-w) - (var(--cols) - 1)*var(--gutter))/var(--cols));
  --col-step:calc(var(--col-w) + var(--gutter));
  --measure:68ch;
}
:root[data-theme=dark]{
  --green:#7cb873; --carmine:#e0718c; --ochre:#d4ad33;
  --paper:#161412; --paper-sunk:#221f1b;
  --ink:#ebe6dc; --ink-muted:#9d978c;
  --rule:#35312b; --rule-strong:#ebe6dc;
}
@media(max-width:1200px){ :root{--margin:1in;} }
@media(max-width:900px){ :root{--gutter:1rem;--margin:1.25rem;--cols:6;} }

/* ============================================================
   BASE
   ============================================================ */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--paper);font-size:16px;scroll-padding-top:var(--u12);}
img,video{display:block;max-width:100%;}
ul,ol{list-style:none;}
button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;}

body{
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:var(--t-1);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='1200'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.96 0.004' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.058 0'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.116 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.064 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23r)'/></svg>");
  background-position:0 0,0 0,0 0,1px 1px;
  background-size:340px 1200px,140px 140px,420px 420px,140px 140px;
  background-repeat:repeat;
  font-synthesis-weight:none;
  text-shadow:0 0 .63px color-mix(in srgb, currentColor 34%, transparent);
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-grotesk);font-weight:500;
  letter-spacing:var(--tr-tight);line-height:var(--lh-snug);text-wrap:balance;}
p{text-wrap:pretty;}
a{color:inherit;}
::selection{background:var(--accent);color:var(--paper);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.shell{display:flex;flex-direction:column;min-height:100vh;}
main{flex:1;}

/* ============================================================
   GRID
   ============================================================ */
.page{margin-inline:auto;max-width:var(--page-max);padding-inline:var(--margin);width:100%;}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);row-gap:0;}
.grid-rows{row-gap:var(--u6);}
.c-1{grid-column-end:span 1;} .c-2{grid-column-end:span 2;} .c-3{grid-column-end:span 3;}
.c-4{grid-column-end:span 4;} .c-5{grid-column-end:span 5;} .c-6{grid-column-end:span 6;}
.c-7{grid-column-end:span 7;} .c-8{grid-column-end:span 8;} .c-9{grid-column-end:span 9;}
.c-10{grid-column-end:span 10;} .c-12{grid-column:1/-1;}
.start-2{grid-column-start:2;} .start-3{grid-column-start:3;} .start-4{grid-column-start:4;}
.start-5{grid-column-start:5;} .start-6{grid-column-start:6;} .start-7{grid-column-start:7;}
.start-8{grid-column-start:8;} .start-9{grid-column-start:9;} .start-10{grid-column-start:10;}
.start-11{grid-column-start:11;}
@media(max-width:900px){
  .c-4,.c-5,.c-6,.c-7,.c-8,.c-9,.c-10{grid-column-end:span 6;}
  .start-2,.start-3,.start-4,.start-5,.start-6,
  .start-7,.start-8,.start-9,.start-10,.start-11{grid-column-start:auto;}
}
@media(max-width:600px){ .c-2,.c-3,.c-4,.c-5,.c-6{grid-column-end:span 6;} }

.rule{border:0;border-top:1px solid var(--rule);width:100%;}
.rule-strong{border-top-color:var(--rule-strong);}

/* ============================================================
   TYPE ROLES
   ============================================================ */
.label{color:var(--ink-muted);font-family:var(--font-grotesk);font-size:var(--t--1);
  font-weight:500;letter-spacing:var(--tr-label);line-height:var(--lh-ui);text-transform:uppercase;}
.label-ink{color:var(--ink);}
.label-accent{color:var(--accent);}
.display{font-family:var(--font-grotesk);font-size:var(--t-display);font-weight:600;
  letter-spacing:var(--tr-display);line-height:var(--lh-tight);text-transform:uppercase;}
.title{font-family:var(--font-grotesk);font-size:var(--t-page);font-weight:600;
  letter-spacing:var(--tr-display);line-height:var(--lh-tight);text-transform:uppercase;}
.subtitle{font-family:var(--font-grotesk);font-size:var(--t-3);font-weight:500;
  letter-spacing:var(--tr-tight);line-height:var(--lh-snug);}
.lead{font-family:var(--font-serif);font-size:var(--t-2);letter-spacing:-.01em;
  line-height:1.35;max-width:30ch;text-wrap:balance;}
.caption{color:var(--ink-muted);font-family:var(--font-grotesk);font-size:var(--t--1);
  letter-spacing:.02em;line-height:var(--lh-ui);}
.headnote{display:block;margin-bottom:var(--u3);}
.muted{color:var(--ink-muted);}

.prose{max-width:var(--measure);}
.prose>*+*{margin-top:var(--u3);}
.prose p,.prose li{font-family:var(--font-serif);font-size:var(--t-1);
  line-height:var(--lh-body);text-wrap:pretty;}
.prose em{font-style:italic;}
.prose strong,.prose h3{font-weight:600;}
.prose h3{font-family:var(--font-grotesk);font-size:var(--t-0);letter-spacing:var(--tr-label);
  margin-top:var(--u6);text-transform:uppercase;}
.prose ul{display:grid;row-gap:var(--u2);}
.prose ul li{padding-left:var(--u4);position:relative;}
.prose ul li:before{border-top:1px solid var(--accent);content:"";left:0;position:absolute;
  top:.7em;width:var(--u3);}
.link,.prose a{background-image:linear-gradient(var(--accent-alt),var(--accent-alt));
  background-position:0 100%;background-repeat:no-repeat;background-size:100% 1px;
  color:inherit;padding-bottom:1px;text-decoration:none;
  transition:background-size .15s ease,color .15s ease;}
.link:hover,.prose a:hover{background-size:100% 2px;color:var(--accent-alt);}

/* ============================================================
   MASTHEAD BAR
   ============================================================ */
.masthead-bar{background:var(--paper);border-bottom:1px solid var(--rule-strong);
  position:sticky;top:0;z-index:100;}
.bar{align-items:baseline;display:flex;gap:var(--u6);justify-content:space-between;
  padding-block:var(--u2);}
.wordmark{color:var(--ink);font-family:var(--font-grotesk);font-size:var(--t--1);
  font-weight:600;letter-spacing:var(--tr-wide);text-decoration:none;
  text-transform:uppercase;white-space:nowrap;}
.nav{display:flex;gap:var(--u4);margin-left:auto;}
.nav-item{align-items:baseline;border-bottom:1px solid transparent;color:var(--ink);
  display:flex;font-family:var(--font-grotesk);font-size:var(--t--1);font-weight:500;
  gap:var(--u);letter-spacing:var(--tr-label);padding-bottom:2px;text-decoration:none;
  text-transform:uppercase;transition:border-color .15s ease,color .15s ease;}
.nav-item:hover{border-bottom-color:var(--ink);}
.nav-item.router-link-active{border-bottom-color:var(--accent);color:var(--accent);}
.bar-end{text-decoration:none;transition:color .15s ease;white-space:nowrap;}
.bar-end:hover{color:var(--accent-alt);}
.theme-toggle{color:var(--ink-muted);font-size:var(--t-0);line-height:1;padding:0;
  transition:color .15s ease;}
.theme-toggle:hover{color:var(--accent-alt);}
.burger{display:none;}

@media(max-width:900px){
  .nav,.bar-end{display:none;}
  .theme-toggle{margin-left:auto;margin-right:var(--u4);}
  .burger{display:flex;flex-direction:column;gap:6px;height:28px;justify-content:center;
    margin-block:-4px;width:28px;-webkit-tap-highlight-color:transparent;}
  .bar-line{background:var(--ink);display:block;height:1px;width:28px;
    transition:transform .22s ease,opacity .2s ease;}
  .burger.open .bar-line:nth-child(2){transform:translateY(3.5px) rotate(45deg);}
  .burger.open .bar-line:nth-child(3){transform:translateY(-3.5px) rotate(-45deg);}
  .drawer{background:var(--paper);inset:0;opacity:0;padding-top:var(--u16);
    pointer-events:none;position:fixed;transition:opacity .2s ease;z-index:90;}
  .drawer.open{opacity:1;pointer-events:auto;}
  .drawer-link{align-items:baseline;border-bottom:1px solid var(--rule);color:var(--ink);
    display:flex;font-family:var(--font-grotesk);font-size:var(--t-3);font-weight:500;
    gap:var(--u3);letter-spacing:var(--tr-display);padding-block:var(--u3);
    text-decoration:none;text-transform:uppercase;}
  .drawer-link.router-link-active{color:var(--accent);}
}
@media(min-width:901px){ .drawer{display:none;} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{border-top:1px solid var(--rule-strong);padding-block:var(--u8) var(--u12);}
.section-head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);padding-bottom:var(--u6);}
.section-head .label:first-child{color:var(--paper);grid-column:span 5;justify-self:start;
  padding:.35em .6em .3em;}
.section:nth-of-type(3n+1) .section-head .label:first-child{background:var(--accent-third);}
.section:nth-of-type(3n+2) .section-head .label:first-child{background:var(--accent);}
.section:nth-of-type(3n+3) .section-head .label:first-child{background:var(--accent-alt);}
.section-head .label:last-child:not(:first-child){grid-column:10/-1;text-align:right;}
.section-title{margin-bottom:var(--u6);}
@media(max-width:900px){
  .section{padding-block:var(--u6) var(--u8);}
  .section-head{padding-bottom:var(--u4);}
  .section-head .label:first-child{grid-column:span 4;}
  .section-head .label:last-child:not(:first-child){grid-column:5/-1;}
}
@media(max-width:600px){
  .section-head .label:first-child{grid-column:1/-1;}
  .section-head .label:last-child:not(:first-child){grid-column:1/-1;margin-top:var(--u);
    text-align:left;}
}

/* ============================================================
   MASTHEAD (hero)
   ============================================================ */
.masthead{display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:var(--u8) var(--u4);}
.masthead .masthead-lead{margin-top:var(--u6);}
@media(min-width:901px){ .masthead{min-height:24rem;} }

.home-masthead{justify-content:flex-start;padding-block:var(--u6) var(--u8);}
.home-masthead .headnote{color:var(--accent-alt);}
.masthead-grid{align-items:start;container-type:inline-size;}
.statement{font-family:var(--font-grotesk);font-size:clamp(var(--t-3),4.4vw,var(--t-5));
  font-weight:500;letter-spacing:var(--tr-display);line-height:1.08;text-wrap:balance;}
@media(min-width:901px){
  .statement{font-size:clamp(var(--t-6),8.5cqw,var(--t-7));line-height:var(--lh-tight);
    text-wrap:pretty;}
}
.portrait img{aspect-ratio:3/4;filter:grayscale(1) contrast(1.05);object-fit:cover;width:100%;}
@media(max-width:900px){ .home-masthead .portrait{margin-top:var(--u2);} }

/* about */
.page-about .masthead{position:relative;}
.masthead-foot{align-items:start;margin-top:var(--u6);}
.page-about .portrait img{aspect-ratio:4/5;}
.page-about .section-title{margin-bottom:var(--u8);}
.question{display:inline-block;}
@media(max-width:900px){
  .page-about .masthead{padding-block:var(--u6) var(--u8);}
  .page-about .masthead-foot{row-gap:var(--u4);}
  .page-about .portrait{margin-bottom:var(--u4);order:-1;}
}

/* portfolio */
.page-portfolio .masthead-lead{max-width:42ch;}
@media(max-width:900px){
  .page-portfolio .masthead{padding-block:var(--u6) var(--u8);}
  .page-portfolio .masthead-lead{max-width:none;}
}

/* island */
.page-island .section-title{margin-bottom:var(--u8);}
.page-island .group-label,.page-island .instagram-index{margin-top:var(--u8);}
.page-island .group-label{margin-bottom:var(--u3);}
.projects-line{max-width:none;}
@media(max-width:900px){ .page-island .masthead{padding-block:var(--u6) var(--u8);} }

/* ============================================================
   DATA TABLE
   ============================================================ */
.record{margin-top:var(--u12);}
.record-label{margin-bottom:var(--u3);}
.data{border:1px solid var(--rule-strong);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));}
.data-row{border-left:1px solid var(--rule);border-top:1px solid var(--rule);padding:var(--u3);}
.data-row:nth-child(-n+4){border-top:0;}
.data-row:nth-child(4n+1){border-left:0;}
.data-row:last-child:nth-child(4n+1){grid-column:span 4;}
.data-row:last-child:nth-child(4n+2){grid-column:span 3;}
.data-row:last-child:nth-child(4n+3){grid-column:span 2;}
.data-figure{font-family:var(--font-grotesk);font-size:var(--t-3);
  font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:var(--tr-display);
  line-height:1;}
.data-label{color:var(--ink-muted);font-family:var(--font-serif);font-size:var(--t-0);
  line-height:var(--lh-body);margin-top:var(--u2);max-width:34ch;}
@media(max-width:1200px){
  .data{grid-template-columns:repeat(2,minmax(0,1fr));}
  .data-row:nth-child(-n+4){border-top:1px solid var(--rule);}
  .data-row:nth-child(4n+1){border-left:1px solid var(--rule);}
  .data-row:nth-child(-n+2){border-top:0;}
  .data-row:nth-child(odd){border-left:0;}
  .data-row:last-child:nth-child(4n+1),
  .data-row:last-child:nth-child(4n+2),
  .data-row:last-child:nth-child(4n+3){grid-column:auto;}
  .data-row:last-child:nth-child(odd){grid-column:span 2;}
}
@media(max-width:560px){
  .data{grid-template-columns:1fr;}
  .data-row:last-child:nth-child(n){grid-column:auto;}
  .data-row:nth-child(n){border-left:0;border-top:1px solid var(--rule);}
  .data-row:first-child{border-top:0;}
}
/* mobile progressive disclosure */
.record-toggle{display:none;}
@media(max-width:560px){
  .record .record-extra{display:none;}
  .record-open .record-extra{display:block;}
  .record-toggle{border-bottom:1px solid var(--rule-strong);color:var(--ink);
    display:block;margin-top:var(--u3);padding:var(--u2) 0;text-align:left;width:100%;}
  .record-toggle:after{content:" \2193";}
  .record-open .record-toggle:after{content:" \2191";}
  .record-toggle:hover{border-bottom-color:var(--accent-alt);color:var(--accent-alt);}
}

/* ============================================================
   CLIENT ROW
   ============================================================ */
.clients{margin-top:var(--u12);}
.client-row{align-items:flex-start;display:flex;flex-wrap:nowrap;gap:var(--u8);
  margin-top:var(--u4);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;}
.client-row::-webkit-scrollbar{display:none;}
.client{align-items:flex-start;display:flex;flex:0 0 auto;flex-direction:column;}
.client-mark{align-items:flex-end;display:flex;height:56px;
  font-family:var(--font-grotesk);font-size:var(--t-2);font-weight:500;
  letter-spacing:var(--tr-tight);}
.client-mark img{transition:filter .2s ease;width:auto;}
.client-mark:hover img,.client-mark:focus-visible img{filter:contrast(1.12);}
.client-name{color:var(--ink-muted);margin-top:var(--u2);max-width:22ch;}
.clients-tools{margin-top:var(--u8);}
.client-mark img{display:block;max-height:56px;}
.client-hint{margin-top:var(--u2);}
/* Employers on one line, school and certificates on the next; a swipe row only on phones. */
@media(min-width:601px){
  .client-grid{column-gap:var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;row-gap:var(--u6);}
  .client-grid .client-mark img{max-width:100%;object-fit:contain;object-position:left bottom;}
  .client-swipe{display:none;}
}

/* ============================================================
   INDEX ROWS
   ============================================================ */
.index{border-top:1px solid var(--rule);}
.index-row{align-items:baseline;border-bottom:1px solid var(--rule);color:inherit;
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);padding-block:var(--u4);text-decoration:none;
  transition:background-color .18s ease,padding-inline .18s ease;}
.index-row:hover{background:var(--paper-sunk);padding-inline:var(--u2);}
.index-num{color:var(--ink-muted);font-family:var(--font-grotesk);font-size:var(--t--1);
  font-variant-numeric:tabular-nums;font-weight:500;grid-column:1/2;
  letter-spacing:var(--tr-label);}
.index-name{font-family:var(--font-grotesk);font-size:var(--t-2);font-weight:500;
  grid-column:2/6;letter-spacing:var(--tr-tight);line-height:var(--lh-snug);}
.index-name-sm{font-size:var(--t-1);}
.index-desc{color:var(--ink-muted);font-family:var(--font-serif);font-size:var(--t-0);
  grid-column:6/10;line-height:var(--lh-body);}
.index-meta{color:var(--ink-muted);font-family:var(--font-grotesk);font-size:var(--t--1);
  grid-column:10/12;letter-spacing:var(--tr-label);text-align:right;text-transform:uppercase;}
.index-arrow{color:var(--accent-alt);font-family:var(--font-grotesk);font-size:var(--t-0);
  grid-column:12/-1;justify-self:end;opacity:0;transform:translate(-4px);
  transition:opacity .18s ease,transform .18s ease;}
.index-row:hover .index-arrow{opacity:1;transform:translate(0);}
.case-thumb{align-self:center;aspect-ratio:2/1;background:var(--paper-sunk);display:block;
  grid-column:9/-1;outline:1px solid var(--rule);overflow:hidden;}
/* Screenshots show in full colour; hovering the row leans in a little. */
.case-thumb img{height:100%;object-fit:cover;transition:transform .35s ease;width:100%;}
.index-row:hover .case-thumb img{transform:scale(1.03);}
/* Rows with a thumbnail: the image sits at the right and the text is centred on it.
   The status label moves under the name so nothing competes with the image's columns
   and pushes it onto a second grid row. */
@media(min-width:901px){
  .index-row:has(.case-thumb){align-items:center;grid-template-rows:auto auto;}
  .index-row:has(.case-thumb) .index-num{grid-row:1/3;}
  .index-row:has(.case-thumb) .index-name{align-self:end;grid-column:2/5;grid-row:1;}
  .index-row:has(.case-thumb) .index-meta{align-self:start;grid-column:2/5;grid-row:2;
    margin-top:var(--u);text-align:left;}
  .index-row:has(.case-thumb) .index-desc,
  .index-row:has(.case-thumb) .case-lines{grid-column:5/9;grid-row:1/3;}
  .index-row:has(.case-thumb) .case-thumb{grid-row:1/3;}
  /* Portfolio rows have no status label under the name, so the name centres on its own. */
  .index-row:has(.case-thumb):not(:has(.index-meta)) .index-name{align-self:center;grid-row:1/3;}
}
.index-row:has(.case-thumb) .index-arrow{display:none;}
/* Reference rule (home-scoped CSS): without it, 9/-1 on the 6-column mobile grid
   adds implicit tracks and collapses the real columns to zero width. */
@media(max-width:900px){ .case-thumb{grid-column:2/-1;margin-top:var(--u2);max-width:220px;} }
@media(max-width:900px){
  .index-row{padding-block:var(--u3);row-gap:var(--u);}
  .index-num{grid-column:1/2;}
  .index-name,.index-desc,.index-meta{grid-column:2/-1;}
  .index-meta{text-align:left;}
  .index-arrow{display:none;}
}
.more{display:inline-block;font-family:var(--font-grotesk);font-size:var(--t--1);
  font-weight:500;letter-spacing:var(--tr-label);margin-top:var(--u4);text-transform:uppercase;}
.group+.group{margin-top:var(--u12);}
.group-label{margin-bottom:var(--u3);}
.case-lines{color:var(--ink-muted);display:grid;font-family:var(--font-serif);
  font-size:var(--t-0);grid-column:6/12;line-height:var(--lh-body);row-gap:var(--u);}
.case-line{display:block;}
@media(max-width:900px){ .case-lines{grid-column:2/-1;} }
@media(max-width:600px){ .case-lines{grid-column:1/-1;} }

/* ============================================================
   REGISTER (testimonials)
   ============================================================ */
.register{border-top:1px solid var(--rule-strong);}
.register-item{border-bottom:1px solid var(--rule);column-gap:var(--u3);display:grid;
  grid-template-columns:auto 1fr;padding-block:var(--u3);row-gap:2px;text-align:left;
  transition:color .15s ease;width:100%;}
.register-num{color:var(--ink-muted);font-family:var(--font-grotesk);font-size:var(--t--1);
  grid-row:span 2;letter-spacing:var(--tr-label);}
.register-name{font-family:var(--font-grotesk);font-size:var(--t-2);font-weight:500;
  letter-spacing:var(--tr-tight);line-height:var(--lh-snug);}
.register-role{color:var(--ink-muted);font-family:var(--font-serif);font-size:var(--t-0);}
.register-item[aria-selected=true]{color:var(--accent);}
.register-item[aria-selected=true] .register-num{color:var(--accent);}
.quote{margin-top:var(--u6);}
.quote p{font-family:var(--font-serif);font-size:var(--t-2);letter-spacing:-.01em;
  line-height:1.35;max-width:46ch;text-wrap:balance;}
.quote cite{color:var(--ink-muted);display:block;font-family:var(--font-grotesk);
  font-size:var(--t--1);font-style:normal;font-weight:500;letter-spacing:var(--tr-label);
  margin-top:var(--u3);text-transform:uppercase;}

/* ============================================================
   FIGURES / GALLERIES
   ============================================================ */
.figure{display:block;}
.figure img{border:1px solid var(--rule);height:auto;mix-blend-mode:multiply;width:100%;}
.figure .caption,.figure figcaption{margin-top:var(--u2);max-width:52ch;}
.figure .caption-wide{max-width:none;}
.caption-note{display:block;}
.figure-duo{display:grid;gap:var(--gutter);grid-template-columns:1fr 1fr;}
@media(max-width:600px){ .figure-duo{grid-template-columns:1fr;} }
.filmstrip{display:flex;gap:var(--gutter);overflow-x:auto;padding-bottom:var(--u2);
  scroll-snap-type:x mandatory;scrollbar-color:var(--rule) transparent;scrollbar-width:thin;}
.filmstrip figure{aspect-ratio:3/2;background:var(--paper-sunk);flex:0 0 auto;
  overflow:hidden;scroll-snap-align:start;width:clamp(220px,26vw,340px);}
.filmstrip img{height:100%;object-fit:cover;width:100%;}
/* Previous/next buttons added by app.js under any sideways-scrolling row. */
.scroll-controls{align-items:center;display:flex;gap:var(--u);justify-content:flex-end;margin-top:var(--u2);}
.scroll-controls[hidden]{display:none;}
.scroll-controls .client-hint{margin:0 auto 0 0;}
.scroll-btn{align-items:center;background:transparent;border:1px solid var(--rule-strong);
  border-radius:50%;color:var(--ink);cursor:pointer;display:inline-flex;font-family:var(--font-grotesk);
  font-size:var(--t-0);height:2.5rem;justify-content:center;line-height:1;padding:0;width:2.5rem;
  transition:border-color .18s ease,color .18s ease,opacity .18s ease;}
.scroll-btn:hover:not(:disabled){border-color:var(--accent-alt);color:var(--accent-alt);}
.scroll-btn:disabled{cursor:default;opacity:.3;}
.gallery figure{aspect-ratio:auto;background:none;height:clamp(240px,30vw,380px);width:auto;}
.gallery img{height:100%;object-fit:contain;width:auto;}

/* about catalogue */
.catalogue{border-top:1px solid var(--rule-strong);column-gap:var(--gutter);display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));}
.cat-col{border-right:1px solid var(--rule);padding-right:var(--u2);padding-top:var(--u3);}
.cat-col:last-child{border-right:0;padding-right:0;}
.cat-head{margin-bottom:var(--u3);}
.cat-list{display:grid;font-family:var(--font-serif);font-size:var(--t-0);line-height:1.35;
  row-gap:var(--u2);}
@media(max-width:1100px){
  .catalogue{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--u6);}
  .cat-col:nth-child(2n){border-right:0;padding-right:0;}
}
@media(max-width:600px){
  .catalogue{grid-template-columns:1fr;}
  .cat-col{border-right:0;border-top:1px solid var(--rule);padding-right:0;}
  .cat-col:first-child{border-top:0;}
}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-head{padding-block:var(--u8) var(--u16);}
.folio{border-bottom:1px solid var(--rule-strong);display:flex;gap:var(--u3);
  justify-content:space-between;padding-bottom:var(--u3);}
.folio-link{text-decoration:none;}
.folio-link:hover{color:var(--accent-alt);}
.case-title{display:grid;font-size:var(--t-case);letter-spacing:var(--tr-label);padding-top:var(--u6);}
/* Single-word case titles (LetterStudio, Vetlog) use a smaller size with wider tracking. */
.case-title-long{font-size:clamp(var(--t-4),7.5vw,var(--t-7));overflow-wrap:anywhere;}
.case-tagline{color:var(--accent-alt);margin-top:var(--u6);max-width:34ch;}
.credits{border-top:1px solid var(--rule);margin-top:var(--u8);}
.credit-row{align-items:baseline;border-bottom:1px solid var(--rule);
  column-gap:var(--gutter);display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));padding-block:var(--u2);}
.credit-row dt{grid-column:span 2;}
.credit-value{font-family:var(--font-serif);font-size:var(--t-0);grid-column:3/-1;
  line-height:var(--lh-body);}
@media(max-width:900px){
  .case-head{padding-block:var(--u6) var(--u8);}
  .case-title{padding-top:var(--u4);}
  .case-tagline{max-width:none;}
  .credit-row dt,.credit-value{grid-column:1/-1;}
  .credit-value{margin-top:2px;}
}
@media(max-width:600px){ .folio span{display:none;} }

.banner{margin-block:var(--u6) 0;margin-inline:calc(var(--margin)*-1);
  width:calc(100% + var(--margin)*2);}
.banner img{aspect-ratio:4/1;border:0;mix-blend-mode:multiply;object-fit:cover;width:100%;}
.banner-caption{margin-top:var(--u2);padding-inline:var(--margin);}
@media(max-width:900px){ .banner{margin-block:var(--u4) 0;} }
.banner-logo{border:1px solid var(--rule);border-radius:6px;margin-inline:0;width:100%;}
.banner-logo img{height:clamp(180px,26vw,300px);mix-blend-mode:normal;object-fit:contain;width:100%;}
.banner-photo{border:1px solid var(--rule);border-radius:6px;margin-inline:0;width:100%;}
.banner-photo img{height:clamp(260px,38vw,440px);mix-blend-mode:normal;object-fit:cover;object-position:center top;width:100%;}

.glance{padding-bottom:var(--u12);}
.glance-label{margin-bottom:var(--u3);}
@media(max-width:900px){ .glance{padding-bottom:var(--u8);} }

.cs{border-top:1px solid var(--rule);column-gap:var(--gutter);display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));padding-block:var(--u8);row-gap:0;}
.cs-head{align-items:baseline;align-self:start;display:flex;gap:var(--u2);
  grid-column:1/span 3;position:sticky;top:var(--u12);}
.cs-num{color:var(--accent);font-variant-numeric:tabular-nums;}
.cs-title{font-family:var(--font-grotesk);font-size:var(--t-0);font-weight:600;
  letter-spacing:var(--tr-label);line-height:var(--lh-ui);text-transform:uppercase;}
.cs-body{grid-column:5/span 7;}
.cs-body .data,.cs-body .figure,.cs-body .figure-duo,.cs-body .filmstrip,.cs-body .scroll-controls{
  max-width:none;width:calc(var(--col-w)*8 + var(--gutter)*7);}
.cs-body .figure-duo .figure{width:100%;}
@media(max-width:900px){
  .cs{padding-block:var(--u6);}
  .cs-head{margin-bottom:var(--u3);position:static;}
  .cs-head,.cs-body{grid-column:1/-1;}
  .cs-body .data,.cs-body .figure,.cs-body .figure-duo,
  .cs-body .figure-duo .figure,.cs-body .filmstrip,.cs-body .scroll-controls{width:100%;}
}

.embed{align-items:baseline;border:1px solid var(--rule-strong);color:inherit;display:grid;
  gap:var(--u) var(--u3);grid-template-columns:1fr auto;margin-block:var(--u6);
  padding:var(--u3);text-decoration:none;transition:background-color .18s ease;}
.embed:hover{background:var(--paper-sunk);}
/* The card sits inside .prose, so undo the prose link underline and its 1px padding. */
.prose .embed{background-image:none;padding:var(--u3);}
.embed-source{color:var(--ink-muted);grid-column:1/-1;}
.embed-title{color:var(--accent-alt);font-family:var(--font-serif);font-size:var(--t-1);
  line-height:var(--lh-snug);}
.embed-go{color:var(--ink-muted);white-space:nowrap;}
.embed:hover .embed-go{color:var(--accent-alt);}
@media(max-width:600px){ .embed{grid-template-columns:1fr;} }

.case-foot{align-items:flex-end;border-top:1px solid var(--rule-strong);display:flex;
  gap:var(--u6);justify-content:space-between;padding-block:var(--u6) var(--u8);}
.foot-side{text-decoration:none;}
.foot-side:hover{color:var(--accent-alt);}
.foot-next{color:var(--ink);display:grid;row-gap:var(--u);text-align:right;
  text-decoration:none;}
.foot-next-name{font-family:var(--font-grotesk);font-size:var(--t-3);font-weight:500;
  letter-spacing:var(--tr-display);line-height:var(--lh-snug);transition:color .15s ease;}
.foot-next:hover .foot-next-name{color:var(--accent-alt);}
@media(max-width:600px){
  .case-foot{align-items:flex-start;flex-direction:column;gap:var(--u4);}
  .foot-next{text-align:left;}
}

/* ============================================================
   CONTACT
   ============================================================ */
.panel{border-top:1px solid var(--rule-strong);padding-block:var(--u6) var(--u4);}
.col-label{margin-bottom:var(--u3);}
.col-note{color:var(--ink-muted);font-family:var(--font-serif);font-size:var(--t-0);
  line-height:var(--lh-body);margin-bottom:var(--u2);max-width:30ch;}
.email{border-bottom:1px solid var(--rule);color:var(--ink);display:inline-block;
  font-family:var(--font-grotesk);font-size:var(--t-2);font-weight:500;
  letter-spacing:var(--tr-tight);overflow-wrap:anywhere;text-decoration:none;
  transition:color .15s ease,border-color .15s ease;}
.email:hover{border-bottom-color:var(--accent-alt);color:var(--accent-alt);}
.stack{display:grid;row-gap:var(--u3);}
.stack-name{color:var(--ink);display:block;font-family:var(--font-grotesk);
  font-size:var(--t-0);font-weight:600;letter-spacing:var(--tr-tight);}
.stack-desc{color:var(--ink-muted);display:block;font-family:var(--font-serif);
  font-size:var(--t-0);line-height:1.45;margin-top:2px;}
.social{color:inherit;text-decoration:none;}
.social:hover .stack-name{color:var(--accent-alt);}
@media(max-width:900px){
  .panel{padding-block:var(--u6) var(--u4);}
  .grid>.c-4+.c-4{margin-top:var(--u8);}
}

/* inline code inside prose (project pages) */
.prose code{background:var(--paper-sunk);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.86em;overflow-wrap:anywhere;padding:0 .25em;}

/* ============================================================
   RESUME
   Same type roles as the rest of the site; single column at the
   measure so it prints on letter/A4 without reflowing.
   ============================================================ */
.cv{max-width:calc(var(--measure) + 12rem);padding-block:var(--u8) 0;}
.cv-actions{display:flex;flex-wrap:wrap;gap:var(--u2) var(--u4);justify-content:space-between;}
.cv-actions .more{margin-top:0;}
.cv-name{padding-top:var(--u6);}
.cv-position{margin-top:var(--u3);max-width:40ch;}
.cv-contact{column-gap:var(--u2);display:flex;flex-wrap:wrap;font-family:var(--font-serif);
  font-size:var(--t-0);margin-top:var(--u3);row-gap:var(--u);}
.cv-contact a{overflow-wrap:anywhere;}
.cv-section{border-top:1px solid var(--rule-strong);margin-top:var(--u6);padding-top:var(--u3);}
.cv-label{margin-bottom:var(--u3);}
.cv-text{font-family:var(--font-serif);font-size:var(--t-1);line-height:var(--lh-body);max-width:var(--measure);}
.cv-skills{display:grid;row-gap:var(--u);}
.cv-skill{column-gap:var(--gutter);display:grid;grid-template-columns:12rem minmax(0,1fr);}
.cv-skill dd{font-family:var(--font-serif);font-size:var(--t-1);line-height:var(--lh-body);}
.cv-entry+.cv-entry{margin-top:var(--u4);}
.cv-entry-head{align-items:baseline;column-gap:var(--u3);display:flex;flex-wrap:wrap;
  justify-content:space-between;row-gap:var(--u);}
.cv-entry-title{font-size:var(--t-1);font-weight:600;}
.cv-role{color:var(--ink-muted);font-weight:500;}
.cv-when{white-space:nowrap;}
.cv-when .link{text-transform:none;letter-spacing:.02em;}
.cv-entry .cv-text{margin-top:var(--u);}
.cv-points{display:grid;margin-top:var(--u2);row-gap:var(--u);}
.cv-points li{font-family:var(--font-serif);font-size:var(--t-1);line-height:var(--lh-body);
  max-width:var(--measure);padding-left:var(--u4);position:relative;}
.cv-points li:before{border-top:1px solid var(--accent);content:"";left:0;position:absolute;
  top:.7em;width:var(--u3);}
@media(max-width:600px){
  .cv-skill{grid-template-columns:1fr;row-gap:2px;}
  .cv-when{white-space:normal;}
}

@page{margin:.4in .6in;}
@media print{
  :root,:root[data-theme=dark]{--paper:#fff;--paper-sunk:#fff;--ink:#000;--ink-muted:#444;
    --rule:#bbb;--rule-strong:#000;--accent:#000;--accent-alt:#000;}
  html,body{background:#fff!important;}
  body{background-image:none!important;font-size:10pt;text-shadow:none;}
  .masthead-bar,.drawer,.colophon,.cv-actions{display:none!important;}
  .page{max-width:none;padding-inline:0;}
  .cv{max-width:none;padding-top:0;}
  /* Letter-spacing makes PDF text extract as "SUMMAR Y"; resume parsers read that text. */
  .cv *{letter-spacing:0!important;text-shadow:none;}
  .cv-name{font-size:22pt;padding-top:0;}
  .cv-position{font-size:11.5pt;margin-top:4pt;max-width:none;}
  .cv-contact,.cv-text,.cv-skill dd,.cv-points li{font-size:9.5pt;line-height:1.4;max-width:none;}
  .cv-contact{margin-top:4pt;}
  .cv-section{margin-top:9pt;padding-top:5pt;}
  .cv-label{margin-bottom:4pt;}
  .cv-skills{row-gap:1pt;}
  .cv-entry{break-inside:avoid;}
  .cv-entry+.cv-entry{margin-top:6pt;}
  .cv-entry .cv-text{margin-top:1pt;}
  .cv-points{margin-top:2pt;row-gap:1pt;}
  .link{background-image:none;padding-bottom:0;}
}

/* legacy URL redirect stub */
.moved{padding-block:var(--u12);}
.moved .lead{margin-top:var(--u3);}

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon{border-top:1px solid var(--rule-strong);margin-top:var(--u16);
  padding-block:var(--u8) var(--u6);}
.colophon .label{margin-bottom:var(--u2);}
.colophon-note{color:var(--ink-muted);font-family:var(--font-serif);font-size:var(--t-0);
  line-height:var(--lh-body);max-width:34ch;}
.colophon-note+.colophon-note{margin-top:var(--u2);}
.colophon-list{display:grid;font-family:var(--font-serif);font-size:var(--t-0);
  justify-items:start;line-height:var(--lh-ui);row-gap:var(--u);}
/* justify-items:start keeps each link as wide as its text, so its underline is too
   (a stretched grid item drew a 336px rule under "GitHub"). */
@media(max-width:900px){
  .colophon{margin-top:var(--u12);}
  .colophon .c-4+.c-4{margin-top:var(--u6);}
}


/* ============================================================
   DARK-MODE IMAGE HANDLING
   ============================================================ */
:root[data-theme=dark] .figure img,
:root[data-theme=dark] .filmstrip img,
:root[data-theme=dark] .case-thumb img,
:root[data-theme=dark] .banner img,
:root[data-theme=dark] .client img{mix-blend-mode:normal;}
:root[data-theme=dark] .client img{filter:brightness(0) invert(1);}
:root[data-theme=dark] .client-mark:hover img,
:root[data-theme=dark] .client-mark:focus-visible img{
  filter:brightness(0) invert(1) opacity(.75);}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

/* Ink-on-white line art (concept diagrams, abstract plates). Light mode already
   multiplies white into the paper; dark mode disables that blend for photos, so
   invert these instead and screen them onto the dark paper. Doubled class wins
   over the hover filters on .case-thumb without !important. */
:root[data-theme=dark] img.ink-art.ink-art{filter:invert(1) grayscale(1) contrast(1.05);mix-blend-mode:screen;}

/* Contribution pages include long evidence links and repository identifiers. */
.credit-value,.cv-when .link{overflow-wrap:anywhere;}
.cv-label{break-after:avoid;}
@media print{.cv-contact,.cv-text,.cv-skill dd,.cv-points li{font-size:10pt;}}

.codex-art{margin-inline:0;}
.codex-art img{aspect-ratio:16/9;object-fit:contain;mix-blend-mode:normal;}