/* One CSS px at 1280 wide is the reference; everything but the 1px seams scales with
   the viewport width, so any window at any zoom shows the same composition edge to edge.
   Floor 9px keeps type readable in narrow windows, ceiling 20px stops ultrawide blow-up. */
html{font-size:clamp(9px,0.78125vw,20px)}
:root{color-scheme:light;--seam:#d4d4d0;--cell:#fff;--ink:#111;--mute:#888;--rule:#e6e6e3;--minh:21.2rem}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo-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}
*{box-sizing:border-box}
html{background:var(--seam)}
body{margin:0;background:var(--seam);color:var(--ink);font-family:"Archivo","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:1.3rem;line-height:1.8rem;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
h1,h2,h3,p,ul,dl,dd,table{margin:0;padding:0}
ul{list-style:none}
table{border-collapse:collapse;width:100%}
td{padding:0;text-align:left;vertical-align:top}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.cells{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(var(--minh),auto);gap:1px}
.c{background:var(--cell);padding:1.4rem 1.6rem;position:relative;min-width:0}
.name{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
h1{font-size:5.6rem;line-height:5.6rem;font-weight:600;letter-spacing:-.03em}
.tag{font-size:2rem;line-height:2.6rem}
.ph{padding:0}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
h2,.lab{font-size:1.2rem;line-height:1.8rem;font-weight:400;color:var(--mute);margin-bottom:1rem}
.bg{grid-column:span 2}
.bg td{padding:0.4rem 1.6rem 0.4rem 0;border-top:1px solid var(--rule)}
.bg tr:first-child td{border-top:0;padding-top:0}
.bg td:first-child{white-space:nowrap;color:var(--mute)}
.ct dl{display:grid;grid-template-columns:auto 1fr;gap:0.3rem 1.4rem}
.ct dt{color:var(--mute)}
.p{padding-bottom:4rem}
.p .no{position:absolute;top:1.2rem;right:1.6rem;color:var(--ink);font-size:1.2rem}
.p h3{font-size:1.3rem;line-height:1.8rem;font-weight:600;margin-bottom:0.8rem;padding-right:3.2rem}
.p p{margin-bottom:0.8rem}
.p .lk{position:absolute;left:1.6rem;bottom:1.2rem;color:var(--mute)}
.p .lk a{color:var(--ink)}
.wr{grid-column:span 2}
.wr li{display:grid;grid-template-columns:8.2rem 1fr;gap:0 1rem;margin-bottom:0.3rem}
.wr li span{color:var(--mute)}
.empty{background:#ececea}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1000px){
  .ct dl{grid-template-columns:1fr;gap:0}
  .ct dt{margin-top:6px}
  .ct dt:first-child{margin-top:0}
  .ct dd{overflow-wrap:anywhere}
}
@media (max-width:640px){
  html{font-size:10px}
  :root{--minh:160px}
  .cells{grid-template-columns:1fr 1fr}
  .name{grid-column:span 2;grid-row:span 1}
  h1{font-size:34px;line-height:36px}
  .empty{display:none}
  .p:nth-of-type(15){grid-column:span 2}
}

/* Each external arrow belongs to its own text link, including repo / live. */
.external-tail{white-space:nowrap}
.wr li .external-tail,.wr li .external-label{color:inherit}
a.text-external:hover,a.project-external:hover{text-decoration:none}
a.text-external:hover .external-label,a.project-external:hover .external-label{text-decoration:underline;text-underline-offset:.14em}
.external-arrow{display:inline-block;width:1em;height:1em;margin-left:.25em;vertical-align:-.12em;visibility:hidden;pointer-events:none}
.p .lk a{white-space:nowrap}
.project-external{display:inline-flex;align-items:center}
.project-external .external-arrow{width:0;margin-left:0;overflow:hidden}
@media(hover:hover) and (pointer:fine){a:hover .external-arrow{visibility:visible}.project-external:hover .external-arrow{width:1em;margin-left:.25em}}
/* Bottom row: Writings 2 columns + Writings 1 column + collections 1 column. */
.wr[aria-labelledby="writing2"]{grid-column:span 1}
.media-links{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;font-size:1.2rem;line-height:1.8rem;font-weight:400}
.media-links .unavailable{color:#aaa;cursor:default;user-select:none}
a:focus-visible{outline:2px solid #355e39;outline-offset:-4px}
.media-links a:hover{text-decoration:underline}
@media(max-width:640px){
 .wr[aria-labelledby="writing2"],.media-links{grid-column:span 2}
}