:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#0d0d0e; --fg:#e8e6e1; --dim:#8b8880; --line:#26262a; --accent:#c9c2b4;
  --tap:44px;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#f4f2ee; --fg:#17171a; --dim:#6d6a63; --line:#d9d5cc; --accent:#3a3733; } }
:root[data-theme="dark"]{ --bg:#0d0d0e; --fg:#e8e6e1; --dim:#8b8880; --line:#26262a; --accent:#c9c2b4; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%;-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  /* fluid type: 16px phone -> 17.5px desktop, never below user's zoom */
  font-size:clamp(1rem,0.96rem + 0.25vw,1.09rem); line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}

#bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg) center/cover no-repeat;
  opacity:.18;filter:grayscale(1)}

#wrap{position:relative;z-index:1;width:100%;max-width:42rem;margin:0 auto;
  padding:clamp(1.6rem,6vw,4rem) clamp(1.1rem,5vw,1.5rem) 6rem}

/* persistent mark, back to the start.
   In normal flow on phones (fixed elements near the top of a phone screen
   compete with browser and system chrome for taps), fixed from 900px up. */
#mark{display:inline-flex;align-items:center;min-height:var(--tap);
  font:12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;
  color:var(--dim);border:0;background:transparent;
  position:relative;z-index:4;margin:0 0 .5rem}
#mark:hover,#mark:active{color:var(--fg)}
@media(min-width:900px){
  #mark{position:fixed;margin:0;
    top:calc(.9rem + env(safe-area-inset-top,0px));
    left:clamp(1.1rem,5vw,1.5rem)}
}
@media print{#mark{display:none}}

#door{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;
  justify-content:center;background:var(--bg);
  padding:clamp(1.5rem,7vw,3rem) clamp(1.2rem,6vw,3rem)}
#door.gone{display:none}
#door h1{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);margin:0 0 .4rem;letter-spacing:.005em}
#door .sub{font-size:clamp(.95rem,.9rem + .3vw,1.05rem);color:var(--dim);
  max-width:26rem;margin:0 0 2.5rem;line-height:1.55}
#door nav{display:flex;flex-direction:column;gap:.1rem;max-width:26rem}
#door nav a{display:flex;align-items:center;min-height:var(--tap);
  border:0;border-top:1px solid var(--line);font-size:1rem}
#door nav a:last-child{border-bottom:1px solid var(--line)}
#door nav a::after{content:"→";margin-left:auto;color:var(--dim)}
#door nav small{display:block;color:var(--dim);font-size:.8rem;
  font-family:ui-sans-serif,system-ui,sans-serif}
#door .row{display:flex;flex-direction:column;padding:.55rem 0}

h1{font-size:clamp(1.35rem,1.15rem + 1vw,1.7rem);font-weight:400;margin:0 0 .3rem;line-height:1.25}
.meta{font:11px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:1.75rem}
p{margin:0 0 1.15rem;hyphens:auto}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
section{margin-top:2.25rem;padding-top:1.2rem;border-top:1px solid var(--line)}
h2{font:11px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin:0 0 .75rem}
.kw span{display:inline-block;font:12px/1 ui-sans-serif,system-ui,sans-serif;color:var(--dim);
  border:1px solid var(--line);border-radius:2px;padding:.4em .65em;margin:0 .3em .45em 0}
.refs{font-size:.86em;color:var(--dim)}
/* link lists: full-width rows, tap target >= 44px */
.lnk a{display:flex;align-items:center;min-height:var(--tap);padding:.15rem 0;border:0;line-height:1.35}
.lnk a::before{content:"→";color:var(--dim);margin-right:.55em;flex:none}
.back a::before{content:"←"}

/* local view — visible at every width, placed inline on narrow screens */
#local{display:block;width:150px;height:150px;opacity:.85;color:var(--fg);margin:0 0 1.5rem}
#local circle[data-go]{cursor:pointer}
@media(min-width:900px){
  #local{position:fixed;right:1.25rem;margin:0;
    top:calc(1.25rem + env(safe-area-inset-top,0px));z-index:2}
}
#all{font-size:.85em;color:var(--dim)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--bg);padding:.5rem .75rem}

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

@media print{
  #bg,#door,#local,#all{display:none!important}
  body{background:#fff;color:#000;font-size:10pt}
  #wrap{max-width:none;padding:0}
  a{color:#000;border:0}
  section{break-inside:avoid}
  h1{break-after:avoid}
}

/* Works page: ONE column. The wrapper sets the width and centres itself;
   nothing inside narrows it again, so text and images share the same box. */
.pf-wide{max-width:42rem}
.pf .stmt,.pf .work{width:100%;margin-left:auto;margin-right:auto}
.pf .stmt{margin-bottom:3.5rem}
.pf .work{margin-bottom:4.5rem}
.pf .work img{display:block;width:100%;height:auto;margin:0 auto .85rem;background:var(--line)}
.pf .work .cap{width:100%;font:12px/1.5 ui-sans-serif,system-ui,sans-serif;color:var(--dim)}
.pf .work .cap b{display:block;font-weight:400;color:var(--fg);
  font-family:Georgia,serif;font-size:1.05rem;font-style:italic;margin-bottom:.2rem}
@media print{.pf .work{break-inside:avoid}}