/* ==========================================================================
   Darkroom — erikwesterman.com
   Warm dark room under a safelight: toned photos, contact-sheet portfolio,
   step-wedge skill meters. Shared by index.html and every portfolio-N.html.
   ========================================================================== */

/* Self-hosted fonts (SIL Open Font License 1.1): Big Shoulders Display, (c) The Big Shoulders Project Authors;
   Libre Franklin, (c) The Libre Franklin Project Authors. Variable fonts: one file covers the weight range. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/big-shoulders-display-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/big-shoulders-display-normal-latin.woff2) format('woff2');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}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-franklin-italic-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-franklin-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-franklin-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-franklin-italic-latin.woff2) format('woff2');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}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/libre-franklin-normal-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/libre-franklin-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/libre-franklin-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/libre-franklin-normal-latin.woff2) format('woff2');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{
  --room:#1C1517; --bench:#271E21; --edge:#3A2E31; --paper:#EFE6DA; --soft:#A89A8E; --text:#E0D6C9;
  --safe:#E9A23B; --red:#C4473A;
  --d:"Big Shoulders Display",Impact,sans-serif; --b:"Libre Franklin",system-ui,sans-serif;
  --tone:linear-gradient(160deg,var(--safe),var(--red) 75%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--room);color:var(--paper);font:400 1.02rem/1.65 var(--b);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--safe)}
:focus-visible{outline:2px solid var(--safe);outline-offset:3px}
h1,h2,h3,h4,h5{font-family:var(--d);margin:0;line-height:1;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--safe);color:var(--room);padding:8px 14px}
.skip:focus{left:8px}

/* ---------- Header / navigation ---------- */
.nav{position:sticky;top:0;z-index:20;background:#1c1517eb;backdrop-filter:blur(6px);border-bottom:1px solid var(--edge)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:60px}
.nav .brand{font:800 1.4rem var(--d);letter-spacing:.02em;white-space:nowrap;color:var(--paper);text-decoration:none}
.nav nav{display:flex;margin-left:auto}
.nav nav a{color:var(--soft);text-decoration:none;font-weight:500;padding:8px 12px;white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--safe)}
.menu-toggle{display:none;margin-left:auto;font:700 1.15rem var(--d);letter-spacing:.04em;background:none;border:1px solid var(--edge);color:var(--paper);padding:6px 14px;cursor:pointer}
/* GTranslate injects an inline position:fixed switcher; keep it inside the menu instead */
.gtranslate_wrapper{display:flex;align-items:center;margin-left:8px;padding-left:12px;border-left:1px solid var(--edge)}
.gtranslate_wrapper .gt_switcher_wrapper{position:static!important;display:flex;flex-wrap:wrap;gap:2px}
.nav nav .gtranslate_wrapper a{color:var(--soft);font-size:.8rem;font-weight:500;padding:2px 3px;border:0}
.nav nav .gtranslate_wrapper a.gt-current-lang,.nav nav .gtranslate_wrapper a:hover{color:var(--safe)}
@media (max-width:900px){
  .menu-toggle{display:block}
  .nav nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--room);border-bottom:1px solid var(--edge);padding:8px 12px 16px}
  .nav.open nav{display:flex}
  .nav nav a{padding:12px;font-size:1.1rem;border-bottom:1px solid var(--edge)}
  .gtranslate_wrapper{margin:12px 0 0;padding:0 0 0 12px;border:0}
  .nav nav .gtranslate_wrapper a{font-size:.95rem;padding:6px 8px}
}
@media (max-width:420px){.nav .brand{font-size:1.2rem}}

