:root{
  --grad:linear-gradient(160deg,#fce9a8 0%,#f0c9a0 46%,#f2b6ae 100%);
  --ink:#20180f; --sub:#6b5c4d; --link:#8a3b2a; --visited:#6d3a68; --accent:#e08a3c;
  --line:rgba(32,24,15,.28); --card:rgba(255,255,255,.5); --card-line:rgba(32,24,15,.35); --win-solid:#f8ead6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grad:linear-gradient(160deg,#101d33 0%,#0a1120 55%,#020203 100%);
    --ink:#f3ead6; --sub:#a99d86; --link:#e7b98a; --visited:#c7a3d8; --accent:#e7b98a;
    --line:rgba(243,234,214,.18); --card:rgba(255,255,255,.05); --card-line:rgba(243,234,214,.22); --win-solid:#111a2b;
  }
}
:root[data-theme="dark"]{
  --grad:linear-gradient(160deg,#101d33 0%,#0a1120 55%,#020203 100%);
  --ink:#f3ead6; --sub:#a99d86; --link:#e7b98a; --visited:#c7a3d8; --accent:#e7b98a;
  --line:rgba(243,234,214,.18); --card:rgba(255,255,255,.05); --card-line:rgba(243,234,214,.22); --win-solid:#111a2b;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--win-solid); color:var(--ink); font-family:'Lora',Georgia,serif; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh;}
/* The gradient lives on its own fixed layer behind the page. (background-attachment:fixed on body
   made some browsers drop chunks of it, leaving white patches, when the page repainted.) */
body::before{content:''; position:fixed; inset:0; z-index:-1; background:var(--grad); pointer-events:none;}
::selection{background:var(--accent); color:#20180f;}
a{color:var(--link);} a:visited{color:var(--visited);}
a{text-decoration-thickness:1px; text-underline-offset:2px;}
.mono{font-family:'Space Mono',monospace;}
.wrap{max-width:720px; margin:0 auto; padding:0 24px;}

header{position:sticky; top:0; z-index:10; background:var(--win-solid); border-bottom:1px solid var(--ink);}
.headbar{max-width:720px; margin:0 auto; padding:14px 24px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 18px;}
.logotype{font-family:'Space Mono',monospace; font-weight:700; font-size:15px;}
a.logotype, a.logotype:visited{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent;}
a.logotype:hover{border-bottom:1px solid var(--ink);}
nav.mono{font-size:13px; display:flex; align-items:center; gap:16px;}
nav.mono a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent;}
nav.mono a:hover{border-bottom:1px solid var(--ink);}
.theme-btn{background:none; border:1px solid var(--ink); color:var(--ink); font-size:13px; width:28px; height:28px; cursor:pointer; font-family:'Space Mono',monospace;}
.theme-btn:hover{background:var(--card);}

.hero{max-width:720px; margin:0 auto; padding:64px 24px 64px; border-bottom:1px dashed var(--line);}
.hero .tag{font-family:'Space Mono',monospace; font-size:12px; color:var(--sub);}
.hero h1{font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(28px,6vw,42px); margin:10px 0 14px; line-height:1.15;}
.hero p{max-width:56ch; color:var(--sub); font-size:16px; margin:0;}

section{border-bottom:1px dashed var(--line);}
section:last-of-type{border-bottom:none;}
section > .section-head:first-child{padding-top:56px;}
#about, #projects{padding-bottom:56px !important;}

.section-head{display:flex; align-items:baseline; gap:14px; margin-bottom:32px;}
.section-head .num{font-family:'Space Mono',monospace; color:var(--sub); font-size:13px;}
.section-head h2{font-family:'Space Mono',monospace; font-size:20px; margin:0; font-weight:700;}

.about-grid{display:grid; grid-template-columns:120px 1fr; gap:28px;}
.avatar{width:100px; height:100px; border:1px solid var(--card-line); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:34px; font-weight:700; background:var(--card);}
.resume-row{display:flex; gap:16px; padding:10px 0; border-top:1px dotted var(--line);}
.resume-row:first-of-type{border-top:none;}
.resume-row .when{font-family:'Space Mono',monospace; font-size:12px; color:var(--sub); width:110px; flex:none; padding-top:2px;}
.resume-row .what b{display:block; font-size:15.5px;}
.resume-row .what span{color:var(--sub); font-size:14px;}
.taglist{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.taglist .t{font-family:'Space Mono',monospace; font-size:11px; border:1px solid var(--card-line); padding:3px 8px; color:var(--sub);}
@media (max-width:520px){.about-grid{grid-template-columns:1fr;} .avatar{width:72px;height:72px;font-size:24px;}}

.proj-grid{display:grid; gap:18px;}
.win{border:1px solid var(--card-line); background:var(--card);}
.win-bar{display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-bottom:1px solid var(--card-line); font-family:'Space Mono',monospace; font-size:12px;}
.win-bar .dots{display:flex; gap:5px;}
.win-bar .dots i{width:8px;height:8px;border:1px solid var(--card-line); display:block;}
.win-body{padding:16px;}
.win-body p{margin:0 0 12px; font-size:14.5px;}
.win-meta{display:flex; justify-content:space-between; align-items:center; font-family:'Space Mono',monospace; font-size:12px; color:var(--sub);}
.win-meta a{font-size:12px;}
.detail-win{border:1px solid var(--card-line); background:var(--card);}
.detail-win .win-body{padding:28px;}
.detail-meta{display:flex; gap:24px; flex-wrap:wrap; font-size:12px; color:var(--sub); margin-bottom:18px;}
.detail-win p{font-size:15.5px;}
.detail-links{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px;}
.detail-links a{font-size:13px;}
.back-link{display:inline-block; margin:28px 0 24px; font-size:13px;}

.page-head{padding:64px 0 40px;}
.page-head .tag{font-family:'Space Mono',monospace; font-size:12px; color:var(--sub);}
.page-head h1{font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(26px,5.5vw,36px); margin:10px 0 8px;}
.page-head p{max-width:56ch; color:var(--sub); font-size:15.5px;}

.listing{font-family:'Space Mono',monospace; font-size:13.5px; padding-bottom:80px;}
.listing .row{display:grid; grid-template-columns:100px 1fr auto; gap:14px; padding:16px 0; border-top:1px dotted var(--line); align-items:baseline;}
.listing .row:first-of-type{border-top:none;}
.listing .date{color:var(--sub);}
.listing .title a{text-decoration:none; color:var(--ink); font-family:'Lora',serif; font-size:16px;}
.listing .title a:hover{color:var(--link);}
.listing .title small{display:block; color:var(--sub); font-family:'Space Mono',monospace; font-size:11.5px; margin-top:3px;}
.listing .kind{color:var(--sub); white-space:nowrap;}
@media (max-width:520px){.listing .row{grid-template-columns:1fr; gap:2px;}}

/* long-form musing */
article.article{max-width:640px; margin:0 auto; padding:56px 24px 100px;}
.article-body{font-size:17.5px; line-height:1.8; max-width:66ch;}
.article-body p{margin:0 0 22px;}
.article-body img{max-width:100%; height:auto; display:block; margin:32px 0;}
.article-body blockquote{margin:28px 0; padding-left:18px; border-left:2px solid var(--card-line); color:var(--sub); font-style:italic;}
.article-body h2,.article-body h3{font-family:'Space Mono',monospace; font-size:16px; margin:36px 0 12px;}
.article-body a{text-underline-offset:3px;}

footer{max-width:720px; margin:0 auto; padding:34px 24px 34px; font-family:'Space Mono',monospace; font-size:12px; color:var(--sub);}
.foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.counter{border:1px solid var(--card-line); padding:3px 8px;}

/* side-photo windows (home page margins) — see _data/photos.yml */
#photo-stage{position:relative; --col:720px;}   /* width of the text column */
#photo-stage.article-stage{--col:640px;}
.side-photos{display:none;}
@media (min-width:1200px){
  .side-photos{display:block;}
  .side-photo{
    --m:calc((100% - var(--col)) / 2);   /* margin width; % = #photo-stage width */
    position:absolute; width:min(calc(var(--w) * var(--m)), 190px); z-index:1; will-change:transform;
  }
  .side-left{left:calc(var(--x) * var(--m));}
  .side-right{right:calc(var(--x) * var(--m));}
}
.photo-win{
  border:1px solid var(--card-line); background:var(--card);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
  transform-origin:50% 50%;
}
.photo-win.closed{opacity:0; transform:scale(.85); visibility:hidden; pointer-events:none; transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;}
.photo-win.no-anim{transition:none;}
.photo-win{container-type:inline-size;}
.photo-bar{display:flex; align-items:center; gap:6px; padding:4px 4px 4px 8px; border-bottom:1px solid var(--card-line); font-family:'Space Mono',monospace; font-size:11px;}
.photo-bar .dots{display:flex; gap:4px; flex:none;}
.photo-bar .dots i{width:6px; height:6px; border:1px solid var(--card-line); display:block;}
@container (max-width:150px){ .photo-bar .dots{display:none;} }
.photo-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sub);}
.photo-btn{flex:none; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--card-line); color:var(--ink); font-family:'Space Mono',monospace; font-size:17px; line-height:1; width:22px; height:22px; padding:0; cursor:pointer;}
.photo-btn:hover, .photo-btn:focus-visible{background:var(--card); border-color:var(--ink);}
.photo-win img{display:block; width:100%; height:auto; object-fit:cover;}
.photo-win img[data-large]{cursor:zoom-in;}

