/* Access Madrid — design layer. Base: option C ("A + B, welded"), with B's almanac and D's
 * method band and provenance ledger folded in, per the owner's pick.
 *
 * THE ORGANISING IDEA: a place name means nothing to someone who has never been, and an answer
 * floating free of a place is trivia. So the signature block is ONE OBJECT — the place, the
 * question a reader standing there would have, the durable answer, and its source. Terracotta is
 * always geography; slate is always fact. That colour rule is the whole system.
 *
 * FROM D: attribution is a designed element with a permanent slot, never a footnote, and the
 * method is stated near the top rather than buried in an About page — because on this site "we
 * have not been there, and here is where this came from" IS the value proposition.
 * FROM B: the almanac, whose third column is what we deliberately will NOT tell you.
 */
:root{
  --paper:#F5F2EB; --card:#FCFAF5; --sunk:#ECE7DB; --line:#DAD3C2; --hair:#BFB6A0;
  --ink:#1B1913; --mid:#4C4638; --muted:#79705F; --small:#4A4234;
  --terra:#A6472B; --terra-soft:#F2E4DC; --slate:#2E4A63; --slate-soft:#E7EDF2; --no:#8C3B2E;
  --display:"Lora",Georgia,serif; --ui:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15.5px/1.58 var(--ui);
  -webkit-font-smoothing:antialiased}
.am-wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
h1,h2,h3{margin:0} img{max-width:100%}

/* ============================================================ GENERATEPRESS INTEGRATION */
.site-content{padding:0}
.inside-article,.entry-content{max-width:none}
.site-header{background:var(--card);border-bottom:1px solid var(--hair);padding:0}
.site-header .inside-header{max-width:1200px;margin:0 auto;padding:0 24px;min-height:78px;
  display:flex;align-items:center;gap:24px}
/* ⚠️ The branding block must NOT shrink at desktop. Making it shrinkable (to cure a narrow-width
   overflow) let the nav claim the space and broke the tagline to ONE CHARACTER PER LINE. The
   <=600px rule below is what handles narrow screens; above it, the mark keeps its own width. */
.site-header .site-branding{padding:0;flex:0 0 auto;min-width:0}
.site-header .main-title{margin:0;font:600 25px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.site-header .main-title a{color:var(--ink);text-decoration:none}
.site-header .site-description{margin:6px 0 0;font:400 9.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--small);white-space:nowrap}
.main-navigation{background:transparent}
.main-navigation .inside-navigation{padding:0;max-width:none}
.main-navigation .main-nav ul li a{padding:0;line-height:1;font:500 12.5px/1 var(--ui);
  color:var(--mid);background:transparent}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{color:var(--terra);background:transparent}
.main-navigation .menu-toggle{color:var(--ink);background:transparent;font-family:var(--ui)}
@media(min-width:769px){
  /* flex:0 1 auto, not 1 1 auto — the nav may shrink and wrap, but must not DEMAND width from the
     wordmark. justify-content:flex-end alone overflows to the LEFT when content is too wide. */
  .site-header #site-navigation{flex:0 1 auto;margin-left:auto;min-width:0}
  .main-navigation .main-nav>ul{display:flex;gap:17px;flex-wrap:wrap;justify-content:flex-end;padding:14px 0}
  .main-navigation .main-nav>ul>li{margin:0}
}
@media(max-width:768px){
  .site-header .inside-header{min-height:0;flex-wrap:wrap;padding:12px 20px}
  .site-header #site-navigation{order:2;flex:0 0 auto;margin:0;width:auto}
  .site-header .menu-toggle{display:block;padding:8px 4px;font:600 14px/1 var(--ui)}
  .site-header .main-nav>ul{display:none}
  .site-header #site-navigation.toggled{order:3;flex:1 1 100%;width:100%}
  .site-header #site-navigation.toggled .main-nav>ul{display:block;width:100%;padding:8px 0 4px}
  .site-header #site-navigation.toggled .main-nav>ul>li>a{display:block;padding:11px 0;
    font-size:15px;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  /* Only here does the branding give up its own line — the tagline drops beneath the wordmark
     rather than being squeezed into a column of single letters. */
  .site-header .site-branding{flex:1 1 100%}
  .site-header .main-title{font-size:22px;white-space:normal}
  .site-header .site-description{white-space:normal}
}
.home .entry-header,.home .page-header,.home .entry-title{display:none}
.home #page,.home #page.container,.home #page.grid-container{max-width:none;padding:0;margin:0}
.home .site-content,.home .content-area,.home .site-main{max-width:none;width:100%;padding:0;margin:0}
.home .site-content .inside-article,.home article.page{padding:0;margin:0;border:0;background:transparent}
.home #page,.home article.page,.home .inside-article,.home .entry-content{background:transparent}
.home .entry-content>p:empty{display:none}

