/* Access Stockholm — design layer. Owner's pick: B + D combined.
 *
 * FROM B (the base register): the year leads. Six hours of daylight in December, eighteen in June —
 * in Stockholm WHEN decides more than WHERE, so the almanac band sits directly under the hero. No
 * serif anywhere; this is a reference document, and the type is set for density.
 * FROM D: the WHERE × WHEN matrix as the signature block, and the seam band that argues why the two
 * axes cannot be separated this far north.
 *
 * THE COLOUR RULE, owner's batch instruction — Swedish flag, used semantically:
 *   BLUE  = WHERE  (islands, water, districts, transport)
 *   YELLOW = WHEN  (light, seasons, opening patterns, the year)
 * One colour always means one thing, so the reader learns it without being told.
 *
 * Built compact from the start per scaffold/CITY-BUILD-CHECKLIST.md — body 15.5px/1.58, headings
 * clamp(21px,2.4vw,28px), section padding 28px, hero clamp(300px,46vw,660px).
 */
:root{
  --paper:#FCFBF5; --card:#FFFFFF; --sunk:#F4F0E0; --line:#E2DCC4; --rule:#BCB392;
  --ink:#1A1706; --mid:#4A4426; --muted:#7A7350; --small:#443E22;
  --blue:#12507E; --blue-ink:#0E3E63; --blue-soft:#E4EDF4;
  --yellow:#F2C200; --yellow-ink:#6E5700; --yellow-soft:#FBF2D2; --no:#8C3B2E;
  --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}
.as-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:4px solid var(--yellow);padding:0}
.site-header .inside-header{max-width:1200px;margin:0 auto;padding:0 24px;min-height:74px;
  display:flex;align-items:center;gap:24px}
/* branding must NOT shrink at desktop — making it shrinkable is what broke the Madrid tagline into
   one character per line once the nav claimed the space */
.site-header .site-branding{padding:0;flex:0 0 auto;min-width:0}
.site-header .main-title{margin:0;font:700 20px/1 var(--ui);letter-spacing:-.025em;white-space:nowrap}
.site-header .main-title a{color:var(--ink);text-decoration:none}
.site-header .site-description{margin:6px 0 0;font:500 9.5px/1 var(--mono);letter-spacing:.18em;
  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(--yellow-ink);background:transparent;
  box-shadow:inset 0 -2px 0 var(--yellow)}
