/* WEB PANEL PROXY public CSS */
:root{
  --paper:#f4ead5;--paper-soft:#efe3c6;--paper-dark:#e3d3ad;
  --ink:#2a1f14;--ink-soft:#5c4a33;--ink-faint:#8a7554;
  --accent:#8b2e1f;--accent-soft:#b04a36;--rule:#b89968;
  --shadow:rgba(42,31,20,.08);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --maxw:72rem;--gutter:clamp(1.25rem,4vw,3rem);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);color:var(--ink);background-color:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%,rgba(139,46,31,.05),transparent 40%),
    radial-gradient(circle at 82% 88%,rgba(42,31,20,.05),transparent 45%),
    repeating-linear-gradient(0deg,rgba(42,31,20,.015) 0,rgba(42,31,20,.015) 1px,transparent 1px,transparent 3px);
  line-height:1.65;min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(139,46,31,.35);transition:color .2s,border-color .2s}
a:hover,a:focus-visible{color:var(--accent-soft);border-bottom-color:var(--accent-soft);outline:none}

/* === Page switching via :target === */
.page-section{display:none}
#page-index{display:block}
.page-section:target{display:block}
.page-section:target~#page-index{display:none}

/* === Masthead === */
.masthead{border-bottom:1px solid var(--rule);background:linear-gradient(180deg,var(--paper-soft),var(--paper));padding:1.25rem var(--gutter) .75rem}
.masthead-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.85rem;border-bottom:none;color:var(--ink)}
.brand:hover{border-bottom:none;color:var(--ink)}
.brand-seal{flex:0 0 auto;filter:drop-shadow(0 1px 0 rgba(42,31,20,.15))}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-title{font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.brand-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:.2rem}
.nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav-link{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid transparent;padding:.2rem 0}
.nav-link:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav-link.is-current{color:var(--ink);border-bottom-color:var(--accent)}
.postmark{max-width:var(--maxw);margin:.75rem auto 0;color:var(--accent);opacity:.75;display:flex;justify-content:flex-end}
.postmark svg{display:block}

/* === Layout === */
.container{max-width:var(--maxw);margin:0 auto;padding:3rem var(--gutter);flex:1 0 auto;width:100%}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem}

/* === Hero === */
.hero{padding-bottom:2.5rem;border-bottom:1px solid var(--rule);margin-bottom:3rem}
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5vw,3.4rem);line-height:1.15;letter-spacing:-.005em;margin:0 0 1.5rem;color:var(--ink)}
.lede{font-size:1.15rem;max-width:44rem;color:var(--ink-soft);margin:0}
.hero-rule{margin-top:2.5rem;height:1px;background:linear-gradient(90deg,var(--accent),transparent 60%);width:8rem}

