/* Vibe Coded Today — the daily paper theme.
   Warm newsprint by day, ink-dark by night, one spot colour (vermilion).
   Type is system serifs only: no web fonts, no third-party requests. */

:root{
  --paper:#f3eee3; --paper-2:#ebe4d4; --paper-3:#dcd2bb;
  --ink:#1c1a16; --ink-2:#4f4a40; --ink-3:#6b6557;
  --rule:#1c1a16; --hair:#cdc3ab;
  --spot:#b9341a; --spot-ink:#fff8f0;
  --mark:rgba(244,201,62,.55); --mark-2:rgba(244,201,62,.26);
  --plate-ink:#bdb297; --plate-bg:#e8e0cc;
  --max:1140px; --measure:68ch;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",P052,"URW Palladio L",Georgia,serif;
  --text:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Liberation Serif",serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Source Code Pro","Liberation Mono",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#16140f; --paper-2:#1f1c16; --paper-3:#0c0b08;
    --ink:#ece5d4; --ink-2:#c3bba8; --ink-3:#958d7b;
    --rule:#ece5d4; --hair:#3a352a;
    --spot:#ff6a47; --spot-ink:#16140f;
    --mark:rgba(244,201,62,.30); --mark-2:rgba(244,201,62,.14);
    --plate-ink:#4b4536; --plate-bg:#1f1c16;
    color-scheme:dark;
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;color:var(--ink);font:1.075rem/1.62 var(--text);font-kerning:normal;text-rendering:optimizeLegibility;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--spot)}
::selection{background:var(--mark)}
:focus-visible{outline:2px solid var(--spot);outline-offset:2px}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
.ic{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:50;background:var(--ink);color:var(--paper);padding:8px 12px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
section{padding:36px 0}
.sub{color:var(--ink-2)}

/* ---------- small type ---------- */
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font:700 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--spot);margin:0 0 10px}
.kicker a{text-decoration:none;color:inherit}
.kicker a:hover{text-decoration:underline}
.standfirst{font:italic 1.2rem/1.45 var(--display);color:var(--ink-2);margin:12px 0 0;max-width:62ch;text-wrap:pretty}
.rule-head{border-top:3px solid var(--rule);padding-top:10px;font:700 .8rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 22px}

/* ---------- masthead ---------- */
.masthead{padding-top:14px}
.masthead .wrap::after{content:"";display:block;border-top:3px solid var(--rule);margin-top:3px}
.dateline{display:flex;justify-content:space-between;gap:12px;font:600 .7rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);padding:9px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dateline .edition{color:var(--spot)}
.nameplate{display:block;text-align:center;font:700 clamp(2.5rem,8vw,5.4rem)/1 var(--display);letter-spacing:-.012em;text-decoration:none;padding:22px 0 10px}
.nameplate:hover{color:inherit}
.motto{text-align:center;font:italic 1.08rem/1.4 var(--display);color:var(--ink-2);margin:0 0 16px}
.sections{display:flex;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--rule)}
.sections a{display:inline-flex;align-items:center;gap:.5em;padding:11px 16px;font:700 .76rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.sections a+a{border-left:1px solid var(--hair)}
.sections a .ic{color:var(--spot)}
.sections a[aria-current=page]{color:var(--spot)}
.masthead.compact .nameplate{font-size:clamp(1.9rem,4.4vw,2.9rem);padding:14px 0 10px}
@media (max-width:700px){
  .dateline .count{display:none}
  .sections{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sections a{padding:11px 12px;white-space:nowrap}
}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;gap:.55em;padding:12px 18px;border:1.5px solid var(--ink);font:700 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:transparent}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--spot);border-color:var(--spot);color:var(--spot-ink)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn .ic{width:15px;height:15px}