.main-navigation .menu-toggle{color:var(--ink);background:transparent;font-family:var(--ui)}
@media(min-width:769px){
  /* flex:0 1 auto — the nav may shrink and wrap, but must never demand width from the wordmark */
  .site-header #site-navigation{flex:0 1 auto;margin-left:auto;min-width:0}
  .main-navigation .main-nav>ul{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end;padding:13px 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){
  .site-header .site-branding{flex:1 1 100%}
  .site-header .main-title{font-size:18px;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
 * B demoted the photograph to a strip. The owner asked for a real hero on a famous landmark, so it
 * gets full height — and the crop is judged, not assumed: clamp(300px,46vw,660px) is ~2.2:1 at
 * 1440, which keeps most of a 1.5:1 photograph instead of letterboxing 70% of it away. */
.as-hero{position:relative;overflow:hidden;background:#1A1706;display:flex;align-items:flex-end;
  min-height:clamp(300px,46vw,660px)}
.as-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;z-index:0}
.as-hero .band{position:relative;z-index:2;width:100%;margin-top:300px;padding-top:80px;
  background:linear-gradient(180deg,rgba(20,17,6,0) 0%,rgba(20,17,6,.72) 9%,
    rgba(20,17,6,.955) 30%,rgba(20,17,6,.99) 100%)}
.as-hero .as-wrap{padding-bottom:24px}
.as-hero .kick{margin:0 0 12px;font:500 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.as-hero .kick i{font-style:normal;color:#9FC9E6}          /* blue = where */
.as-hero .kick s{text-decoration:none;color:#FFE08A}        /* yellow = when */
.as-hero .kick u{text-decoration:none;color:#9A937C;padding:0 8px}
.as-hero h1{font:700 clamp(24px,2.9vw,35px)/1.16 var(--ui);letter-spacing:-.03em;color:#FFFDF4;max-width:22ch}
.as-hero .sf{margin:11px 0 0;max-width:62ch;font-size:15px;line-height:1.56;color:#DCD6C2}
@media(max-width:768px){.as-hero .band{margin-top:180px;padding-top:70px}}
.as-credit{margin:0;padding:7px 0 0;font:400 11px/1.4 var(--mono);color:var(--small)}

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

/* ---- THE YEAR (from B): the almanac band, and the site's opening argument ---- */
.year{margin-top:16px;border:1px solid var(--rule);background:var(--card)}
.yr{display:grid;grid-template-columns:.5fr .35fr 1fr 1.1fr;border-top:1px solid var(--line)}
.yr:first-child{border-top:0}
.yr>div{padding:11px 14px;font-size:14px;line-height:1.48}
.yr .m{font:700 15px/1.3 var(--ui);background:var(--yellow-soft)}
.yr .h{font:500 13px/1.4 var(--mono);color:var(--yellow-ink);background:var(--yellow-soft)}
.yr .lt{color:var(--mid)}
.yr .do{color:var(--ink);background:var(--sunk)}
@media(max-width:820px){.yr{grid-template-columns:1fr 1fr}.yr .lt,.yr .do{grid-column:1/-1}}

/* ---- THE MATRIX (from D): where down the side, when across the top ---- */
.mx{margin-top:16px;border:1px solid var(--rule);background:var(--card);overflow-x:auto}
.mx-in{min-width:640px}
.mx-head,.mx-row{display:grid;grid-template-columns:.85fr 1fr 1fr 1fr}
.mx-head>div{padding:11px 13px;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--sunk);border-bottom:3px solid var(--yellow);color:var(--yellow-ink)}
.mx-head>div:first-child{border-bottom-color:var(--blue);color:var(--blue)}
.mx-row{border-top:1px solid var(--line)}
.mx-row>div{padding:12px 13px;font-size:13.5px;line-height:1.46;color:var(--mid)}
.mx-row .wh{font:600 14.5px/1.3 var(--ui);color:var(--blue-ink);background:var(--blue-soft);
  border-left:3px solid var(--blue);display:flex;align-items:center;gap:10px}
/* Square crop, not the 560x360 source ratio — a wide thumbnail here would set the row height. */
.mx-row .wh>.mx-im{flex:0 0 auto;width:46px;height:46px;object-fit:cover;display:block;
  background:var(--sunk)}
.mx-row a{color:var(--mid);text-decoration:none;display:block}
.mx-row a:hover{color:var(--ink);background:var(--sunk)}
.seam{margin-top:14px;background:var(--sunk);border:1px solid var(--line);padding:16px 18px}
.seam h3{font:700 clamp(17px,2vw,21px)/1.22 var(--ui);letter-spacing:-.022em}
.seam p{margin:9px 0 0;max-width:78ch;font-size:14.5px;line-height:1.56;color:var(--mid)}

/* ---- THE ALMANAC TABLE (from B): the third column is the unusual one ---- */
.alm{margin-top:16px;border:1px solid var(--rule);background:var(--card)}
.alm-head,.alm-row{display:grid;grid-template-columns:.6fr 1.25fr 1.25fr}
.alm-head{background:var(--ink);color:#fff}
.alm-head>div{padding:10px 14px;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:4px;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 .n{font:500 10px/1 var(--mono);color:var(--rule)}
.reads b{font:600 16px/1.34 var(--ui);letter-spacing:-.014em}
.reads a:hover b{color:var(--yellow-ink)}
.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}.reads em{display:none}}
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;margin-top:16px;
  background:var(--line);
  border:1px solid var(--line)}
.cg a{background:var(--card);text-decoration:none;color:inherit;border-top:3px solid transparent;
  display:flex;flex-direction:column}
.cg a:hover{border-top-color:var(--yellow);background:var(--yellow-soft)}
/* The photograph is the tile's subject line. Fixed height rather than aspect-ratio so a row of
   five tiles has ONE image baseline regardless of each source photo's own proportions. */
.cg a>.cg-im{display:block;width:100%;height:88px;object-fit:cover;background:var(--sunk)}
.cg-tx{display:block;padding:11px 13px 13px}
.cg b{display:block;font:600 14.5px/1.24 var(--ui)}
.cg .cg-tx>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)}.cg a>.cg-im{height:118px}}
@media(max-width:520px){.cg{grid-template-columns:1fr}.cg a>.cg-im{height:136px}}

/* ---- where this site stops ---- */
.as-stop{background:var(--ink);color:#E9E4CE;padding:30px 0}
.as-stop h2{font:700 clamp(20px,2.3vw,27px)/1.18 var(--ui);color:#fff;letter-spacing:-.026em}
.as-stop>.as-wrap>p{margin:10px 0 0;max-width:74ch;color:#B7B094;font-size:15px}
.as-stop .sl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:#332E17;border:1px solid #332E17}
.as-stop .sl li{background:var(--ink);padding:13px 15px 15px;border-left:3px solid var(--yellow)}
.as-stop .sl b{display:block;font:600 14.5px/1.28 var(--ui);color:#fff}
.as-stop .sl span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#B7B094}
@media(max-width:760px){.as-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:700 clamp(24px,3.2vw,34px)/1.18 var(--ui);letter-spacing:-.03em}
.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 15px}
.entry-content h2{font:700 clamp(19px,2.2vw,23px)/1.24 var(--ui);color:var(--ink);margin:28px 0 10px;
  letter-spacing:-.024em}
.entry-content h3{font:600 17px/1.3 var(--ui);color:var(--ink);margin:22px 0 9px}
.entry-content ul,.entry-content ol{margin:0 0 16px;padding-left:22px}
.entry-content li{margin:0 0 8px}
.entry-content img{height:auto;max-width:100%}
.entry-content figure{margin:24px 0}
.entry-content figure img{border:1px solid var(--line)}
.entry-content figcaption{margin-top:8px;font:400 12.5px/1.5 var(--mono);color:var(--small);text-align:left}
.entry-content blockquote{margin:22px 0;padding:14px 18px;border:0;border-left:3px solid var(--blue);
  background:var(--blue-soft);color:var(--ink)}
.entry-content blockquote p:last-child{margin:0}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:9px 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:20px;margin:0 0 16px}
.archive .entry-title a,.blog .entry-title a{color:var(--ink);text-decoration:none;
  font:600 21px/1.26 var(--ui);letter-spacing:-.022em}
.page-header,.archive .page-title{color:var(--ink)}
/* The front page's shortcode output lives INSIDE .entry-content, so a blanket underline rule reaches
   the whole layer. `.entry-content li > a` is (0,2,1) and beats a bare `.reads a` — the exclusion
   has to match that specificity AND restate the colour. */
.entry-content a{color:var(--yellow-ink);text-decoration:none}
.entry-content p > a,.entry-content li > a,.entry-content blockquote a{
  text-decoration:underline;text-underline-offset:2px}
.as-hero a,.as-sec a,.as-stop a,.mx a,.year a,.alm a,.cg a,.reads a,
.entry-content .reads li > a,.entry-content .cg a,.entry-content .mx a{text-decoration:none}
.entry-content .reads li > a{color:var(--ink)}
/* footer */
.site-footer,.site-info{background:var(--card);border-top:4px solid var(--yellow);color:var(--mid)}
.site-info{max-width:1200px;margin:0 auto;padding:22px 24px 26px;font:400 14.5px/1.6 var(--ui)}
.site-info .as-foot-links{display:block;font-size:13.5px}
.site-info .as-foot-links a{color:var(--mid);text-decoration:none}
.site-info .as-foot-links a:hover{color:var(--yellow-ink);text-decoration:underline}
.site-info .as-foot-links i{font-style:normal;color:var(--rule);padding:0 4px}
.site-info .as-foot-copy{display:block;margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--small)}
.entry-content .as-credit-line{margin-top:22px;padding-top:11px;border-top:1px solid var(--line);
  font:400 12px/1.5 var(--mono);color:var(--small)}