/* ============================================================ HERO (from C) */
.am-hero figure{margin:0;position:relative;background:var(--sunk);
  height:clamp(300px,46vw,660px);overflow:hidden}
.am-hero figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.am-hero .cap{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start;
  padding:18px 0 20px;border-bottom:1px solid var(--hair)}
.am-hero .kick{margin:0 0 14px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--terra)}
.am-hero h1{font:600 clamp(24px,2.9vw,35px)/1.16 var(--display);letter-spacing:-.02em;max-width:20ch}
.am-hero .sf{margin:10px 0 0;font-size:15px;line-height:1.56;color:var(--mid);max-width:60ch}
.am-hero .pos{margin:0;padding:13px 15px;background:var(--slate-soft);border-left:3px solid var(--slate);
  font-size:13.5px;line-height:1.54;color:var(--mid)}
@media(max-width:860px){.am-hero .cap{grid-template-columns:1fr;gap:22px}}
.am-credit{margin:0;padding:7px 0 0;font:400 11px/1.4 var(--mono);color:var(--small)}

/* ============================================================ SECTION FURNITURE */
.am-sec{padding:28px 0}
.am-sec.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.am-k{font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin:0 0 7px}
.am-t{font:600 clamp(21px,2.4vw,28px)/1.18 var(--display);letter-spacing:-.018em}
.am-l{margin:8px 0 0;max-width:74ch;color:var(--mid);font-size:15px}

/* ---- THE METHOD (from D): stated near the top, not buried in an About page ---- */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;background:var(--line);
  border:1px solid var(--line)}
.method>div{background:var(--card);padding:15px 16px 17px;border-top:3px solid var(--slate)}
.method .n{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--slate)}
.method b{display:block;margin-top:8px;font:600 16.5px/1.26 var(--display);letter-spacing:-.016em}
.method p{margin:7px 0 0;font-size:13.5px;line-height:1.52;color:var(--mid)}
@media(max-width:900px){.method{grid-template-columns:1fr}}

/* ---- THE WELD (C's signature): place + the question it raises, in one object ---- */
.weld{display:grid;gap:1px;margin-top:18px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(2,1fr)}
.wc{background:var(--card);display:flex;flex-direction:column}
.wc .place{padding:14px 16px 12px}
.wc .n{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--terra)}
.wc .place b{display:block;margin-top:7px;font:600 19px/1.2 var(--display)}
.wc .place span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--mid)}
.wc .ask{margin-top:auto;padding:12px 16px 13px;background:var(--slate-soft);border-top:1px solid var(--line)}
.wc .ask q{display:block;quotes:none;font:600 14.5px/1.34 var(--ui);color:var(--slate);letter-spacing:-.012em}
.wc .ask p{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--mid)}
.wc .ask cite{display:block;margin-top:9px;font:500 10.5px/1.4 var(--mono);font-style:normal;color:var(--slate)}
.wc .ask cite::before{content:"source: ";color:var(--muted)}
.wc a.go{display:block;padding:10px 18px;text-decoration:none;border-top:1px solid var(--line);
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--terra);background:var(--card)}
.wc a.go:hover{background:var(--terra-soft)}
@media(max-width:840px){.weld{grid-template-columns:1fr}}