/* side-by-side image windows inside a project (front matter `gallery:`) */
.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; align-items:start; margin:24px 0 8px;}

/* enlarged photo ("lightbox") — same window, centered over a dimmed page */
html.lb-open{overflow:hidden; scrollbar-gutter:stable;}
.photo-lightbox{position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; overflow:hidden;}
.photo-lightbox::backdrop{background:transparent;}
.lb-backdrop{position:absolute; inset:0; background:rgba(12,9,6,.62); backdrop-filter:blur(3px); cursor:zoom-out;}
.lb-win{position:absolute; background:var(--win-solid); box-shadow:0 18px 60px rgba(0,0,0,.35); transform-origin:0 0;}
.lb-win .photo-bar{font-size:12px; padding:5px 5px 5px 10px;}
.lb-win .photo-bar .dots i{width:8px; height:8px;}
.lb-win .photo-btn{width:26px; height:26px; font-size:19px;}
.lb-win .icon-zoom{width:15px; height:15px;}
.lb-win img{cursor:zoom-out; background:var(--card);}
@media (prefers-reduced-motion: reduce){
  .side-photo{will-change:auto;}
  .photo-win, .photo-win.closed{transform:none;}
}

.hero h1 .scatter-word{display:inline-block; white-space:nowrap;}
.hero h1 .scatter-letter{display:inline-block;}

