/* Joris Rombouts — portfolio
   All design lives in this file. Changing the look means editing :root below. */

@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* colour — "Bone" neutral, indigo accent */
  --bg:        #f4f4f2;
  --surface:   #ffffff;
  --ink:       #17181a;   /* headings */
  --ink-b:     #33363a;   /* body copy */
  --ink-m:     #52555a;   /* labels, chips, section labels */
  --ink-f:     #6b6f74;   /* dates, footer, counts — lightest permitted (4.58:1 on --bg) */
  --rule:      rgba(23,24,26,.13);
  --chip-bg:   rgba(23,24,26,.08);
  --accent:    #4a56a8;

  /* type */
  --serif: "Newsreader", Georgia, serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* row header gutter */
  --gut: clamp(12px,2.5vw,22px);
}

@supports (interpolate-size: allow-keywords){ :root{ interpolate-size: allow-keywords; } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
}

a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--ink) }
::selection{ background:var(--accent); color:var(--bg) }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

main{
  max-width:920px;
  margin:0 auto;
  padding:clamp(20px,4vw,44px) clamp(20px,5vw,64px) clamp(48px,8vw,84px);
}

/* ---------- intro ---------- */

.intro{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,4vw,36px);
  align-items:flex-start;
  animation:rise .6s ease backwards;
}

.shot{
  flex:none;
  width:clamp(96px,16vw,132px);
  height:clamp(96px,16vw,132px);
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--rule);
  background:var(--chip-bg);
}

.intro-body{ flex:1 1 300px; min-width:280px }

h1{
  margin:0 0 10px;
  font-weight:400;
  font-size:clamp(34px,5.6vw,46px);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--accent);
}

.role{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-m);
  margin-bottom:clamp(14px,2.5vw,20px);
}

.lede{
  margin:0;
  max-width:52ch;
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.6;
  color:var(--ink-b);
  text-wrap:pretty;
}
.lede + .lede{ margin-top:1.05em }

.hero-links{
  display:flex;
  flex-wrap:wrap;
  gap:4px 24px;
  margin-top:clamp(8px,1.5vw,14px);
  font-size:15.5px;
}
.hero-links a{ display:inline-flex; align-items:center; min-height:44px }
.hero-links a span{
  border-bottom:1px solid color-mix(in oklch, var(--accent) 34%, transparent);
  padding-bottom:2px;
}

/* ---------- filter ---------- */

.filter{
  margin-top:clamp(38px,6vw,60px);
  padding-top:20px;
  border-top:1px solid var(--rule);
  animation:rise .6s .08s ease backwards;
}

.filter-head{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:16px;
}

.filter-label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-m);
}

.count{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-m);
}

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  font-size:clamp(15.5px,1.8vw,17px);
  line-height:1.4;
}

.filter-row button{
  font:inherit;
  font-family:var(--serif);
  color:var(--ink-b);
  background:none;
  border:0;
  margin:0;
  padding:0 0 3px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .2s;
}
.filter-row button span{
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
}
.filter-row button[aria-pressed="true"]{ color:var(--ink) }
.filter-row button[aria-pressed="true"] span{ border-bottom:2px solid var(--accent) }
.filter-row sup{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-m);
}

/* ---------- project list ---------- */

.projects{ margin-top:clamp(30px,5vw,46px); counter-reset:p }

article{
  counter-increment:p;
  display:grid;
  grid-template-rows:1fr;
  opacity:1;
  animation:rise .5s ease backwards;
  transition:grid-template-rows .44s cubic-bezier(.4,0,.2,1),
             opacity .44s ease,
             visibility 0s;
}
article.off{
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
  transition:grid-template-rows .44s cubic-bezier(.4,0,.2,1),
             opacity .44s ease,
             visibility 0s .44s;
}

article:nth-child(1){ animation-delay:.12s }
article:nth-child(2){ animation-delay:.17s }
article:nth-child(3){ animation-delay:.22s }
article:nth-child(4){ animation-delay:.27s }
article:nth-child(5){ animation-delay:.32s }
article:nth-child(6){ animation-delay:.37s }
article:nth-child(7){ animation-delay:.42s }
article:nth-child(8){ animation-delay:.47s }
article:nth-child(9){ animation-delay:.52s }
article:nth-child(n+10){ animation-delay:.57s }

article > details{
  min-height:0;
  overflow:clip;
  overflow-clip-margin:4px;   /* so a focus ring is never clipped */
  border-top:1px solid var(--rule);
}

summary{
  list-style:none;
  cursor:pointer;
  padding:20px 0 17px;
  display:grid;
  align-items:start;
  column-gap:var(--gut);
  grid-template-columns:26px minmax(0,1fr) auto 22px;
  grid-template-areas:
    "num title date tog"
    "num chips .    ."
    "num claim .    .";
}
summary::-webkit-details-marker{ display:none }
summary::marker{ content:"" }

.num{
  grid-area:num;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  color:var(--ink-f);
}
.num::before{ content:counter(p,decimal-leading-zero) }

summary h2{
  grid-area:title;
  margin:0;
  font-weight:500;
  font-size:clamp(20px,2.9vw,25px);
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--accent);
}

.chips{
  grid-area:chips;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
}
.chips span{
  padding:3px 9px;
  border-radius:2px;
  background:var(--chip-bg);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.4;
  letter-spacing:.08em;
  color:var(--ink-m);
}

.claim{
  grid-area:claim;
  display:block;
  margin-top:10px;
  max-width:60ch;
  font-size:clamp(16px,1.8vw,17px);
  line-height:1.52;
  color:var(--ink-b);
  text-wrap:pretty;
}

summary time{
  grid-area:date;
  justify-self:end;
  padding-top:8px;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-f);
}

.toggle{
  grid-area:tog;
  width:22px;
  height:22px;
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:17px;
  line-height:1;
  color:var(--ink-m);
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
details[open] .toggle{ transform:rotate(45deg) }

/* ---------- expanded detail ---------- */

details::details-content{
  height:0;
  overflow:clip;
  overflow-clip-margin:4px;
  transition:height .44s cubic-bezier(.4,0,.2,1),
             content-visibility .44s allow-discrete;
}
details[open]::details-content{ height:auto }

.detail{
  padding:0 0 26px clamp(0px,4vw,48px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px 32px;
}
.detail h3{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-m);
}
.detail p{
  margin:0;
  font-size:16px;
  line-height:1.58;
  color:var(--ink-b);
  text-wrap:pretty;
}

.repo{
  grid-column:1/-1;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
}
.repo span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  padding-bottom:3px;
}
.repo .arrow{ font-family:var(--mono); font-size:12px; border:0; padding:0 }

/* ---------- footer ---------- */

footer{
  margin-top:clamp(44px,7vw,72px);
  padding-top:20px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-f);
}
footer a{ color:var(--ink-m) }
.social{ display:flex; gap:20px }

/* ---------- motion ---------- */

@keyframes rise{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}

/* ---------- narrow ---------- */

@media (max-width:699px){
  .num{ display:none }
  summary{
    grid-template-columns:minmax(0,1fr) auto 22px;
    grid-template-areas:
      "title date tog"
      "chips .    ."
      "claim .    .";
  }
  .filter-row button{ padding:11px 0 }
  footer a{ display:inline-flex; align-items:center; min-height:44px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
}