/* dziwex.com — archive paper, carbon ink, one stamp red */
:root{
  --paper:#e9e3d4;
  --paper-2:#ded7c5;
  --ink:#1c1b1a;
  --ink-2:#4a4741;
  --ink-3:#7a766d;
  --rule:#c2bba8;
  --stamp:#8f2a25;
  --carbon:#2f4a6d;
  --measure:38rem;
  --font-display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --font-body:"Spectral",Georgia,serif;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.6;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.35),transparent 60%),
  var(--paper)}
a{color:var(--carbon);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--stamp)}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
img,svg{max-width:100%;height:auto}

/* header */
.top{padding:1.2rem 16px 0;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;max-width:72rem;margin:0 auto;width:100%}
.brand{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.brand small{font-family:var(--font-body);font-weight:400;font-size:.8rem;color:var(--ink-3);margin-left:.6rem;letter-spacing:0}
.lang{font-size:.85rem;color:var(--ink-3)}
.lang a{color:var(--ink-2)}
.lang span{margin:0 .35rem}
nav.main{max-width:72rem;margin:.9rem auto 0;padding:0 16px;width:100%}
nav.main ol{list-style:none;margin:0;padding:.6rem 0 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.03em}
nav.main a{color:var(--ink-2);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--stamp)}

/* layout */
main{flex:1;width:100%;max-width:72rem;margin:0 auto;padding:2.5rem 16px 4rem}
.prose{max-width:var(--measure)}
.prose p,.prose ul,.prose ol,.prose blockquote{margin:0 0 1.2rem}
.prose li{margin-bottom:.4rem}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:.01em;margin:0 0 1rem}
h1{font-size:clamp(2.4rem,6vw,4.2rem);max-width:20ch}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:3rem}
h3{font-size:1.3rem;margin-top:2rem}
.lede{font-size:1.2rem;line-height:1.5;color:var(--ink-2);max-width:var(--measure);margin-bottom:2.5rem}
.kicker{font-family:var(--font-display);font-size:1rem;color:var(--ink-3);margin:0 0 .5rem}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}
blockquote{border-left:3px solid var(--stamp);padding:.2rem 0 .2rem 1.2rem;font-style:italic;color:var(--ink-2)}
blockquote cite{display:block;font-style:normal;font-size:.9rem;color:var(--ink-3);margin-top:.5rem}
sup.fn{font-family:var(--font-display);font-size:.7em;line-height:0;margin-left:.1em}
sup.fn a{color:var(--stamp);text-decoration:none}
.note{font-size:.95rem;color:var(--ink-2);border:1px solid var(--rule);padding:1rem 1.2rem;margin:1.5rem 0;background:var(--paper-2)}
.stamp{display:inline-block;font-family:var(--font-display);font-size:.85rem;letter-spacing:.06em;color:var(--stamp);border:1.5px solid var(--stamp);padding:.1rem .5rem;transform:rotate(-2deg);margin:0 0 1rem}

/* hero on home */
.hero{padding:3rem 0 2rem;border-bottom:1px solid var(--rule);margin-bottom:3rem}
.hero .word{font-family:var(--font-display);font-weight:700;font-size:clamp(4.5rem,18vw,13rem);line-height:.9;letter-spacing:-.01em;margin:0;position:relative;display:inline-block;color:var(--ink)}
.hero .word::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.06em;background:var(--stamp);transform:rotate(-1.5deg)}
.hero .gloss{margin:1.2rem 0 0;max-width:var(--measure);font-size:1.15rem;color:var(--ink-2)}
.hero .gloss b{font-weight:600;color:var(--ink)}
.dedication{margin:2.5rem 0 0;padding:1.5rem 0;border-top:1px solid var(--rule);font-style:italic;font-size:1.25rem;max-width:var(--measure);color:var(--ink)}

/* grid of chapters */
.chapters{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem 2rem;counter-reset:ch}
.chapters li{border-top:1px solid var(--rule);padding-top:.8rem;counter-increment:ch}
.chapters li::before{content:counter(ch,decimal-leading-zero);font-family:var(--font-display);color:var(--ink-3);display:block;font-size:.95rem}
.chapters a{font-family:var(--font-display);font-size:1.35rem;color:var(--ink);text-decoration:none}
.chapters a:hover{color:var(--stamp)}
.chapters p{margin:.3rem 0 0;font-size:.95rem;color:var(--ink-2)}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--ink);max-width:var(--measure)}
.timeline li{position:relative;padding:0 0 2rem 1.6rem}
.timeline li::before{content:"";position:absolute;left:-7px;top:.55rem;width:12px;height:12px;background:var(--paper);border:2px solid var(--ink);border-radius:50%}
.timeline li.mark::before{background:var(--stamp);border-color:var(--stamp)}
.timeline time{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--ink)}
.timeline p{margin:.3rem 0 0}

