/* ==========================================================================
   SwedenCoin polish layer · 2026-10-04
   Loaded LAST on every page, so a selector of equal weight here wins over
   the earlier layers. Every block names the defect it fixes. Rollback: drop
   the <link> to this file (and polish-20261004.js) from the six pages.
   ========================================================================== */

:root{
  --i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.6v2.1M12 19.3v2.1M2.6 12h2.1M19.3 12h2.1M5.4 5.4l1.5 1.5M17.1 17.1l1.5 1.5M5.4 18.6l1.5-1.5M17.1 6.9l1.5-1.5'/%3E%3C/svg%3E");
  --i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.7A8.3 8.3 0 0 1 9.3 4a8.3 8.3 0 1 0 10.7 10.7Z'/%3E%3C/svg%3E");
}

/* --- 1. Breadcrumb ---------------------------------------------------------
   Every subpage read "SwedenCoin /" and stopped: the current page was never
   named. The markup now carries it; site.css gave every span a 14px indent
   and gold ink, which only the separator should keep. */
.page-back{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;width:auto;max-width:100%}
.page-back a{color:var(--muted);text-decoration:none;padding:6px 0}
.page-back a:hover{color:var(--gold-hi)}
.page-back span{margin-left:0}
.page-back [aria-current]{color:var(--dim)}

/* --- 2. Home: chapter cards ------------------------------------------------
   Two photos are 3:2 and two are 16:9, and each card took its photo's own
   height, so the titles of side-by-side cards sat 50px apart. One frame
   shape for all four; 16:10 trims at most 10% from an edge, never the
   subject (skyline, coins, coin, server aisle). */
.directory-card>img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:50% 50%}

/* --- 3. Get started: steps -------------------------------------------------
   The three steps were still wearing the old single-page styling: square
   strips, a lone underlined heading, a 3:2 photo stretched 800px tall above
   them. Photo and steps now share the row on wide screens, and each step is
   a card like every other card on the site. */
.guide-content .h{font-family:inherit;font-size:clamp(1.9rem,2.6vw,2.45rem);font-weight:550;letter-spacing:-.045em;
  line-height:1.2;text-transform:none;color:var(--text);border:0;padding:0;margin:12px 0 26px}
.guide .steps{display:grid;gap:14px;background:none;border:0}
.guide .step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;
  padding:20px 22px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.guide .step .n{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--gold);background:transparent;color:var(--gold-hi);
  font-family:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.04em}
.guide .step strong{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-top:8px}
.guide .step p{font-size:.875rem;line-height:1.75;color:var(--dim);margin:6px 0 0}
@media (min-width:901px){
  .guide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;overflow:visible}
  .guide-art{border:1px solid var(--rule);border-radius:16px;overflow:hidden}
  .guide-art .photo-caption{border-bottom:0}
  .guide-content{padding:0}
}
/* Stacked: the steps start at the page edge like the photo above them,
   not 16-20px further in. */
@media (max-width:900px){.guide-content{padding:28px 0 0}}
@media (max-width:600px){
  .guide .step{grid-template-columns:34px minmax(0,1fr);gap:13px;padding:17px 16px}
  .guide .step .n{width:34px;height:34px}
  .guide .step strong{margin-top:5px}
}

/* --- 4. Photo viewer -------------------------------------------------------
   Most pages hold one photo, and the viewer still showed ← 1 / 1 →.
   polish-20261004.js marks the dialog .single on those pages. */
.photo-viewer.single .photo-viewer-controls{display:none}

/* --- 5. Phones -------------------------------------------------------------- */
@media (max-width:600px){
  /* The 3:1 panorama shrank to a 117px strip with a thumbnail-sized coin.
     A 2:1 window keeps the coin, the sun and most of the archipelago; the
     whole picture is one tap away in the viewer. */
  .story-hero .story-hero-image{aspect-ratio:2/1;object-fit:cover;object-position:74% 50%}

  /* Photo captions took more height than some photos: title, credit line
     and a separate "View full image" row. One row now: title and credit
     (the AI-artwork disclosure stays), with the open control as an icon. */
  /* Every selector that sets a caption to display:block on small screens
     is listed, at the same weight, so this later rule wins for all of them. */
  .photo-caption,.hero-photo .photo-caption,.story-photo figcaption.photo-caption,.guide-art .photo-caption,
  .royal-cinema .photo-caption,.heritage-original-content .photo-caption,.royal-artifact .photo-caption,
  .server-photo .photo-caption,.coin-art .photo-caption{
    display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px}
  .photo-caption>div,.hero-photo .photo-caption>div{max-width:none;font-size:.6875rem;line-height:1.5}
  .photo-caption>div>span,.server-photo .photo-caption>div>span{font-size:.8125rem;margin-bottom:1px}
  .photo-full-link,.hero-photo .photo-full-link,.story-photo .photo-full-link,.guide-art .photo-full-link,
  .coin-art .photo-full-link,.royal-cinema .photo-full-link,.heritage-original-content .photo-full-link,
  .royal-artifact .photo-full-link,.server-photo .photo-full-link{
    flex:0 0 auto;margin:0;padding:0;width:40px;height:40px;min-height:40px;justify-content:center;gap:0;font-size:0;
    border:1px solid var(--rule-strong);border-radius:10px}
  .photo-full-link>span{font-size:1rem}
  .hero-photo .photo-full-link{border-color:#3a5576}

  /* Header: "Light mode" in words crowded the Menu button. An icon now
     (sun = switch to light, moon = switch to dark); site.js keeps the
     button's aria-label current, so the spoken name is unchanged. */
  .site-header .theme-toggle{display:inline-grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;font-size:0}
  .site-header .theme-toggle::before{content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:var(--i-sun) center/contain no-repeat;mask:var(--i-sun) center/contain no-repeat}
  :root[data-theme="light"] .site-header .theme-toggle::before{-webkit-mask-image:var(--i-moon);mask-image:var(--i-moon)}
}
@media print{.photo-full-link{display:none!important}}