/* ---- THE LEDGER (from D): the claim beside its provenance ---- */
.ledger{margin-top:16px;border:1px solid var(--hair);background:var(--card)}
.lrow{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);border-top:1px solid var(--line)}
.lrow:first-child{border-top:0}
.lrow .claim{padding:14px 16px 15px}
.lrow .claim a{display:block;text-decoration:none;color:var(--ink);font:600 16.5px/1.38 var(--display);
  letter-spacing:-.016em}
.lrow .claim a:hover{color:var(--terra)}
.lrow .claim em{display:block;font-style:normal;margin-top:10px;font:500 9.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--small)}
.lrow .src{padding:14px 16px 15px;background:var(--sunk);border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
.lrow .src span{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--small)}
.lrow .src b{display:block;margin-top:7px;font:500 13px/1.45 var(--mono);color:var(--ink)}
@media(max-width:820px){.lrow{grid-template-columns:1fr}
  .lrow .src{border-left:0;border-top:1px solid var(--line)}}

/* ---- THE ALMANAC (from B): the third column is the unusual one ---- */
.alm{margin-top:16px;border:1px solid var(--hair);background:var(--card)}
.alm-head,.alm-row{display:grid;grid-template-columns:.65fr 1.3fr 1.3fr}
.alm-head{background:var(--ink);color:#fff}
.alm-head>div{padding:12px 16px;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.alm-head>div:nth-child(3){color:#E8B4A6}
.alm-row{border-top:1px solid var(--line)}
.alm-row>div{padding:10px 13px;font-size:14px;line-height:1.48}
.alm-row>div:first-child{font:500 13px/1.4 var(--mono);background:var(--sunk)}
.alm-row .yes{color:var(--mid)}
.alm-row .no{color:var(--no);background:#FBF5F3}
@media(max-width:840px){.alm-head{display:none}.alm-row{grid-template-columns:1fr}
  .alm-row>div+div::before{display:block;margin-bottom:5px;font:600 9.5px/1 var(--mono);
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .alm-row .yes::before{content:"What we can tell you"}
  .alm-row .no::before{content:"What we will not";color:var(--no)}}

/* ---- latest / categories ---- */
.reads{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.reads li{border-bottom:1px solid var(--line)}
.reads a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:11px 2px;
  text-decoration:none;color:var(--ink)}
.reads a:hover b{color:var(--terra)}
.reads .n{font:500 10px/1 var(--mono);color:var(--small)}
.reads b{font:600 16.5px/1.34 var(--display)}
.reads em{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--small);white-space:nowrap}
@media(max-width:640px){.reads a{grid-template-columns:auto 1fr;gap:12px}.reads em{display:none}}
.cg{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:16px;background:var(--line);
  border:1px solid var(--line)}
.cg a{background:var(--card);padding:13px 14px;text-decoration:none;color:inherit}
.cg a:hover{background:var(--terra-soft)}
.cg b{display:block;font:600 14.5px/1.24 var(--display)}
.cg span{display:block;margin-top:5px;font-size:12.5px;line-height:1.44;color:var(--mid)}
@media(max-width:1000px){.cg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cg{grid-template-columns:1fr}}

/* ---- where this site stops ---- */
.am-stop{background:var(--ink);color:#EFEADF;padding:30px 0}
.am-stop h2{font:600 clamp(20px,2.3vw,27px)/1.18 var(--display);color:#fff}
.am-stop>.am-wrap>p{margin:10px 0 0;max-width:74ch;color:#BCB3A2;font-size:15px}
.am-stop .sl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:#332E25;border:1px solid #332E25}
.am-stop .sl li{background:var(--ink);padding:13px 15px 15px;border-left:3px solid var(--terra)}
.am-stop .sl b{display:block;font:600 14.5px/1.28 var(--ui);color:#fff}
.am-stop .sl span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#B3AA99}
@media(max-width:760px){.am-stop .sl{grid-template-columns:1fr}}
.adzone{padding:24px 0;background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ============================================================ ARTICLES + ARCHIVES */
body.single .inside-article,body.page:not(.home) .inside-article{max-width:790px;margin:0 auto;
  padding:28px 0 36px;background:transparent;border:0}
body.single .entry-title,body.page:not(.home) .entry-title{
  font:600 clamp(26px,3.6vw,39px)/1.16 var(--display);letter-spacing:-.022em}
.entry-meta,.entry-meta a{color:var(--small);font:500 10px/1.6 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none}
.entry-content{font:400 16px/1.66 var(--ui);color:var(--mid)}
.entry-content p{margin:0 0 16px}
.entry-content h2{font:600 clamp(20px,2.3vw,25px)/1.22 var(--display);color:var(--ink);margin:32px 0 12px}
.entry-content h3{font:600 17.5px/1.3 var(--ui);color:var(--ink);margin:24px 0 10px}
.entry-content ul,.entry-content ol{margin:0 0 18px;padding-left:22px}
.entry-content li{margin:0 0 9px}
.entry-content img{height:auto;max-width:100%}
.entry-content figure{margin:28px 0}
.entry-content figure img{border:1px solid var(--line)}
.entry-content figcaption{margin-top:9px;font:400 12.5px/1.5 var(--mono);color:var(--small);text-align:left}
.entry-content blockquote{margin:26px 0;padding:16px 20px;border:0;border-left:3px solid var(--slate);
  background:var(--slate-soft);color:var(--ink)}
.entry-content blockquote p:last-child{margin:0}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry-content th{background:var(--sunk);font-weight:600;color:var(--ink)}
.entry-content .wp-block-table,.entry-content pre{overflow-x:auto;max-width:100%}
.archive .inside-article,.blog .inside-article{background:var(--card);border:1px solid var(--line);
  padding:24px;margin:0 0 18px}
.archive .entry-title a,.blog .entry-title a{color:var(--ink);text-decoration:none;
  font:600 23px/1.25 var(--display)}
.page-header,.archive .page-title{color:var(--ink)}
/* The front page's shortcode output lives INSIDE .entry-content, so a blanket link-underline rule
   reaches every tile and row in the design layer. Scope it to prose, then exclude the layer. */
.entry-content a{color:var(--terra);text-decoration:none}
.entry-content p > a,.entry-content li > a,.entry-content blockquote a{
  text-decoration:underline;text-underline-offset:2px}
.am-hero a,.am-sec a,.am-stop a,.weld a,.ledger a,.method a,.alm a,.cg a,.reads a,
.entry-content .reads li > a,.entry-content .cg a,.entry-content .weld a,
.entry-content .ledger a,.entry-content .method a{text-decoration:none}
.entry-content .reads li > a{color:var(--ink)}
.entry-content .reads li > a:hover b{color:var(--terra)}
/* footer */
.site-footer,.site-info{background:var(--card);border-top:1px solid var(--hair);color:var(--mid)}
.site-info{max-width:1200px;margin:0 auto;padding:26px 24px 30px;font:400 14.5px/1.6 var(--ui)}
.site-info .am-foot-links{display:block;font-size:13.5px}
.site-info .am-foot-links a{color:var(--mid);text-decoration:none}
.site-info .am-foot-links a:hover{color:var(--terra);text-decoration:underline}
.site-info .am-foot-links i{font-style:normal;color:var(--hair);padding:0 4px}
.site-info .am-foot-copy{display:block;margin-top:9px;font:400 12px/1.5 var(--mono);color:var(--small)}
.entry-content .am-credit-line{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);
  font:400 12px/1.5 var(--mono);color:var(--small)}