/* === Grid / Cards === */
.grid{display:grid;gap:1.75rem;margin-bottom:3rem}
.grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:52rem){.grid-three{grid-template-columns:1fr}}
.card{background:var(--paper-soft);border:1px solid var(--rule);padding:1.75rem 1.5rem;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 20px -12px var(--shadow);transition:transform .25s ease}
.card::before{content:"";position:absolute;top:.5rem;left:.5rem;right:.5rem;bottom:.5rem;border:1px dashed rgba(184,153,104,.5);pointer-events:none}
.card-title{font-family:var(--serif);font-size:1.25rem;margin:0 0 .75rem;color:var(--ink);letter-spacing:.01em}
.card-body{margin:0 0 1.25rem;color:var(--ink-soft);font-size:.98rem}
.card-link{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

/* === Notice === */
.notice{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2rem 0;display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:baseline}
@media(max-width:42rem){.notice{grid-template-columns:1fr;gap:.75rem}}
.notice-title{font-family:var(--serif);font-size:1.35rem;margin:0;color:var(--ink)}
.notice p{margin:0 0 .75rem;color:var(--ink-soft)}
.notice-note{font-style:italic;color:var(--ink-faint)!important;margin-bottom:0!important}

/* === Page head === */
.page-head{margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.page-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.15;margin:0 0 1rem;letter-spacing:-.005em}
.page-lede{max-width:44rem;color:var(--ink-soft);margin:0;font-size:1.05rem}

/* === Catalogue === */
.letter-list{list-style:none;padding:0;margin:0 0 3rem;border-top:1px solid var(--rule)}
.letter-row{display:grid;grid-template-columns:5.5rem 11rem 14rem 14rem 1fr;gap:1.25rem;padding:1.1rem .25rem;border-bottom:1px solid rgba(184,153,104,.5);align-items:baseline;font-size:.95rem}
.letter-row:hover{background:rgba(239,227,198,.6)}
.letter-no{font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;color:var(--accent)}
.letter-date{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em}
.letter-weather,.letter-distance{color:var(--ink-soft);font-style:italic}
.letter-note{color:var(--ink)}
@media(max-width:58rem){.letter-row{grid-template-columns:1fr;gap:.2rem}.letter-no{color:var(--accent);font-weight:600}}
.marginalia{max-width:34rem;margin-left:auto;padding:1.5rem 1.75rem;border-left:3px solid var(--accent);background:var(--paper-soft);color:var(--ink-soft)}
.marginalia h2{font-family:var(--serif);font-size:1.1rem;margin:0 0 .5rem;color:var(--ink)}
.marginalia p{margin:0;font-size:.95rem}

/* === Letter specimen === */
.letter-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.5rem;margin:1.5rem 0 0;font-size:.9rem}
@media(max-width:42rem){.letter-meta{grid-template-columns:1fr 1fr}}
.letter-meta div{border-top:1px solid var(--rule);padding-top:.6rem}
.letter-meta dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.25rem}
.letter-meta dd{margin:0;color:var(--ink)}
.letter-body{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;margin-bottom:3rem}
@media(max-width:56rem){.letter-body{grid-template-columns:1fr}}
.letter-paper{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 30%),var(--paper-soft);border:1px solid var(--rule);padding:2.25rem 2rem;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.75;color:var(--ink);box-shadow:0 10px 30px -18px rgba(42,31,20,.4);position:relative}
.letter-paper::before{content:"";position:absolute;inset:.5rem;border:1px solid rgba(184,153,104,.45);pointer-events:none}
.letter-paper p{margin:0 0 1rem}
.letter-salutation{font-weight:500;font-style:normal}
.letter-closing{margin-top:1.5rem}
.letter-signature{margin:0;font-style:normal}
.letter-facsimile{margin:0;align-self:start}
.letter-facsimile svg{display:block;background:var(--paper-soft);border:1px solid var(--rule);box-shadow:0 6px 20px -12px var(--shadow)}
.letter-facsimile figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);margin-top:.75rem;text-transform:uppercase}
.letter-nav{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}

/* === About / Prose === */
.prose{max-width:42rem;margin-bottom:3rem}
.prose h2{font-family:var(--serif);font-size:1.35rem;font-weight:500;margin:2.5rem 0 .75rem;color:var(--ink);letter-spacing:.01em}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1rem;color:var(--ink-soft)}
.prose p:first-of-type::first-line{font-variant:small-caps;letter-spacing:.05em}
.keepers{list-style:none;padding:0;margin:1rem 0 0;border-top:1px solid var(--rule)}
.keepers li{display:flex;justify-content:space-between;padding:.75rem .25rem;border-bottom:1px solid rgba(184,153,104,.5);font-size:.95rem}
.keeper-name{color:var(--ink)}
.keeper-term{font-family:var(--mono);font-size:.82rem;color:var(--ink-faint);letter-spacing:.06em}

/* === 404 === */
.lost{text-align:center;padding:2rem 0 3rem;color:var(--ink-soft)}
.lost-seal{display:block;margin:0 auto 2rem;color:var(--accent);opacity:.85}
.lost-title{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:500;margin:0 0 1rem;color:var(--ink)}
.lost-lede{max-width:34rem;margin:0 auto 1.5rem;font-size:1.05rem}
.lost-note{max-width:30rem;margin:0 auto 2rem}
.lost-code{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* === Colophon === */
.colophon{border-top:1px solid var(--rule);background:var(--paper-soft);padding:1.5rem var(--gutter);margin-top:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
.colophon p{margin:.15rem 0}

/* === Selection & focus === */
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px dashed var(--accent);outline-offset:3px}