/* anastassia-elias.com — "The Working Table" */
:root{
  --paper:#3E4A3B; --paper-2:#46523F; --paper-deep:#2F382E;
  --ink:#EAE4D2; --ink-soft:#D8D2BE; --muted:#A8AD97; --faint:#8A9479;
  --line:#55624F; --accent:#D9A45B; --accent-moss:#8A9479;
  --serif:'Literata',Georgia,serif; --display:'Newsreader',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:clamp(20px,5vw,64px); --measure:66ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#28302A}
body{margin:0 auto;max-width:1680px;border-inline:1px solid var(--line);background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--serif);text-wrap:pretty}
img{max-width:100%}
a{color:var(--accent)}
a:hover{color:var(--ink)}

/* ---------- chrome ---------- */
.site-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 32px;flex-wrap:wrap;padding:26px var(--gutter) 16px;border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;gap:5px;text-decoration:none}
.domain{font:400 10.5px var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:lowercase}
.wordmark{font:500 21px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.standing{font:italic 400 14.5px var(--display);color:var(--muted)}
.site-nav{display:flex;gap:22px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.08em;padding-bottom:4px}
.site-nav a{color:var(--muted);text-decoration:none;padding-bottom:2px}
.site-nav a:hover{color:var(--ink)}
.site-nav a.on{color:var(--accent);border-bottom:2px solid var(--accent)}
.now{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:11px var(--gutter);border-bottom:1px solid var(--line);font:400 12.5px var(--mono);color:var(--muted);background:var(--paper-deep)}
.now b{font-weight:500;color:var(--accent);letter-spacing:.12em}
.now a{color:var(--ink);text-decoration-color:var(--faint)}
.site-foot{border-top:1px solid var(--line);padding:26px var(--gutter) 36px;display:flex;flex-direction:column;gap:14px;margin-top:64px}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;font:500 11.5px var(--mono);letter-spacing:.08em}
.foot-nav a{color:var(--muted);text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.disclaimer{font:400 12.5px/1.6 var(--mono);color:var(--faint);max-width:70ch}

/* ---------- signature opener: photo bleeds to LEFT margin only ---------- */
.opener{display:grid;grid-template-columns:minmax(280px,44%) 1fr;gap:clamp(24px,4vw,56px);align-items:end;padding:0 var(--gutter) 0 0;margin:0}
.opener-fig{margin:0}
.opener-fig img{display:block;width:100%;height:clamp(320px,52vh,560px);object-fit:cover}
.opener-fig figcaption{font:400 11px var(--mono);color:var(--faint);padding:8px 0 0 12px}
.opener-text{padding:34px 0 10px}
.kicker{font:500 12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{color:var(--ink)}
.post-title{font:600 clamp(32px,4.4vw,52px)/1.12 var(--serif);margin:14px 0 16px}
.post-title a{color:var(--ink);text-decoration:none}
.post-title a:hover{color:var(--accent)}
.lead{font:italic 400 20px/1.55 var(--display);color:var(--muted);margin:0 0 18px}
.byline{font:400 12.5px var(--mono);color:var(--faint);margin:0}
@media(max-width:820px){
  .opener{grid-template-columns:1fr;padding-right:0;align-items:start}
  .opener-fig img{height:min(58vw,420px)}
  .opener-text{padding:22px 20px 0}
}

/* ---------- article flow ---------- */
.flow{display:grid;grid-template-columns:minmax(var(--gutter),1fr) min(var(--measure),calc(100% - 2*var(--gutter))) minmax(var(--gutter),1fr);padding:34px 0 10px}
.flow>*{grid-column:2}
.flow p{margin:0 0 22px;font-size:18.5px;line-height:1.75;color:var(--ink-soft)}
.flow h2{font:600 27px/1.25 var(--serif);color:var(--ink);margin:40px 0 16px}
.flow h3{font:600 21px/1.3 var(--serif);color:var(--ink);margin:32px 0 12px}
.flow ul,.flow ol{margin:0 0 22px;padding-left:22px;color:var(--ink-soft);font-size:18px;line-height:1.7}
.flow li{margin-bottom:8px}

.pullquote{margin:46px 0;padding:0;border:0}
.pullquote p{font:italic 500 clamp(23px,2.6vw,31px)/1.4 var(--display);color:var(--accent);margin:0}
.pullquote p::before{content:"“"}
.pullquote p::after{content:"”"}

.blockquote{margin:36px 0;padding:4px 0 4px 20px;border-left:2px solid var(--accent)}
.blockquote p{font:italic 400 19px/1.6 var(--display);color:var(--ink-soft);margin:0 0 8px}
.blockquote cite{font:400 12.5px var(--mono);color:var(--faint);font-style:normal}

/* full-width interruption band */
.flow>.callout{grid-column:1/-1;background:var(--paper-deep);border-block:1px solid var(--line);padding:36px var(--gutter) 40px;margin:46px 0}
.callout{background:var(--paper-deep);border:1px solid var(--line);padding:26px 28px;margin:36px 0}
.callout h3{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.callout p{font-size:17.5px;color:var(--ink-soft);margin:0 0 10px;max-width:75ch}
.callout ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 40px;max-width:1140px}
.callout li{font:400 16.5px/1.6 var(--serif);color:var(--ink-soft);border-left:2px solid var(--line);padding-left:14px;margin:0}

.note{font:400 14px/1.65 var(--mono);color:var(--muted);border-block:1px solid var(--line);padding:13px 0;margin:30px 0}

/* timeline — long multi-word labels welcome */
.timeline{list-style:none;margin:0;padding:0;max-width:1140px}
.timeline li{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:8px 26px;padding:15px 0;border-top:1px solid var(--line);margin:0}
.timeline li:first-child{border-top:0}
.t-when{font:500 12.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.t-what{font:400 16.5px/1.6 var(--serif);color:var(--ink-soft)}
@media(max-width:600px){.timeline li{grid-template-columns:1fr;gap:4px}}

/* data */
.versus,.datatable{width:100%;border-collapse:collapse;margin:36px 0;font-size:16px}
.versus th,.datatable th{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--accent)}
.versus td,.datatable td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:36px 0}
.statblock{background:var(--paper-deep);border:1px solid var(--line);padding:20px 18px;display:flex;flex-direction:column;gap:8px}
.stat-num{font:600 42px/1 var(--display);color:var(--accent)}
.stat-label{font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.chart{margin:40px 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font:400 12px var(--mono);color:var(--faint);padding-top:10px}

/* media */
.article-figure{margin:40px 0}
.article-figure img{display:block;width:100%;height:auto}
.article-figure figcaption{font:400 12px var(--mono);color:var(--faint);padding-top:9px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:40px 0}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:220px;object-fit:cover}
.gallery figcaption{font:400 11.5px var(--mono);color:var(--faint);padding-top:7px}
.map-figure{margin:40px 0}
.map-slot{min-height:320px;border:1px dashed var(--line);background:var(--paper-deep)}
.map-figure figcaption{font:400 12px var(--mono);color:var(--faint);padding-top:9px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-items:stretch;margin:36px 0}
.profile-card{background:var(--paper-deep);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:9px;height:100%;margin:0}
.profile-card h3{margin:0;font:600 20px var(--serif);color:var(--ink)}
.p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%}
.p-role{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.p-links{margin-top:auto !important;padding-top:8px}
.p-links a{font:400 13px var(--mono)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:36px 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--paper-deep);border:1px solid var(--line);padding:18px;text-decoration:none;height:100%}
.org-card:hover{border-color:var(--accent)}
.org-logo{width:44px;height:44px;object-fit:contain;background:#1F2620;padding:6px}
.org-name{display:block;font:600 17px var(--serif);color:var(--ink)}
.org-host{display:block;font:400 12px var(--mono);color:var(--faint)}
.entity-ref{font:inherit;color:var(--accent);text-decoration-color:var(--faint)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:36px 0}
.further-grid a{display:flex;flex-direction:column;gap:6px;background:var(--paper-deep);border:1px solid var(--line);padding:20px;font:600 17px/1.35 var(--serif);color:var(--ink);text-decoration:none;height:100%}
.further-grid a:hover{border-color:var(--accent)}
.further-grid small{font:400 12px var(--mono);color:var(--faint);margin-top:auto;padding-top:10px}

/* related */
.related{margin:56px 0 0}
.related-links{list-style:none;margin:14px 0 0;padding:0}
.related-links li{border-top:1px solid var(--line);margin:0}
.related-links a{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:15px 2px;font:600 18.5px var(--serif);color:var(--ink);text-decoration:none}
.related-links a:hover{color:var(--accent)}
.related-links .rel-meta{font:400 11.5px var(--mono);color:var(--faint);white-space:nowrap}

/* ---------- homepage rooms ---------- */
.room{padding:38px var(--gutter) 44px}
.room-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.room-no{font:400 12px var(--mono);color:var(--faint)}
.room-title{font:600 clamp(24px,3vw,31px)/1.2 var(--serif);letter-spacing:.06em;margin:0}
.room-title a{color:var(--ink);text-decoration:none}
.room-title a:hover{color:var(--accent)}
.room-blurb{font:italic 400 16.5px/1.6 var(--display);color:var(--muted);max-width:72ch;margin:8px 0 18px}
.room-body{border-top:1px solid var(--line);padding-top:20px;max-width:1140px}
.room-feat-title{font:600 clamp(23px,2.6vw,29px)/1.22 var(--serif);margin:14px 0 10px}
.room-feat-title a{color:var(--ink);text-decoration:none}
.room-feat-title a:hover{color:var(--accent)}
.room-feat-text{font-size:16.5px;line-height:1.68;color:var(--ink-soft);max-width:64ch;margin:0 0 22px}
.room-feat-text .more{white-space:nowrap;font-size:11.5px}
.room-also{font:italic 400 16px/2 var(--display);color:var(--muted);max-width:70ch;margin:0}
.room-also a{color:var(--ink-soft);text-decoration-color:var(--faint)}
.room-also a:hover{color:var(--accent)}
.room-also .dot{color:var(--faint)}
.also-label{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--accent);font-style:normal;margin-right:12px}
.room-also .room-more{display:inline;margin:0;border:0;font:500 12px var(--mono);letter-spacing:.06em;text-decoration:none;color:var(--accent);white-space:nowrap}
.feed-feature{display:grid;grid-template-columns:minmax(250px,370px) 1fr;gap:clamp(22px,3.4vw,42px);align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.feed-feature img{display:block;width:100%;height:205px;object-fit:cover}
.feed-feature h3{font:600 24px/1.25 var(--serif);margin:0 0 8px}
.feed-feature h3 a,.feed-row h3 a{color:var(--ink);text-decoration:none}
.feed-feature h3 a:hover,.feed-row h3 a:hover{color:var(--accent)}
.feed-feature p{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 10px}
.feed-row{display:grid;grid-template-columns:1fr auto;gap:6px 26px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.feed-row h3{font:600 20px/1.3 var(--serif);margin:0}
.feed-row p{color:var(--muted);font-size:15px;line-height:1.6;margin:4px 0 0;max-width:78ch}
.feed-meta{font:400 11.5px var(--mono);color:var(--faint);white-space:nowrap}
.room-more{display:inline-block;margin-top:16px;font:500 12px var(--mono);letter-spacing:.1em;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.room-more:hover{color:var(--ink);border-color:var(--accent)}
@media(max-width:760px){.feed-feature{grid-template-columns:1fr}.feed-feature img{height:min(52vw,300px)}.feed-row{grid-template-columns:1fr}}

.room-divider{height:92px;overflow:hidden;border-block:1px solid var(--line)}
.room-divider img{display:block;width:100%;height:100%;object-fit:cover}

/* lead piece on homepage */
.opener-body{margin-top:22px;border-top:1px solid var(--line);padding-top:22px}
.opener-body p{font-size:17.5px;line-height:1.72;color:var(--ink-soft);margin:0 0 18px;max-width:62ch}
.lead-piece .opener-fig img{height:clamp(380px,64vh,660px)}
.more{font:500 13px var(--mono);letter-spacing:.06em;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.more:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- the underwriters (homepage only) ---------- */
.backers{background:var(--paper-deep);border-block:1px solid var(--line);padding:42px var(--gutter) 50px;margin:52px 0 0}
.backers-head{max-width:1140px;margin-bottom:26px}
.backers-kicker{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.backers-note{font:italic 400 16.5px/1.6 var(--display);color:var(--muted);margin:0;max-width:72ch}
.backers-run{display:flex;flex-wrap:wrap;gap:20px 44px;align-items:baseline}
.sponsor{display:inline-flex;align-items:baseline;gap:10px;min-width:170px;min-height:44px;padding:0 2px 9px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font:italic 500 19px/1.35 var(--display)}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{display:none}
.sponsor .sponsor-blurb:empty::before{content:"open";font:400 10.5px var(--mono);letter-spacing:.14em;font-style:normal;color:var(--faint)}
.sponsor.feat{font-size:28px;min-width:250px}

/* ---------- category pages ---------- */
.cat-banner{height:230px;overflow:hidden;border-bottom:1px solid var(--line)}
.cat-banner img{display:block;width:100%;height:100%;object-fit:cover}
.cat-head{padding:46px var(--gutter) 8px}
.cat-head h1{font:600 clamp(32px,4vw,44px)/1.15 var(--serif);margin:10px 0 14px}
.cat-head .room-blurb{margin-bottom:0}
.cat-list{list-style:none;margin:26px 0 0;padding:0 var(--gutter)}
.cat-list li{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:baseline}
.cat-list h2{font:600 22px/1.3 var(--serif);margin:0}
.cat-list h2 a{color:var(--ink);text-decoration:none}
.cat-list h2 a:hover{color:var(--accent)}
.cat-list p{color:var(--muted);font-size:15.5px;line-height:1.65;margin:6px 0 0;max-width:80ch}
@media(max-width:600px){.cat-list li{grid-template-columns:1fr}}
.cat-cross{padding:40px var(--gutter) 0;display:flex;gap:26px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.08em}
.cat-cross a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.cat-cross a:hover{color:var(--accent)}

/* 404 */
.err{padding:90px var(--gutter) 40px;max-width:720px}
.err h1{font:600 44px var(--serif);margin:16px 0}
.err p{font-size:18.5px;color:var(--ink-soft)}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1467px at 390, 24% of the whole page. Two columns bring it to
   639px (56% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 96-136px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.backers-run), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .backers-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .backers-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .backers-run > * *{min-width:0!important;max-width:100%}
    .backers-run img,.backers-run svg{max-width:100%;height:auto}
  .backers-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 650px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(var(--gutter),1fr) min(var(--measure),calc(100% - 2*var(--gutter))) minmax(var(--gutter),1fr)" (declared in .flow) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.flow{grid-template-columns:minmax(var(--gutter),1fr) min(868px, 100%) minmax(var(--gutter),1fr)!important}
}
@media (min-width:1600px){
  div.flow{grid-template-columns:minmax(var(--gutter),1fr) min(clamp(868px, 60.278vw, 1042px), 100%) minmax(var(--gutter),1fr)!important}
  div.flow > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
.flow h2:where(.rt-h3){font: 600 21px/1.3 var(--serif); color: var(--ink); margin: 32px 0px 12px;}
.callout h2:where(.rt-h3){font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0px 0px 18px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(body > div.cat-banner > img,
  body > div.room-divider > img,
  header.opener > figure.opener-fig > img){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:1199px){.backers-run:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.backers-run:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}