/* ---------- Hero: a toned photo that develops into the room ---------- */
.hero{position:relative;overflow:hidden;min-height:min(88vh,820px);display:flex;align-items:flex-end}
.hero .photo{position:absolute;inset:0 0 0 auto;width:52%;margin:0;background:var(--room);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(0deg,transparent,#000 30%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(0deg,transparent,#000 30%);mask-composite:intersect}
.hero .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.35) brightness(.9);animation:develop 2.8s ease-out both}
.hero .photo::after{content:"";position:absolute;inset:0;background:var(--tone);mix-blend-mode:multiply;opacity:.95}
@keyframes develop{from{opacity:0;filter:grayscale(1) contrast(.3) brightness(2.2)}to{opacity:1}}
.hero .wrap{position:relative;width:100%;padding-top:96px;padding-bottom:72px}
.hero h1{font-size:clamp(4rem,12vw,10rem);font-weight:800;line-height:.85;text-transform:uppercase;letter-spacing:-.01em;max-width:7ch}
.hero .roles{list-style:none;margin:24px 0 0;padding:0;font:600 clamp(1.3rem,2.6vw,1.8rem)/1.25 var(--d);color:var(--safe)}
.hero .info-list{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--edge);max-width:460px;list-style:none}
.hero .info-list li{display:contents}
.hero .info-list .title{color:var(--soft)}
@media (max-width:820px){
  .hero{min-height:0;display:block}
  .hero .photo{position:relative;width:100%;height:62vh;max-height:520px;
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 45%);mask-image:linear-gradient(0deg,transparent,#000 45%)}
  .hero .wrap{margin-top:-140px;padding-top:0}
}
.social{display:flex;gap:16px;margin:24px 0 0;padding:0;list-style:none}
.social img{width:22px;height:22px;filter:invert(1) sepia(.4) brightness(.95)}

/* ---------- Sections ---------- */
section{padding:96px 0;border-top:1px solid var(--edge)}
.head{margin-bottom:48px}
.head h2{font-size:clamp(3rem,8vw,5.5rem);font-weight:800;text-transform:uppercase}
.head p{margin:8px 0 0;color:var(--soft);font-style:italic;font-size:1.05rem}
h3{font-size:1.9rem;margin-bottom:18px}
.sub-title{margin-top:72px}
@media (max-width:600px){section{padding:64px 0}.sub-title{margin-top:48px}}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1fr 1.5fr;gap:56px}
.portrait{margin:0 0 28px;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--room)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:45% 35%;filter:grayscale(1) contrast(1.3) brightness(.8)}
.portrait::after{content:"";position:absolute;inset:0;background:var(--tone);mix-blend-mode:multiply;opacity:.95}
.focus{border:1px solid var(--safe);padding:28px}
.focus p{margin:0}
.focus ul{margin:8px 0 0;padding-left:1.1em}
.focus li::marker{color:var(--safe)}
.prose p{margin:0 0 1em;max-width:66ch;color:var(--text)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 0}
.services .service{background:var(--bench);padding:24px;border-top:3px solid var(--red)}
.services img{width:40px;height:40px;margin-bottom:12px;filter:invert(1) sepia(.5) brightness(.9)}
.services h4{font-size:1.5rem;margin-bottom:6px}
.services p{margin:0;color:var(--soft);font-size:.95rem}
.clients{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:20px}
.clients a{background:var(--paper);padding:12px;display:grid;place-items:center;filter:sepia(.25);transition:filter .2s}
.clients a:hover{filter:none}
@media (max-width:860px){.about{grid-template-columns:1fr}.services{grid-template-columns:1fr 1fr}.clients{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.services{grid-template-columns:1fr}}

/* ---------- Resume ---------- */
.resume{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
.ev{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--edge)}
.ev .d{font:700 1.35rem/1.1 var(--d);color:var(--safe)}
.ev h4{font-size:1.4rem;font-weight:600}
.ev .org{color:var(--soft);font-size:.92rem;margin:2px 0 6px}
.ev p{margin:0;font-size:.95rem;color:#D8CEC1}
.ev.is-extra{display:none}
.timeline.expanded .ev.is-extra{display:grid}
.show-all{margin-top:20px;font:700 1.15rem var(--d);letter-spacing:.03em;background:none;border:1px solid var(--edge);color:var(--paper);padding:8px 18px;cursor:pointer}
.show-all:hover{border-color:var(--safe);color:var(--safe)}
@media (max-width:540px){.ev{grid-template-columns:1fr;gap:4px}}
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:72px}
.wedge{margin:14px 0}
.wedge span{display:block;font-weight:500;margin-bottom:6px}
.steps{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.steps i{height:16px;background:var(--edge)}
/* Step wedge: filled steps run from deep red towards paper */
.steps i.on:nth-child(1){background:color-mix(in oklab,var(--red),var(--paper) 0%)}
.steps i.on:nth-child(2){background:color-mix(in oklab,var(--red),var(--paper) 9%)}
.steps i.on:nth-child(3){background:color-mix(in oklab,var(--red),var(--paper) 18%)}
.steps i.on:nth-child(4){background:color-mix(in oklab,var(--red),var(--paper) 27%)}
.steps i.on:nth-child(5){background:color-mix(in oklab,var(--red),var(--paper) 36%)}
.steps i.on:nth-child(6){background:color-mix(in oklab,var(--red),var(--paper) 45%)}
.steps i.on:nth-child(7){background:color-mix(in oklab,var(--red),var(--paper) 54%)}
.steps i.on:nth-child(8){background:color-mix(in oklab,var(--red),var(--paper) 63%)}
.steps i.on:nth-child(9){background:color-mix(in oklab,var(--red),var(--paper) 72%)}
.steps i.on:nth-child(10){background:color-mix(in oklab,var(--red),var(--paper) 81%)}
.kw{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 56px}
.kw h4{font-size:1.4rem;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{border:1px solid var(--edge);padding:3px 10px;font-size:.9rem;color:#D8CEC1}
@media (max-width:860px){.resume,.skills,.kw{grid-template-columns:1fr}}

/* ---------- Portfolio header band: archive footage, toned ---------- */
#portfolio{padding-top:0}
.band{position:relative;overflow:hidden;padding:120px 0 64px;margin-bottom:48px;background:var(--room)}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:contrast(1.2) brightness(.75)}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:var(--tone);mix-blend-mode:multiply;opacity:.95}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--room) 10%,transparent 70%),linear-gradient(0deg,var(--room),transparent 40%)}
.band .wrap{position:relative;z-index:2}
.band .head{margin:0}
@media (prefers-reduced-motion:reduce){.band video{display:none}.band{background:url(../videos/archive-diary.jpg) 50% 60%/cover}}