/* ---------- front page ---------- */
.front{padding-top:30px}
.front-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lead{padding-right:36px;border-right:1px solid var(--rule)}
.lead h1{font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.02}
.usp{display:flex;gap:12px;align-items:flex-start;margin:24px 0 0;padding:14px 16px;background:var(--mark-2);border-left:4px solid var(--spot);font-size:1rem;line-height:1.5}
.usp .ic{color:var(--spot);width:1.6em;height:1.6em;margin-top:.1em}
.how{padding-left:36px;align-self:center}
.how .usp{margin-top:0}
.how-h{font:700 .74rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:22px 0 10px}
.how-steps{margin:0;padding:0;list-style:none;counter-reset:how}
.how-steps li{counter-increment:how;position:relative;padding:10px 0 10px 2.3em;border-top:1px solid var(--hair);font-size:.98rem;line-height:1.45}
.how-steps li::before{content:counter(how);position:absolute;left:0;top:8px;font:700 1.7rem/1 var(--display);color:var(--spot)}
.how-steps code{font:.84em var(--mono);background:var(--paper-2);padding:.05em .3em}
.today-title{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.today-title a{text-decoration:none}
.today-foot{font:700 .7rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3em 1em;border-top:1px solid var(--hair);padding-top:10px}
.today-foot a{color:var(--spot);text-decoration:none;display:inline-flex;gap:.35em;align-items:center}
@media (max-width:880px){
  .front-grid{grid-template-columns:1fr}
  .lead{padding:0 0 28px;border-right:0;border-bottom:1px solid var(--rule)}
  .how{padding:24px 0 0}
}
.band{padding:8px 0 0}

/* desks */
.desks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.desk{padding:0 22px;border-left:1px solid var(--hair);display:flex;flex-direction:column}
.desk:first-child{padding-left:0;border-left:0}
.desk:last-child{padding-right:0}
.desk-name{display:flex;align-items:center;gap:.4em;font:700 1.55rem/1.1 var(--display);text-decoration:none}
.desk-name .ic{color:var(--spot)}
.desk-count{font:700 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:8px 0}
.desk-blurb{font:italic 1rem/1.45 var(--display);color:var(--ink-2);margin:0 0 12px}
.desk-list{list-style:none;margin:0 0 14px;padding:0;flex:1}
.desk-list li{border-top:1px solid var(--hair);padding:9px 0;font:700 1.02rem/1.3 var(--display)}
.desk-list a{text-decoration:none;display:flex;gap:.45em;align-items:baseline}
.desk-list .ic{color:var(--ink-3);width:.95em;height:.95em}
.desk-more{font:700 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--spot);display:inline-flex;gap:.4em;align-items:center}
@media (max-width:980px){
  .desks{grid-template-columns:1fr 1fr;row-gap:32px}
  .desk:nth-child(3){padding-left:0;border-left:0}
  .desk:nth-child(2){padding-right:0}
}
@media (max-width:560px){
  .desks{grid-template-columns:1fr}
  .desk{padding:0 !important;border-left:0}
}

