/* lincolnhunt.com: an entertainment magazine */

:root {
  --font-heading: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-body: 'Karla', system-ui, 'Segoe UI', Roboto, sans-serif;

  --paper: #F5F3EE;
  --paper-2: #ECE8DF;
  --ink: #111111;
  --ink-soft: #55534E;
  --rule: #CFC9BD;
  --blue: #1F3BFF;       /* cobalt: the one accent */

  --gap-s: 1.5rem;
  --gap-m: 3rem;
  --gap-l: clamp(4rem, 8vw, 7rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.08rem; line-height: 1.65; }

a { color: var(--ink); text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { top: 1rem; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; margin: 0; line-height: 1; letter-spacing: -.01em; }
h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-bottom: var(--gap-s); }
.kicker { font-family: var(--font-body); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--blue); }

section { padding-top: var(--gap-l); scroll-margin-top: 1rem; }

/* ---------- Header strip ---------- */

.strip { border-bottom: 3px solid var(--ink); }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1.25rem; padding-top: .45rem; padding-bottom: .45rem; }
.brand { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav, .langs { display: flex; flex-wrap: wrap; gap: .1rem; }
.nav a, .langs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .7rem;
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: var(--ink-soft);
}
.langs a { min-width: 40px; padding: 0 .45rem; }
.nav a:hover, .langs a:hover { color: var(--ink); }
.nav a[aria-current="page"], .langs a[aria-current="page"] { color: var(--paper); background: var(--ink); }

/* ---------- The cover ---------- */

.cover { padding-top: clamp(1.25rem, 3vw, 2rem); }
.issue { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; border-bottom: 1px solid var(--ink); padding-bottom: .5rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.masthead { font-size: clamp(4.2rem, 17vw, 15rem); font-weight: 900; line-height: .82; letter-spacing: -.035em; text-transform: uppercase; margin: .6rem 0 0; }
.masthead .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.masthead .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .masthead .w > span { animation: rise 700ms var(--ease) both; }
  .masthead .w:nth-child(2) > span { animation-delay: 120ms; }
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }

.cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap-m); align-items: start; margin-top: 1.25rem; }
.cover-photo { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
.cover-photo img { display: block; width: 100%; height: auto; }
.cover-photo figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: .5rem; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { padding: .9rem 0; border-top: 1px solid var(--ink); }
.lines li:first-child { border-top: 3px solid var(--ink); }
.lines .k { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); }
.lines b { display: block; font-family: var(--font-heading); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.1; margin-top: .2rem; }
.cover-lede .role { font-family: var(--font-heading); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0 0 .9rem; }
.cover-lede p { margin: 0 0 1.2rem; color: var(--ink-soft); }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .55rem 1.5rem;
  font-family: var(--font-body); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--paper); background: var(--blue); border: 2px solid var(--blue); border-radius: 0;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Editor's letter ---------- */

.letter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-m); border-top: 3px solid var(--ink); padding-top: 1.25rem; }
.letter .body { columns: 2 18rem; column-gap: var(--gap-m); }
.letter .body p { margin: 0 0 1.1rem; break-inside: avoid; }
.letter .body p:first-child::first-letter { float: left; font-family: var(--font-heading); font-weight: 900; font-size: 4.6em; line-height: .8; padding: .05em .08em 0 0; color: var(--blue); }
.letter .sig { font-family: var(--font-heading); font-style: italic; font-size: 1.5rem; margin: .5rem 0 0; }

/* ---------- Pull quote ---------- */

.pull { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: var(--gap-m) 0; text-align: center; }
.pull p { font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 4.2vw, 3.2rem); line-height: 1.15; max-width: 24ch; margin: 0 auto; }
.pull p::before { content: "\201C"; color: var(--blue); }
.pull p::after { content: "\201D"; color: var(--blue); }

/* ---------- In this issue (topics) ---------- */

.contents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-m); counter-reset: f; }
.contents li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--ink); }
.contents .n { font-family: var(--font-heading); font-weight: 900; font-size: 2.6rem; line-height: .9; color: var(--blue); }
.contents h3 { font-size: 1.5rem; line-height: 1.1; margin-bottom: .35rem; }
.contents p { margin: 0; color: var(--ink-soft); }

/* ---------- Weekend section ---------- */