/* Theme switch: the new theme is revealed through a huge, soft ellipse centered below the page.
   theme.js sets the shape (--sun-w, --sun-drop, --sun-soft) and animates its height (--sun). */
@property --sun{syntax:'<length>'; inherits:true; initial-value:0px;}
::view-transition-old(root), ::view-transition-new(root){animation:none; mix-blend-mode:normal;}
/* Sunrise: the light theme fills the growing ellipse. */
:root[data-theme-anim="sunrise"]::view-transition-new(root){
  -webkit-mask-image:radial-gradient(ellipse calc(var(--sun) * var(--sun-w)) var(--sun) at 50% calc(100% + var(--sun-drop)), #000 var(--sun-soft), transparent 100%);
  mask-image:radial-gradient(ellipse calc(var(--sun) * var(--sun-w)) var(--sun) at 50% calc(100% + var(--sun-drop)), #000 var(--sun-soft), transparent 100%);
}
/* Sunset: the dark theme closes in as the ellipse sinks. */
:root[data-theme-anim="sunset"]::view-transition-new(root){
  -webkit-mask-image:radial-gradient(ellipse calc(var(--sun) * var(--sun-w)) var(--sun) at 50% calc(100% + var(--sun-drop)), transparent var(--sun-soft), #000 100%);
  mask-image:radial-gradient(ellipse calc(var(--sun) * var(--sun-w)) var(--sun) at 50% calc(100% + var(--sun-drop)), transparent var(--sun-soft), #000 100%);
}
/* The glow (drawn by theme.js) sits on the soft edge of the same ellipse. */
.theme-glow{position:fixed; inset:0; pointer-events:none; view-transition-name:theme-glow;}
::view-transition-group(theme-glow){animation:none; mix-blend-mode:screen;}
::view-transition-old(theme-glow){display:none;}
::view-transition-new(theme-glow){animation:none;}

/* Arriving from elsewhere on the site (page-arrive.js adds .arrived), the main content gently
   floats up: the card on a project page, the body text on a musing. Titles and back links stay put. */
html.arrived .detail-win, html.arrived article.article > .article-body{animation:arrive-float 1.5s cubic-bezier(.22,.61,.36,1) both;}
@keyframes arrive-float{from{opacity:0; transform:translateY(28px);}}
@media (prefers-reduced-motion: reduce){ html.arrived .detail-win, html.arrived article.article > .article-body{animation:none;} }