/* figures & tables */
table{border-collapse:collapse;width:100%;max-width:44rem;margin:1rem 0 2rem;font-size:.95rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
figure{margin:2rem 0}
figcaption{font-size:.9rem;color:var(--ink-3);margin-top:.5rem;max-width:var(--measure)}
.bars{display:grid;gap:.6rem;max-width:44rem}
.bar{display:grid;grid-template-columns:11rem 1fr auto;align-items:center;gap:.8rem;font-size:.95rem}
.bar i{display:block;height:1.1rem;background:var(--carbon)}
.bar.alt i{background:var(--stamp)}
.bar b{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums}
.range{position:relative;height:2.4rem;max-width:44rem;margin:1rem 0 .5rem;background:linear-gradient(to right,var(--carbon) 0 20%,var(--paper-2) 20% 100%);border:1px solid var(--rule)}
.range::after{content:"";position:absolute;left:20%;right:0;top:0;bottom:0;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(143,42,37,.35) 6px 8px)}
.range span{position:absolute;top:100%;transform:translateX(-50%);font-family:var(--font-display);font-size:.95rem;margin-top:.3rem;white-space:nowrap}

/* people list */
.people dt{font-family:var(--font-display);font-size:1.25rem;margin-top:1.4rem}
.people dd{margin:0;max-width:var(--measure)}

/* sources */
.sources{padding-left:2.2rem;max-width:44rem}
.sources li{margin-bottom:.8rem;font-size:.95rem}
.sources li:target{background:var(--paper-2);outline:2px solid var(--stamp);outline-offset:4px}

/* footer */
footer{border-top:1px solid var(--rule);padding:1.5rem 16px 2.5rem;font-size:.85rem;color:var(--ink-3)}
footer div{max-width:72rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}

@media (max-width:640px){
  html{font-size:17px}
  .bar{grid-template-columns:1fr auto;grid-template-areas:"l v" "b b"}
  .bar span{grid-area:l}.bar i{grid-area:b}.bar b{grid-area:v}
}
@media (prefers-reduced-motion:no-preference){
  .hero .word::after{transform-origin:left;animation:strike .9s cubic-bezier(.2,.7,.2,1) .3s both}
  @keyframes strike{from{transform:scaleX(0) rotate(-1.5deg)}to{transform:scaleX(1) rotate(-1.5deg)}}
}

/* language switch with flags */
.lang a,.lang span[aria-current]{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-family:var(--font-display);font-size:1rem;letter-spacing:.02em;margin-left:1rem}
.lang span[aria-current]{color:var(--ink);border-bottom:2px solid var(--stamp)}
.lang a{color:var(--ink-2)}
.lang a:hover{color:var(--stamp)}
.lang svg{border:1px solid var(--rule)}

/* home gloss with Pewex logo */
.gloss-row{display:flex;gap:1.5rem;align-items:flex-start;margin-top:1.2rem;max-width:52rem}
.gloss-row .gloss{margin-top:0}
.pewex{flex:0 0 auto;width:110px;height:auto;filter:grayscale(1) contrast(1.1);opacity:.85;margin-top:.3rem}
@media (max-width:640px){.gloss-row{flex-direction:column;gap:.8rem}.pewex{width:80px}}

/* dot grid: 1,500 women */
.dots{display:block;width:100%;max-width:44rem;height:auto;margin:0}
.dots .d1{fill:var(--stamp)}
.dots .d2{fill:none;stroke:var(--ink-3);stroke-width:.8}

/* route map */
.map{display:block;width:100%;max-width:36rem;height:auto;background:var(--paper-2);border:1px solid var(--rule)}

/* reconstructed advert */
.advert-box{max-width:26rem;border:2px solid var(--ink);padding:1.2rem 1.4rem;font-family:var(--font-body);font-size:.95rem;line-height:1.4;background:#f1ece0;box-shadow:4px 4px 0 var(--rule)}
.advert-box p{margin:0 0 .5rem}
.advert-h{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.04em;border-bottom:1px solid var(--ink);padding-bottom:.4rem;margin-bottom:.7rem!important}

/* verdict card */
.verdict{max-width:30rem;border:1px solid var(--rule);padding:1rem 1.2rem;background:var(--paper-2)}
.verdict table{margin:0 0 .6rem}
.verdict tr:last-child td{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--stamp);border-bottom:0;padding-top:.8rem}

/* document figures and gallery */
figure.doc img{display:block;max-width:22rem;width:100%;border:1px solid var(--rule);background:var(--paper-2)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:2rem;margin:1rem 0 2rem}
.gallery figure.doc{margin:0}
.gallery figure.doc img{max-width:100%;aspect-ratio:4/3;object-fit:contain;padding:.6rem}
ul.links{max-width:44rem;padding-left:1.2rem}
ul.links li{margin-bottom:.7rem}

/* small-screen fixes */
.verdict td.n{white-space:normal}
.range{margin-bottom:2.4rem}
.range span:first-child{transform:none}
.range span:last-child{transform:translateX(-100%)}

@media (max-width:480px){.brand small{display:none}}