/* ---------- cards ---------- */
.grid{display:grid;gap:30px 28px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:flex;flex-direction:column;text-decoration:none;border-top:2px solid var(--rule);padding-top:12px}
.card-body{display:flex;flex-direction:column;flex:1}
.card .kicker{margin-bottom:6px;font-size:.66rem}
.card-title{font:700 1.3rem/1.15 var(--display);margin:0 0 7px;text-wrap:balance}
.card-desc{color:var(--ink-2);font-size:.98rem;line-height:1.5}
.card-meta{display:flex;gap:.35em;align-items:center;margin-top:auto;padding-top:10px;font:700 .66rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.card:hover{color:inherit}
.card:hover .card-title{color:var(--spot);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.card-plated{border:1.5px solid var(--rule);padding-top:0;background:var(--paper)}
.card-plated .card-body{padding:14px 16px 16px}
.plate{position:relative;display:block;height:96px;background:var(--plate-bg);border-bottom:1.5px solid var(--rule);overflow:hidden}
.plate-bg{position:absolute;inset:0;display:block}
.plate-seal{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid var(--rule);display:grid;place-items:center;transition:background .15s}
.plate-seal .ic{width:28px;height:28px;color:var(--spot);transition:color .15s}
.card-plated:hover .plate-seal{background:var(--spot)}
.card-plated:hover .plate-seal .ic{color:var(--spot-ink)}

/* ---------- section and group fronts ---------- */
.section-head{display:flex;gap:22px;align-items:flex-start;padding:6px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.section-seal{flex:none;width:76px;height:76px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;background:var(--plate-bg)}
.section-seal .ic{width:38px;height:38px;color:var(--spot)}
.section-head h1{font-size:clamp(2rem,4.5vw,3.2rem)}
@media (max-width:560px){.section-head{gap:14px}.section-seal{width:54px;height:54px}.section-seal .ic{width:27px;height:27px}}
.tabs{display:flex;flex-wrap:wrap;margin:0 0 28px;border-bottom:1px solid var(--hair)}
.tabs a{display:inline-flex;gap:.45em;align-items:center;padding:12px 13px 10px;font:700 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--spot);border-bottom-color:var(--spot)}
.clipping{max-width:880px;padding:26px 0 6px;border-top:1px solid var(--rule)}
.project-mount + .clipping, .clipping:first-of-type{border-top:0}
.clipping h2{font-size:1.75rem}
.clipping h2 a{text-decoration:none}
.clipping .standfirst{font-size:1.05rem;margin-top:6px}

/* ---------- articles ---------- */
.entry{padding:34px 0 10px}
.entry-head{max-width:860px;margin:0 auto 30px;text-align:center}
.entry-head .kicker{justify-content:center}
.entry-head h1{font-size:clamp(2.2rem,5.2vw,3.8rem);line-height:1.04}
.entry-head .standfirst{margin:14px auto 0}
.byline,.build-time{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font:700 .7rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.byline{margin:20px 0 0;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.byline span,.build-time{display:inline-flex;gap:.45em;align-items:center}
.byline .by{color:var(--ink)}
.build-time{margin:10px 0 0;color:var(--spot)}
.article-body{max-width:var(--measure);margin:0 auto}
.article-body h2{font-size:1.7rem;margin:40px 0 10px}
.article-body h3{font-size:1.28rem;margin:30px 0 8px}
.article-body p{margin:0 0 1.05em;hyphens:auto}
.article-body ul,.article-body ol{padding-left:1.3em;margin:0 0 1.1em}
.article-body li{margin:.35em 0}
.article-body li::marker{color:var(--spot)}
.article-body code{font:.86em var(--mono);background:var(--paper-2);padding:.08em .35em;border-radius:2px}
.dropcap > p:first-of-type::first-letter{float:left;font:700 4.2em/.8 var(--display);margin:.07em .09em 0 0;color:var(--spot)}
.entry-foot{max-width:var(--max);margin:44px auto 0}
.entry-foot .btns{justify-content:center;margin-top:34px}
.note{margin:26px 0;padding:14px 18px;background:var(--paper-2);border-top:2px solid var(--rule);font:italic 1.03rem/1.55 var(--display);color:var(--ink-2)}
.note::before{content:"Note";display:block;font:700 .64rem/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--spot);margin-bottom:7px}
.photo{margin:28px 0}
.photo img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.photo figcaption{font:italic .93rem/1.45 var(--display);color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--hair)}
.lead-photo{max-width:980px;margin:0 auto 32px}

/* ---------- clippings (prompt blocks) ---------- */
.clip{position:relative;margin:28px 0;background:var(--paper-2);border:1.5px dashed var(--ink-3)}
.clip figcaption{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;border-bottom:1px dashed var(--ink-3);font:700 .72rem/1 var(--mono);letter-spacing:.05em;color:var(--ink-2)}
.clip-ic{position:absolute;top:-13px;left:22px;width:26px !important;height:26px !important;padding:0 3px;background:var(--paper);color:var(--spot);transform:scaleX(-1)}
.clip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip pre{margin:0;padding:16px 18px 18px;font:.9rem/1.62 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink);tab-size:2}
.copy{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:var(--ink);color:var(--paper);border:0;font:700 .7rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.copy:hover,.copy.done{background:var(--spot);color:var(--spot-ink)}
.copy .ic{width:14px;height:14px}
.clip-status{font:600 .68rem/1.3 var(--mono);letter-spacing:.04em;color:var(--spot);padding:0 16px 12px;margin-top:-6px}
.clip-status:empty{display:none}

/* fillable blanks inside clippings */
.slot{background:var(--mark);border-bottom:1.5px solid var(--spot);padding:0 .18em;outline:none;cursor:text;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:pre-wrap}
.slot:empty::before{content:"<" attr(data-label) ">";color:var(--ink-2);font-style:italic}
.slot:focus{box-shadow:0 0 0 2px var(--spot)}
.slot.filled{background:var(--mark-2);border-bottom-color:var(--ink-3)}

/* ---------- your project panel ---------- */
.project-mount:empty{display:none}
.project{border:1.5px solid var(--rule);background:var(--paper);box-shadow:6px 6px 0 var(--paper-3);padding:18px 20px;margin:6px 0 30px}
.article-body .project{margin-top:0}
/* Off the front page the panel is a tool, not an explanation: keep it tight. */
.project-mount:not([data-always]) .project{padding:12px 16px;margin-bottom:22px;box-shadow:4px 4px 0 var(--paper-3)}
.project-mount:not([data-always]) .project-head{margin-bottom:10px;align-items:center}
.project-mount:not([data-always]) .project-head p:not(.project-title){display:none}
.project-mount:not([data-always]) .project-head .ic{width:24px;height:24px}
.project-mount:not([data-always]) .project-title{font-size:1.1rem}
.project-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.project-head .ic{width:34px;height:34px;color:var(--spot)}
.project-head .project-title{font:700 1.4rem/1.1 var(--display);color:var(--ink);margin:0 0 4px}
.project-head p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.45}
.project-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.project-fields label{display:flex;flex-direction:column;gap:6px;font:700 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.project-fields input{font:1rem/1.3 var(--text);color:var(--ink);background:var(--mark-2);border:0;border-bottom:1.5px solid var(--ink);padding:9px 10px;border-radius:0;min-width:0;width:100%}
.project-fields input:focus{outline:none;background:var(--mark);border-bottom-color:var(--spot)}
.project-fields input::placeholder{color:var(--ink-3);font-style:italic}
.project-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;font:700 .66rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.project-foot span{display:inline-flex;gap:.45em;align-items:center}
.project-clear{background:none;border:1px solid var(--ink-3);color:var(--ink-2);font:inherit;padding:6px 10px;cursor:pointer}
.project-clear:hover{border-color:var(--spot);color:var(--spot)}
@media (max-width:880px){.project-fields{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.project-fields{grid-template-columns:1fr}.project{box-shadow:4px 4px 0 var(--paper-3)}}

/* ---------- colophon ---------- */
.colophon{margin-top:56px;padding-bottom:34px;font-size:.96rem}
.colophon .wrap{border-top:3px solid var(--rule)}
.colophon .wrap::before{content:"";display:block;border-top:1px solid var(--rule);margin:3px 0 28px}
.colophon-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.colophon-name{font:700 1.75rem/1.1 var(--display);margin:0 0 8px}
.colophon p{color:var(--ink-2);margin:0}
.colophon h2{font:700 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--spot)}
.colophon nav a{display:flex;gap:.55em;align-items:center;padding:6px 0;text-decoration:none;border-bottom:1px solid var(--hair)}
.colophon nav .ic{color:var(--ink-3)}
.imprint{margin:28px 0 0 !important;padding-top:14px;border-top:1px solid var(--hair);font:italic .92rem/1.5 var(--display);color:var(--ink-3) !important}
@media (max-width:760px){.colophon-grid{grid-template-columns:1fr 1fr}.colophon-grid>div:first-child{grid-column:1/-1}}

/* ---------- print ---------- */
@media print{
  body{background:#fff;color:#000}
  .sections,.project-mount,.copy,.btns,.colophon nav,.today-foot,.skip{display:none !important}
  .clip{border-color:#000;background:#fff}
}