.weekend { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem var(--gap-m); align-items: start; }
.weekend > p { margin: 0; font-size: 1.2rem; }
.weekend .card { border-top: 3px solid var(--ink); padding-top: .8rem; }
.weekend .card b { display: block; font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.1; margin-bottom: .3rem; }
.weekend .card span { color: var(--ink-soft); }

/* ---------- Books ---------- */

.sec-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; }
.sec-row h2 { margin-bottom: .4rem; }
.more { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.intro { color: var(--ink-soft); margin: 0 0 var(--gap-s); max-width: 58ch; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-m); }
.shelf a { display: block; text-decoration: none; }
.shelf img { display: block; width: 100%; height: auto; box-shadow: 0 14px 28px rgba(17, 17, 17, .18); transition: transform .35s var(--ease); }
.shelf a:hover img, .shelf a:focus-visible img { transform: translateY(-8px); }
.shelf b { display: block; font-family: var(--font-heading); font-size: 1.45rem; line-height: 1.1; margin-top: .35rem; }
.status { display: inline-block; margin-top: 1rem; padding: .15rem .55rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--paper); background: var(--blue); }
.status.wip { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }

.book { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--gap-m); align-items: start; padding: var(--gap-m) 0; border-top: 1px solid var(--ink); scroll-margin-top: 1rem; }
.book:first-of-type { border-top: 0; padding-top: 0; }
.book img { display: block; width: 100%; height: auto; box-shadow: 0 14px 28px rgba(17, 17, 17, .18); }
.book .status { margin: 0 .5rem 0 0; vertical-align: middle; }
.book h2 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin: .6rem 0 .4rem; }
.book .subtitle { font-family: var(--font-heading); font-style: italic; font-size: 1.35rem; line-height: 1.25; color: var(--ink-soft); margin: 0 0 1rem; }
.book p { max-width: 62ch; }
.book h3 { font-family: var(--font-body); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); margin: 1.5rem 0 .6rem; }
.parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.parts li { border: 1px solid var(--ink); padding: .2rem .7rem; font-size: .92rem; }
.extent { color: var(--ink-soft); }

/* ---------- Band ---------- */

.band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: var(--gap-l); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ink); color: var(--paper); }
.band p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; max-width: 22ch; }
.band .button:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ---------- Inner pages ---------- */

.page-head { padding-top: clamp(2rem, 5vw, 3.5rem); border-bottom: 3px solid var(--ink); padding-bottom: 1.25rem; margin-bottom: var(--gap-m); }
.page-head h1 { font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 900; line-height: .85; letter-spacing: -.03em; text-transform: uppercase; margin-top: .5rem; }
.page-head .lede { font-family: var(--font-heading); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; max-width: 40ch; margin: 1rem 0 0; }

.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 1.3rem 0; border-top: 1px solid var(--ink); }
.history li:last-child { border-bottom: 1px solid var(--ink); }
.history .when { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); padding-top: .4rem; }
.history strong { display: block; font-family: var(--font-heading); font-size: 1.8rem; line-height: 1.1; }
.history .org { color: var(--ink-soft); }
.cv { padding-top: var(--gap-m); }
.cv h2 { margin-bottom: 1rem; }
.boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem var(--gap-m); margin-top: var(--gap-m); }
.boxes div { border-top: 3px solid var(--ink); padding-top: .8rem; }
.boxes b { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); margin-bottom: .4rem; }
.boxes p { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.2; }
.boxes span { display: block; color: var(--ink-soft); margin-top: .3rem; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap-m); align-items: start; }
.contact p { margin: 0 0 1rem; max-width: 46ch; }
.form { border: 3px solid var(--ink); padding: clamp(1.25rem, 3vw, 2rem); background: #FBFAF7; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .55rem .2rem;
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 8rem; border: 2px solid var(--ink); padding: .6rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; margin: 1.1rem 0 1.3rem; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: .1rem; flex-shrink: 0; accent-color: var(--blue); }
.sent { display: none; margin-top: 1rem; font-weight: 800; color: var(--blue); }
.sent.is-visible { display: block; }

.prose { max-width: 48rem; }
.prose h2 { font-size: 1.6rem; margin: 2rem 0 .4rem; }
.prose p { margin: 0 0 1rem; }

/* ---------- Footer ---------- */

