:root{
  --paper:#f4efe4;
  --paper-dark:#e8dfcf;
  --ink:#191714;
  --muted:#6e685f;
  --rule:#aaa094;
  --red:#8a342f;
  --green:#3f5a43;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.65),transparent 30rem),
    linear-gradient(180deg,var(--paper),#efe8db);
  font-family:var(--serif);
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}
.wrap{width:min(var(--max),calc(100% - 34px));margin:auto;position:relative;z-index:1}
.utility{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:16px 0 12px;border-bottom:1px solid var(--ink);
  font:600 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase
}
.utility nav{display:flex;flex-wrap:wrap;gap:16px}
.utility .quiet{color:var(--muted);font-weight:500}
.utility a:hover{opacity:.55}
.masthead{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;
  padding:26px 0 23px;border-bottom:3px double var(--ink)
}
.issue{
  font:500 10px/1.55 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}
.brand{text-align:center}
.brand .name{margin:0;font-weight:400;font-size:clamp(42px,7vw,86px);line-height:.9;letter-spacing:-.05em}
.brand .sub{margin:9px 0 0;color:var(--muted);font-style:italic;font-size:14px}
.seal{
  justify-self:end;width:88px;height:88px;border:1px solid var(--red);color:var(--red);
  border-radius:50%;display:grid;place-items:center;text-align:center;transform:rotate(7deg);
  font:700 9px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase
}
.hero{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.7fr);gap:38px;
  padding:38px 0 42px;border-bottom:1px solid var(--ink)
}
.eyebrow{
  color:var(--red);font:700 10px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px
}
.hero h2{margin:0;font-weight:400;font-size:clamp(48px,7.8vw,104px);line-height:.88;letter-spacing:-.052em;max-width:980px}
.lede{font-size:clamp(20px,2.3vw,29px);line-height:1.33;max-width:760px;margin:22px 0 0;color:#37322c}
.meta{display:flex;gap:15px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font:600 10px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.text-link{display:inline-flex;gap:9px;align-items:center;margin-top:26px;padding-bottom:4px;border-bottom:1px solid var(--ink);font:700 10px var(--sans);letter-spacing:.11em;text-transform:uppercase}
.hero-aside{border-left:1px solid var(--rule);padding-left:28px}
.document-card{background:rgba(255,255,255,.17);border:1px solid var(--ink);padding:17px;transform:rotate(-1deg)}
.document-card .doc-title{font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:9px;margin-bottom:9px}
.document-card dl{margin:0}
.document-card div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dotted var(--rule);padding:8px 0}
.document-card div:last-child{border-bottom:none}
.document-card dt,.document-card dd{margin:0;font:600 10px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.document-card dd{font-weight:800}
.margin-note{margin:27px 0 0;font-size:25px;line-height:1.22;font-style:italic;transform:rotate(.4deg)}
.margin-note small{display:block;margin-top:12px;font:600 9px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:28px 0 13px;border-bottom:1px solid var(--ink)}
.section-title h3{font-size:31px;font-weight:400;margin:0;letter-spacing:-.025em}
.section-title span{font:600 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;padding:27px 0 42px;border-bottom:3px double var(--ink)}
.card{border-top:1px solid var(--rule);padding-top:12px}
.card.wide{grid-column:span 7}.card.narrow{grid-column:span 5}
.card .kind{font:700 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.card h4{font-weight:400;font-size:clamp(32px,4vw,54px);line-height:1.02;letter-spacing:-.032em;margin:0}
.card p{font-size:18px;line-height:1.58;color:#3c3731;max-width:64ch}
.card .aside-line{margin-top:17px;color:var(--green);font:700 10px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sketch{
  margin-top:22px;min-height:240px;border:1px solid var(--ink);position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(138,52,47,.05),rgba(63,90,67,.05)),
    repeating-linear-gradient(90deg,transparent 0 52px,rgba(25,23,20,.05) 52px 53px),
    repeating-linear-gradient(0deg,transparent 0 52px,rgba(25,23,20,.05) 52px 53px)
}
.sketch .route{position:absolute;left:12%;right:10%;top:50%;height:2px;background:var(--ink);transform:rotate(-8deg)}
.sketch .route:before,.sketch .route:after{content:"";position:absolute;top:-5px;width:12px;height:12px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.sketch .route:before{left:0}.sketch .route:after{right:0}
.sketch .bike-word{position:absolute;left:46%;top:38%;font-size:20px;font-style:italic;transform:rotate(-8deg)}
.sketch .place{position:absolute;font:700 9px var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sketch .a{left:8%;bottom:15%}.sketch .b{right:8%;top:17%}
.archive{padding:40px 0 56px}
.archive-row{display:grid;grid-template-columns:70px 120px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.archive-row .no{font:700 10px var(--sans);letter-spacing:.1em;color:var(--muted)}
.archive-row .kind{font:700 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.archive-row .title{font-size:23px}
.archive-row .date{font:600 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.archive-row:hover .title{font-style:italic}
.whatsapp{
  display:grid;grid-template-columns:.65fr 1.35fr;gap:44px;padding:42px 0 50px;border-top:1px solid var(--ink)
}
.whatsapp .label{font:700 10px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.whatsapp h3{font-weight:400;font-size:38px;line-height:1.05;margin:0 0 13px}
.whatsapp p{font-size:18px;line-height:1.5;color:#3c3731;max-width:680px}
.whatsapp .channel-link{display:inline-flex;margin-top:10px;border:1px solid var(--ink);padding:11px 14px;font:700 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.14)}
.whatsapp .channel-link:hover{background:var(--ink);color:var(--paper)}
.about{display:grid;grid-template-columns:.65fr 1.35fr;gap:44px;padding:42px 0 56px;border-top:3px double var(--ink)}
.about .label{font:700 10px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.about p{font-size:24px;line-height:1.38;margin:0;max-width:800px}
footer{border-top:1px solid var(--ink);padding:22px 0 35px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font:600 9px var(--sans);letter-spacing:.1em;text-transform:uppercase}

/* Story pages */
.story-head{padding:42px 0 28px;border-bottom:1px solid var(--ink)}
.story-head .back{font:700 9px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.story-head h1{font-size:clamp(50px,8vw,105px);font-weight:400;line-height:.9;letter-spacing:-.05em;margin:28px 0 18px;max-width:1000px}
.story-head .deck{font-size:24px;line-height:1.35;max-width:760px;color:#39342e}
.story-body{display:grid;grid-template-columns:minmax(0,720px) minmax(220px,1fr);gap:54px;padding:42px 0 54px}
.prose{font-size:20px;line-height:1.72}
.prose p{margin:0 0 1.35em}
.prose p:first-child:first-letter{float:left;font-size:5.3em;line-height:.72;padding-right:10px;padding-top:11px;color:var(--red)}
.prose .scene{font-style:italic}
.side-column{border-left:1px solid var(--rule);padding-left:24px}
.side-column .note{position:sticky;top:20px;font-size:18px;line-height:1.45;font-style:italic;color:#464038}
.side-column .note:before{content:"Nota al margen";display:block;margin-bottom:12px;font:700 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.story-nav{display:flex;justify-content:space-between;gap:20px;padding:24px 0 46px;border-top:3px double var(--ink);font:700 10px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.story-nav a:hover{opacity:.55}

/* privacy */
.consent{
  position:fixed;left:18px;bottom:18px;z-index:20;max-width:390px;background:#f5f0e5;border:1px solid var(--ink);padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.12);
  display:none
}
.consent.show{display:block}
.consent p{font:500 13px/1.45 var(--sans);margin:0 0 12px;color:#38342f}
.consent-actions{display:flex;gap:8px;flex-wrap:wrap}
.consent button{border:1px solid var(--ink);background:transparent;padding:8px 10px;font:700 9px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.consent button.primary{background:var(--ink);color:var(--paper)}

@media(max-width:820px){
  .masthead{grid-template-columns:1fr}.issue{text-align:center}.seal{display:none}
  .hero{grid-template-columns:1fr}.hero-aside{border-left:0;border-top:1px solid var(--rule);padding:24px 0 0}
  .card.wide,.card.narrow{grid-column:span 12}
  .archive-row{grid-template-columns:52px 1fr auto}.archive-row .kind{display:none}
  .whatsapp,.about{grid-template-columns:1fr;gap:16px}
  .story-body{grid-template-columns:1fr}.side-column{border-left:0;border-top:1px solid var(--rule);padding:20px 0 0}.side-column .note{position:static}
}
@media(max-width:560px){
  .wrap{width:min(var(--max),calc(100% - 22px))}
  .utility .quiet{display:none}.brand .name{font-size:49px}.brand .sub{font-size:12px}
  .hero{padding-top:26px}.hero h2{font-size:52px}.lede{font-size:21px}
  .archive-row{grid-template-columns:38px 1fr}.archive-row .date{grid-column:2}
  .story-head h1{font-size:52px}.story-body{padding-top:30px}.prose{font-size:18px}
  footer{flex-direction:column}
}