/*
Theme Name: Bluebook
Theme URI: https://selfproject.eu/
Author: Selfproject Editorial
Description: Custom syllabus-ledger theme for selfproject.eu
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluebook
*/

/* ============ fonts (self-hosted) ============ */
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ZillaSlab-400.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ZillaSlab-500.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ZillaSlab-600.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ZillaSlab-700.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/FiraSans-400.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/FiraSans-400i.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/FiraSans-500.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/FiraSans-600.woff2') format('woff2')}

/* ============ cyanotype tokens ============ */
:root{
  --paper:#F5F2E9;
  --paper-deep:#EDE8DA;
  --prussian:#1D5C7E;
  --prussian-deep:#14425C;
  --ink:#22303C;
  --ink-soft:#3d4c58;
  --wash:#D8E4E9;
  --madder:#9C4227;
  --rule:#B9C6CC;
  --ease-print:cubic-bezier(0.22,1,0.36,1);
  --dur-base:240ms;
  --dur-slow:420ms;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--prussian);color:var(--paper)}
html{scrollbar-color:var(--prussian) var(--paper-deep);scroll-behavior:smooth}
body{font-family:'Fira Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;font-size:17px}
h1,h2,h3,h4{font-family:'Zilla Slab',serif;color:var(--prussian-deep);line-height:1.25}
a{color:var(--prussian);text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur-base) var(--ease-print),text-decoration-color var(--dur-base) var(--ease-print)}
a:hover{color:var(--prussian-deep);text-decoration-style:solid}
a:focus-visible{outline:2px solid var(--madder);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.4rem}
hr{border:none;border-top:1px dotted var(--rule);margin:2rem 0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--prussian);color:var(--paper);padding:.6rem 1rem;z-index:99}
.skip-link:focus{left:0}

/* ============ header ============ */
.topline{height:6px;background:var(--prussian)}
header.site{max-width:1080px;margin:0 auto;padding:1.4rem 1.5rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-bottom:2px solid var(--prussian)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand svg{width:44px;height:44px;flex-shrink:0}
.brand-name{font-family:'Zilla Slab',serif;font-weight:700;font-size:1.5rem;color:var(--prussian-deep);letter-spacing:.01em;display:block;line-height:1.1}
.brand-sub{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--prussian);font-weight:500}
nav.primary ul{list-style:none;display:flex;gap:1.4rem;padding:0;flex-wrap:wrap}
nav.primary a{font-size:.95rem;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:2px dotted transparent;padding-bottom:2px;transition:border-color var(--dur-base) var(--ease-print),color var(--dur-base) var(--ease-print)}
nav.primary a:hover,nav.primary li.current a{color:var(--prussian-deep);border-bottom:2px solid var(--prussian)}

/* ============ masthead ============ */
.masthead{max-width:1080px;margin:0 auto;padding:2.6rem 1.5rem 2.2rem;border-bottom:1px solid var(--rule)}
.masthead .kicker,.page-kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--madder);font-weight:600;margin-bottom:.9rem}
.masthead h1{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.14;font-weight:600;max-width:22ch}
.masthead p.lede{max-width:60ch;margin-top:1.1rem;font-size:1.06rem;color:var(--ink-soft)}

/* ============ ledger: units + rail ============ */
.ledger{max-width:1080px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 270px;gap:3.2rem}
@media(max-width:860px){.ledger{grid-template-columns:1fr}}
.units{padding:1.6rem 0 2rem}
.unit{display:grid;grid-template-columns:64px 1fr 190px;gap:1.4rem;align-items:start;padding:1.9rem 0;border-bottom:1px solid var(--rule)}
@media(max-width:640px){.unit{grid-template-columns:48px 1fr}.unit .thumb{grid-column:2;margin-top:.8rem}}
.unit-no{font-family:'Zilla Slab',serif;font-weight:700;font-size:1.15rem;color:var(--paper);background:var(--prussian);width:52px;height:52px;display:flex;align-items:center;justify-content:center;transform:rotate(-3deg);transition:transform var(--dur-base) var(--ease-print),background var(--dur-base) var(--ease-print)}
.unit:hover .unit-no{transform:rotate(0deg);background:var(--madder)}
.unit h2{font-size:1.42rem;font-weight:600;margin-bottom:.45rem}
.unit h2 a{text-decoration:none;color:var(--prussian-deep);border-bottom:2px dotted var(--rule);transition:border-color var(--dur-base) var(--ease-print)}
.unit h2 a:hover{border-bottom:2px solid var(--prussian)}
.unit p{font-size:.97rem;color:var(--ink-soft)}
.unit .tag{display:inline-block;margin-top:.6rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--prussian);font-weight:600}

/* signature: cyanotype develop on thumbs */
.thumb{position:relative;overflow:hidden;border:1px solid var(--prussian-deep)}
.thumb img{filter:grayscale(1) sepia(.25) hue-rotate(160deg) saturate(2.4) brightness(.92);transition:filter var(--dur-slow) var(--ease-print)}
.thumb:hover img,.unit:hover .thumb img,a:hover .thumb img{filter:none}
.thumb::after{content:"";position:absolute;inset:0;background:var(--prussian);mix-blend-mode:screen;opacity:.18;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-print)}
.thumb:hover::after,.unit:hover .thumb::after,a:hover .thumb::after{opacity:0}