.big { font-family: var(--font-heading); font-weight: 900; font-size: clamp(5rem, 18vw, 10rem); line-height: .85; color: var(--blue); margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .cover-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cover-photo { grid-column: 1 / -1; grid-row: auto; }
  .letter { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .weekend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .weekend > p { grid-column: 1 / -1; }
  .contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cover-grid, .contents, .weekend, .boxes { grid-template-columns: minmax(0, 1fr); }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .shelf b { font-size: 1rem; }
  .book { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .book img { max-width: 12rem; }
  .history li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .contents li { grid-template-columns: 3rem minmax(0, 1fr); }
  .button { width: 100%; }
}

/* ---------- Menu propio (2026-10-02): cabecera de portada de revista, idiomas en el codigo de barras ---------- */
.strip { border-bottom: 1px solid var(--ink); border-top: 6px solid var(--blue); }
.strip .bar { padding-top: .8rem; padding-bottom: .8rem; align-items: center; }
.strip .brand { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 900; font-style: italic; letter-spacing: -.02em; text-transform: none; line-height: 1; }
.strip .nav { gap: 0; align-items: center; }
.strip .nav a { background: none; color: var(--ink); font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 1.12rem; letter-spacing: 0; text-transform: none; padding: 0 .55rem; }
.strip .nav a { position: relative; }
.strip .nav a + a { margin-left: 1.1rem; }
.strip .nav a + a::before { content: "/"; position: absolute; left: -.85rem; font-style: normal; font-weight: 400; color: var(--blue); }
.strip .nav a:hover { color: var(--blue); background: none; }
.strip .nav a[aria-current="page"] { color: var(--blue); background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .32em; }
.barcode { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px solid var(--ink); background: #FFFFFF; padding: 0 .3rem 0 .5rem; }
.barcode svg { width: 40px; height: 26px; fill: var(--ink); }
.barcode .langs { gap: 0; }
.barcode .langs a { background: none; min-width: 32px; padding: 0 .3rem; font-size: .72rem; color: var(--ink-soft); }
.barcode .langs a[aria-current="page"] { background: none; color: var(--blue); text-decoration: underline; text-underline-offset: .3em; }

/* ---------- Pie propio (2026-10-02): contraportada con lomo, colofon y folio ---------- */
.site-footer { margin-top: var(--gap-l); padding: 0 0 1.5rem; border-top: 6px solid var(--blue); }
.colophon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(1.25rem, 4vw, 3rem); padding-top: var(--gap-m); }
.spine {
  margin: 0; align-self: start; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 1.5rem; align-items: center;
  border-left: 1px solid var(--ink); padding-left: .6rem;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft);
}
.spine span:first-child { font-family: var(--font-heading); font-style: italic; font-weight: 900; font-size: 1.5rem; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.colo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 2rem; border-bottom: 1px solid var(--ink); padding-bottom: 1rem; }
.colo-head .brand { font-family: var(--font-heading); font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900; font-style: italic; letter-spacing: -.03em; line-height: .9; color: var(--ink); text-decoration: none; }
.colo-issue { margin: 0; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); text-align: right; line-height: 1.6; }
.credits { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.credits div { padding: 1rem 1.25rem 1rem 0; }
.credits div + div { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.credits dt { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); }
.credits dd { margin: 0; font-family: var(--font-heading); font-size: 1.2rem; }
.credits dd a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.credits .langs { gap: 0; }
.credits .langs a { min-height: 44px; font-family: var(--font-body); }
.small-print { margin: 0; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: .88rem; color: var(--ink-soft); max-width: none; }
.folio { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.folio a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer > .kc-foot { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem 0 calc(1.25rem + 3.1rem + clamp(1.25rem, 4vw, 3rem)); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.site-footer .kc-link { text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
@media (max-width: 640px) {
  .colophon { grid-template-columns: minmax(0, 1fr); }
  .spine { writing-mode: horizontal-tb; transform: none; border-left: 0; border-bottom: 1px solid var(--ink); padding: 0 0 .5rem; margin-bottom: 1rem; flex-wrap: wrap; gap: .25rem 1rem; }
  .colo-issue { text-align: left; }
  .spine span:first-child { display: none; }
  .credits { grid-template-columns: minmax(0, 1fr); }
  .credits div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}
@media (max-width: 640px) { .site-footer > .kc-foot { padding-left: 1.25rem; } }