/* ---------- Portfolio: contact sheet ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}
.jump a{font:700 1.15rem var(--d);letter-spacing:.03em;text-decoration:none;border:1px solid var(--edge);color:var(--soft);padding:6px 16px}
.jump a:hover,.jump a:focus-visible{border-color:var(--safe);color:var(--paper)}
.group{padding:0;border-top:0}
.group+.group{margin-top:64px}
.group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 32px;align-items:end;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--edge)}
.group-head h3{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;text-transform:uppercase;margin:0;color:var(--safe)}
.group-head h3 span{display:block;font-size:1rem;letter-spacing:.08em;color:var(--soft);margin-top:6px}
.group-head p{margin:0;color:var(--soft);max-width:60ch}
@media (max-width:700px){.group-head{grid-template-columns:1fr}}
.sheet{background:#0E0B0C;padding:28px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 14px;
  background-image:repeating-linear-gradient(90deg,#2a2124 0 12px,transparent 12px 26px),repeating-linear-gradient(90deg,#2a2124 0 12px,transparent 12px 26px);
  background-size:100% 8px;background-repeat:no-repeat;background-position:0 8px,0 calc(100% - 8px)}
.frame{margin:0}
.frame a{text-decoration:none;color:var(--paper);display:block}
.frame .img{position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid #000;background:var(--bench)}
.frame img{width:100%;height:100%;object-fit:cover;filter:sepia(.35) saturate(.8);transition:filter .3s}
.frame a:hover img,.frame a:focus-visible img{filter:none}
.frame .n{position:absolute;left:8px;bottom:6px;font:700 .95rem var(--d);color:var(--safe);text-shadow:0 1px 2px #000}
.frame h5{font-size:1.25rem;font-weight:600;margin:10px 0 2px;line-height:1.1}
.frame small{color:var(--soft);font-size:.9rem}

/* ---------- Ask Erik chat ---------- */
.chat-shell{max-width:820px}
.chat-window{height:420px;overflow-y:auto;background:var(--bench);border:1px solid var(--edge);padding:18px}
.msg-row{display:flex;margin:8px 0}
.msg-row.user{justify-content:flex-end}
.msg{max-width:80%;padding:10px 14px;line-height:1.45;white-space:pre-wrap}
.user .msg{background:var(--safe);color:var(--room);font-weight:500}
.bot .msg{background:var(--room);border:1px solid var(--edge)}
.msg.sys,.sys .msg{background:#3a1d1b;border:1px solid var(--red);color:var(--paper);font-size:.92rem}
.typing{display:inline-block;min-width:18px}
.typing span{display:inline-block;width:6px;height:6px;margin:0 1px;background:var(--soft);border-radius:50%;opacity:.2;animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.chat-controls{display:flex;gap:8px;margin-top:10px}
.hint{font-size:.85rem;color:var(--soft);margin:8px 0 0}

/* ---------- Forms & buttons ---------- */
input,textarea{font:inherit;padding:12px 14px;background:var(--bench);border:1px solid var(--edge);color:var(--paper);width:100%;min-width:0;border-radius:0}
input::placeholder,textarea::placeholder{color:var(--soft)}
input:focus,textarea:focus{border-color:var(--safe);outline:none}
.btn{font:800 1.2rem var(--d);letter-spacing:.04em;background:var(--red);color:var(--paper);border:0;padding:10px 24px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#d4574a}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact .lines{list-style:none;margin:20px 0 0;padding:0}
.contact .lines li{font:600 1.6rem/1.2 var(--d);padding:14px 0;border-bottom:1px solid var(--edge);overflow-wrap:anywhere}
.contact .lines a{color:var(--paper);text-decoration:none}
.contact .lines a:hover,.contact .lines a:focus-visible{color:var(--safe);text-decoration:underline}
.form-group{margin-bottom:16px}
.form-group label{display:block;color:var(--soft);font-size:.9rem;margin:0 0 4px}
.help-block{color:#F08A7E;font-size:.88rem;min-height:0;margin-top:4px}
.form-group.has-error input,.form-group.has-error textarea{border-color:var(--red)}
.messages:not(:empty){padding:12px 14px;margin-bottom:16px;border:1px solid var(--edge)}
.messages.success{border-color:#5E9E6E;color:#BFE3C6}
.messages.danger{border-color:var(--red);color:#F08A7E}
.g-recaptcha{margin:4px 0 16px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{padding:32px 0;color:var(--soft);border-top:1px solid var(--edge);font-size:.9rem}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer .social{margin:0}
.site-footer .egg{display:inline-block;width:8px;height:8px;margin-left:12px;border-radius:50%;background:var(--soft);opacity:.25;vertical-align:middle;cursor:default;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:10px solid transparent;transition:opacity .3s,background .3s,box-shadow .3s}
.site-footer .egg.is-holding{background:var(--safe);opacity:1;transition:opacity 3s linear,background 3s linear,box-shadow 3s linear}
.site-footer .egg.is-ready{box-shadow:0 0 10px var(--safe)}

/* ==========================================================================
   Project pages (portfolio-N.html)
   ========================================================================== */
.project{padding:48px 0 96px}
.back{display:inline-block;font:700 1.15rem var(--d);letter-spacing:.03em;text-decoration:none;color:var(--soft);margin-bottom:20px}
.back:hover{color:var(--safe)}
.back::before{content:"\2190  "}
.project h1{font-size:clamp(2.6rem,6vw,4.5rem);font-weight:800;text-transform:uppercase;line-height:.95;margin-bottom:40px;max-width:22ch}
.project-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.project-grid>*{min-width:0}
.project-media{display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.project-grid{grid-template-columns:1fr}}

/* Gallery: swipe/scroll-snap strip with prev/next buttons */
.gallery{position:relative;background:#0E0B0C;border:1px solid #000}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track figure{flex:0 0 100%;margin:0;scroll-snap-align:center;display:grid;place-items:center;background:#0E0B0C}
.gallery-track img{width:100%;max-height:72vh;object-fit:contain}
.gallery-track figcaption{width:100%;padding:8px 12px;border-top:1px solid var(--edge);font-size:.85rem;color:var(--soft)}
.gallery-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-top:1px solid var(--edge);background:var(--room)}
.gallery-bar button{font:700 1.1rem var(--d);background:none;border:1px solid var(--edge);color:var(--paper);padding:4px 14px;cursor:pointer}
.gallery-bar button:hover{border-color:var(--safe);color:var(--safe)}
.gallery-count{font:700 1.1rem var(--d);color:var(--safe)}
.gallery.single .gallery-bar{display:none}

.media-video{aspect-ratio:16/9;background:#000;border:1px solid #000}
.media-video video,.media-video iframe{width:100%;height:100%;border:0;display:block}
.media-videos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.media-videos .media-video:last-child:nth-child(odd){grid-column:1/-1}
.media-item{margin:0}
.media-videos .media-item:last-child:nth-child(odd){grid-column:1/-1}
.media-item figcaption{margin-top:6px;font-size:.85rem;color:var(--soft)}
.media-item figcaption a{color:var(--safe)}
@media (max-width:600px){.media-videos{grid-template-columns:1fr}}
.portfolio-page-image{display:flex;align-items:center;gap:16px;background:var(--bench);padding:16px;color:var(--text)}
.portfolio-page-image img{flex:none}

.project-text h2{font-size:2rem;margin-bottom:16px}
.project-text h3{font-size:1.6rem;margin:32px 0 12px}
.project-text p{margin:0 0 1em;color:var(--text);max-width:62ch}
.project-text b,.project-text strong{color:var(--paper)}
.project-text img{display:inline-block;vertical-align:middle}
.project-text p img{margin:4px 10px 4px 0}
.project-general-info{list-style:none;margin:0 0 24px;padding:16px 0 0;border-top:1px solid var(--edge)}
.project-general-info li p{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;color:var(--paper)}
.project-general-info svg{flex:none;width:16px;height:16px;fill:var(--safe);position:relative;top:2px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tags li{display:flex;align-items:center;gap:6px;border:1px solid var(--edge);padding:4px 10px;font-size:.9rem;color:#D8CEC1}
.tags li img{width:18px!important;height:18px!important;margin:0!important}
.tags li img[src*="/flask/"],.tags li img[src*="/illustrator/"]{filter:brightness(0) invert(.88)} /* dark single-colour logos, lightened for the dark theme */
.share-buttons{margin-top:8px}
.share-buttons .btn{font-size:1rem;padding:6px 14px;margin:0 6px 6px 0;background:var(--bench);border:1px solid var(--edge)}
.share-buttons .btn:hover{border-color:var(--safe);color:var(--safe)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:72px;padding-top:24px;border-top:1px solid var(--edge)}
.pager a{text-decoration:none;color:var(--paper);display:block;padding:16px;background:var(--bench);border:1px solid var(--edge)}
.pager a:hover{border-color:var(--safe)}
.pager small{display:block;color:var(--soft);margin-bottom:4px}
.pager span{font:700 1.35rem/1.1 var(--d)}
.pager .next{text-align:right;grid-column:2}
@media (max-width:600px){.pager{grid-template-columns:1fr}.pager .next{grid-column:1}}