aside.rail{padding:2.2rem 0;border-left:1px solid var(--rule);padding-left:2rem}
@media(max-width:860px){aside.rail{border-left:none;padding-left:0;border-top:2px solid var(--prussian)}}
.rail h2{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--madder);margin-bottom:1rem;font-family:'Fira Sans',sans-serif;font-weight:600}
.rail .note{font-size:.9rem;padding:.9rem 0;border-bottom:1px dotted var(--rule)}
.rail .note strong{font-family:'Zilla Slab',serif;color:var(--prussian-deep);display:block;font-size:1.02rem}
.rail .dateline{font-size:.8rem;color:var(--prussian);letter-spacing:.06em;margin-bottom:1.2rem;font-variant-numeric:tabular-nums}

/* ============ page / article ============ */
.page-wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 270px;gap:3.2rem}
@media(max-width:860px){.page-wrap{grid-template-columns:1fr}}
.page-head{padding:2.4rem 0 1.6rem}
.page-head h1{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:600;max-width:26ch}
.page-head .thumb{margin-top:1.6rem;max-width:720px}
.prose{padding-bottom:2.5rem}
.prose>p,.prose>ul,.prose>ol{max-width:68ch;margin-bottom:1.05rem}
.prose h2{font-size:1.55rem;margin:2.2rem 0 .9rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.prose h3{font-size:1.18rem;margin:1.5rem 0 .6rem}
.prose blockquote{border-left:3px double var(--prussian);padding:.4rem 0 .4rem 1.2rem;margin:1.4rem 0;color:var(--ink-soft);font-style:italic}
.prose table{border-collapse:collapse;margin:1.4rem 0;width:100%;font-size:.95rem}
.prose th{font-family:'Zilla Slab',serif;text-align:left;border-bottom:2px solid var(--prussian);padding:.5rem .7rem}
.prose td{border-bottom:1px solid var(--rule);padding:.5rem .7rem;vertical-align:top}
.prose figure{margin:1.6rem 0}
.prose figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem}

/* annotation card (site-specific callout — stamped corner, no tint+left-bar idiom) */
.prose .fieldnote{position:relative;border:1px solid var(--prussian);padding:1.1rem 1.3rem 1.1rem 1.3rem;margin:1.6rem 0;max-width:68ch;background:transparent}
.prose .fieldnote::before{content:"";position:absolute;top:-6px;left:14px;width:34px;height:12px;background:var(--madder);transform:rotate(-2deg)}
.prose .fieldnote p{margin:0;font-size:.97rem}

/* ============ FAQ ============ */
.faq details{border-bottom:1px solid var(--rule);padding:.9rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.8rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:'Zilla Slab',serif;font-weight:700;color:var(--madder);font-size:1.2rem}
.faq details[open] summary::before{content:"\2013"}
.faq summary h3{font-size:1.08rem;font-weight:600;margin:0;display:inline;padding:0;border:none}
.faq details>div{margin:.7rem 0 .3rem 2rem;max-width:64ch}
.faq details>div p{margin-bottom:.6rem}

/* ============ byline / author ============ */
.byline{display:flex;align-items:center;gap:1rem;border:1px solid var(--rule);border-left:none;border-right:none;padding:1.1rem 0;margin:2.2rem 0 0}
.byline img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--prussian)}
.byline .who strong{font-family:'Zilla Slab',serif;color:var(--prussian-deep);font-size:1.05rem;display:block}
.byline .who span{font-size:.88rem;color:var(--ink-soft)}

/* ============ buttons: stamp-press ============ */
.btn{display:inline-block;font-weight:600;font-size:.95rem;color:var(--paper);background:var(--prussian);padding:.65rem 1.3rem;text-decoration:none;border:1px solid var(--prussian-deep);box-shadow:3px 3px 0 var(--prussian-deep);transition:box-shadow var(--dur-base) var(--ease-print),transform var(--dur-base) var(--ease-print)}
.btn:hover{box-shadow:1px 1px 0 var(--prussian-deep);transform:translate(2px,2px);color:var(--paper)}
.btn:active{box-shadow:0 0 0 var(--prussian-deep);transform:translate(3px,3px)}

/* ============ develop-in reveal (JS adds .dev-on; no-JS sees everything) ============ */
@media (prefers-reduced-motion: no-preference){
  .dev-on .devq{opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease-print),transform var(--dur-slow) var(--ease-print)}
  .dev-on .devq.devd{opacity:1;transform:none}
}

/* ============ footer ============ */
footer.site{border-top:6px solid var(--prussian);background:var(--prussian-deep);color:var(--wash);margin-top:3rem}
footer.site .inner{max-width:1080px;margin:0 auto;padding:2.2rem 1.5rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.9rem}
footer.site a{color:var(--wash)}
footer.site a:hover{color:#fff}
footer.site strong{font-family:'Zilla Slab',serif;color:#fff;font-size:1.1rem}
.copyleft{display:inline-block;transform:scaleX(-1);transition:transform var(--dur-slow) var(--ease-print)}
.colophon:hover .copyleft{transform:scaleX(1)}

/* 404 + search */
.slim{max-width:720px;margin:0 auto;padding:3rem 1.5rem}
.searchform input[type=search]{font:inherit;padding:.5rem .7rem;border:1px solid var(--prussian);background:#fff;color:var(--ink)}
.searchform button{font:inherit;font-weight:600;background:var(--prussian);color:var(--paper);border:1px solid var(--prussian-deep);padding:.5rem 1rem;cursor:pointer}

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