/* The kramats section: a three-dimensional map of the Cape with the circle as a veil of light, and an article per kramat. */
.kramats-page,.kramat-article{--kr-ring:var(--terracotta);--kr-panel:var(--theme-surface);--kr-chart:#edeeea;--kr-ink:#2b332e;--kr-glow:#f2b33d;--kr-dome:#fffaf0;--kr-circle:#b8792a;--kr-other:#2f6b56;--kr-glass:rgb(255 255 255/.72);--kr-glass-line:rgb(255 255 255/.85);--kr-shadow:0 1px 2px rgb(20 24 22/.08),0 8px 24px -6px rgb(20 24 22/.18),0 24px 60px -18px rgb(20 24 22/.22);--kr-radius:22px;padding-bottom:var(--space-16)}
.kramats-page .eyebrow,.kramat-article .eyebrow{display:block;font:700 .72rem/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);margin:0 0 .8rem}
.kramats-crumbs{font-size:.8rem;color:var(--muted);margin:0 0 2.2rem}
.kramats-crumbs a{color:inherit}
.kramats-page button.text-link,.kramat-article button.text-link{background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;color:var(--ink);min-height:var(--tap);padding:9px 0;gap:10px;transform:none}

/* Hero */
.kramats-hero{padding-top:var(--space-12);padding-bottom:var(--space-8)}
.kramats-hero h1{max-width:14ch;margin-bottom:.35em}
.kramats-standfirst{max-width:44ch;color:var(--ink-soft)}
.kramats-legend{list-style:none;padding:0;margin:var(--space-4) 0 var(--space-6);display:grid;gap:.55rem;font-size:.84rem;color:var(--ink-soft)}
.kramats-legend li{display:flex;align-items:center;gap:.7rem}
.kramats-key{display:inline-grid;place-items:center;flex:none}
.kramats-key-ring{width:34px;height:14px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--kr-glow) 75%,transparent),transparent);box-shadow:0 0 10px color-mix(in srgb,var(--kr-glow) 55%,transparent)}
.kramats-key-dome{width:18px;height:22px;background:var(--kr-other);-webkit-mask:var(--kr-dome-mask) center/contain no-repeat;mask:var(--kr-dome-mask) center/contain no-repeat}
.kramats-key-circle{background:var(--kr-circle);filter:drop-shadow(0 0 4px var(--kr-glow))}
.kramats-key-area{opacity:.55}
.kramats-page{--kr-dome-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath d='M20 2C10 2 2 10 2 20c0 8.6 6 14.6 12.7 17.6L20 48l5.3-10.4C32 34.6 38 28.6 38 20 38 10 30 2 20 2Z'/%3E%3C/svg%3E")}

/* The atlas: map and panel */
.kramats-atlas{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 23rem;border-radius:var(--kr-radius);overflow:hidden;background:var(--kr-panel);box-shadow:var(--kr-shadow);outline:1px solid color-mix(in srgb,var(--ink) 8%,transparent);margin-bottom:var(--space-16)}
.kramats-map{min-height:clamp(34rem,80vh,54rem);background:var(--kr-chart);position:relative;z-index:0;overflow:hidden;touch-action:none;outline-offset:-3px;isolation:isolate}
.kramats-canvas,.kramats-map-still{position:absolute;inset:0;width:100%;height:100%;display:block}
.kramats-map-still{object-fit:cover}
.kramats-canvas{cursor:grab;opacity:0;transition:opacity .9s var(--ease)}
.kramats-map.is-live .kramats-canvas{opacity:1}
.kramats-map-still{transition:opacity .9s var(--ease)}
.kramats-map.is-live .kramats-map-still{opacity:0}
.kramats-canvas:active{cursor:grabbing}
.kramats-panel{background:var(--kr-panel);padding:var(--space-8) var(--space-6);border-left:1px solid color-mix(in srgb,var(--ink) 8%,transparent);overflow:auto;max-height:clamp(34rem,80vh,54rem);position:relative;scrollbar-width:thin}
.kramats-panel h2{font-size:clamp(1.8rem,2.4vw,2.4rem)}
.kramats-panel-intro p{color:var(--ink-soft)}
.kramats-panel-intro .button{margin:var(--space-2) 0 var(--space-4)}
.kramats-show-all{display:flex}
.kramats-panel-close{position:absolute;top:.6rem;right:.6rem;min-height:var(--tap);width:var(--tap);padding:0;background:transparent;color:var(--ink);border:1px solid var(--line);font-size:1.4rem;line-height:1}
.kramats-panel-close:hover{background:var(--theme-soft);color:var(--ink)}
.kramats-panel-place{font:500 1.05rem/1.4 var(--serif);margin:-.2rem 0 var(--space-4)}
.kramats-panel-place span{font:400 .8rem var(--body);color:var(--muted)}
.kramats-panel-people{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-6)}
.kramats-panel-people li+li{border-top:1px solid var(--line);padding-top:var(--space-6)}
.kramats-panel-people h3{font-size:1.6rem;margin:0 0 .4rem}
.kramats-panel-people h3 a{text-decoration:none}
.kramats-panel-people p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0 0 .4rem}

/* Map furniture: pins, labels, title, controls, all laid over the canvas */
.kramats-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;--pin:34px}
.kramat-pin3d{position:absolute;left:0;top:0;width:var(--pin);height:calc(var(--pin) * 1.25);margin:calc(var(--pin) * -1.2) 0 0 calc(var(--pin) * -.5);padding:0;background:none;border:0;min-height:0;min-width:0;box-shadow:none;border-radius:0;pointer-events:auto;cursor:pointer;color:#fff;transform-origin:50% 100%;transition:opacity .25s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease);animation:kramat-pin-in .6s var(--ease) both}
@keyframes kramat-pin-in{from{opacity:0;translate:0 -10px}}
.kramat-pin3d::before{content:"";position:absolute;inset:-7px -7px 10% -7px;border-radius:50%}
.kramat-pin3d svg{width:100%;height:100%;overflow:visible;transform-origin:50% 96%;transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s;filter:drop-shadow(0 2px 1.5px rgb(15 20 18/.28)) drop-shadow(0 8px 14px rgb(15 20 18/.22))}
.kramat-pin-body{fill:var(--kr-other);stroke:#fff;stroke-width:2.4}
.kramat-pin-ring{fill:none;stroke:rgb(255 255 255/.38);stroke-width:1.1}
.kramat-pin-glyph{fill:#fff}
.kramat-pin-door{fill:var(--kr-other)}
.kramat-pin3d-circle .kramat-pin-body{fill:var(--kr-circle)}
.kramat-pin3d-circle .kramat-pin-door{fill:var(--kr-circle)}
.kramat-pin3d-circle svg{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--kr-glow) 80%,transparent)) drop-shadow(0 2px 1.5px rgb(15 20 18/.28)) drop-shadow(0 8px 14px rgb(15 20 18/.22))}
.kramat-pin3d-beyond{width:calc(var(--pin) * .84);height:calc(var(--pin) * 1.05);margin:calc(var(--pin) * -1.01) 0 0 calc(var(--pin) * -.42)}
/* An approximate place keeps a full pin and gets a dashed ring on the ground around its tip */
.kramat-pin3d.is-area::after{content:"";position:absolute;left:50%;bottom:calc(var(--pin) * -.2);width:calc(var(--pin) * 1.1);height:calc(var(--pin) * .42);translate:-50% 0;border:1.6px dashed rgb(255 255 255/.95);border-radius:50%;box-shadow:0 0 0 1px rgb(20 24 22/.18);pointer-events:none}
.kramat-pin3d:hover svg,.kramat-pin3d:focus-visible svg,.kramat-pin3d.is-focused svg{transform:translateY(-3px) scale(1.16)}
.kramat-pin3d.is-focused .kramat-pin-body{stroke:var(--kr-glow);stroke-width:3}
.kramat-pin3d:focus-visible{outline:none}
.kramat-pin3d:focus-visible .kramat-pin-body{stroke:var(--ink);stroke-width:3.4}
.kramat-pin3d-count{position:absolute;right:-6px;top:-5px;min-width:calc(var(--pin) * .52);height:calc(var(--pin) * .52);padding:0 .3em;display:grid;place-items:center;border-radius:999px;background:#1f2723;color:#fff;font:700 max(10px,calc(var(--pin) * .27))/1 var(--body);box-shadow:0 0 0 2px #fff,0 4px 10px rgb(0 0 0/.25)}
.kramat-pin3d-count:empty{display:none}
.kramat-pin3d-label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px);width:max-content;max-width:16rem;padding:.55rem .8rem;background:var(--kr-glass);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:var(--ink);border:1px solid var(--kr-glass-line);border-radius:12px;box-shadow:var(--kr-shadow);font:400 .78rem/1.35 var(--body);text-align:left;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.kramat-pin3d-label strong{display:block;font:500 .95rem/1.25 var(--serif);letter-spacing:-.01em}
.kramat-pin3d-label small{display:block;color:var(--ink-soft);margin-top:.15rem}
.kramat-pin3d:hover .kramat-pin3d-label,.kramat-pin3d:focus-visible .kramat-pin3d-label{opacity:1;transform:translate(-50%,0)}
.kramats-label{position:absolute;left:0;top:0;white-space:nowrap;translate:-50% -50%;font:600 .7rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#2a322d;text-shadow:0 0 2px #fff,0 0 6px rgb(255 255 255/.9),0 0 12px rgb(255 255 255/.6);transition:opacity .3s}
.kramats-label-sea{font:italic 400 1.02rem/1 var(--serif);letter-spacing:.32em;text-transform:none;color:#eaf4f5;text-shadow:0 1px 6px rgb(10 40 60/.45)}
.kramats-map-controls{position:absolute;right:1.1rem;top:1.1rem;z-index:3;display:flex;flex-direction:column;align-items:center;padding:5px;gap:2px;border-radius:16px;background:var(--kr-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--kr-glass-line);box-shadow:var(--kr-shadow)}
.kramats-map-controls button{width:40px;height:40px;min-height:0;padding:0;display:grid;place-items:center;background:transparent;color:var(--ink);border:0;border-radius:11px;box-shadow:none;transform:none;transition:background .2s,transform .15s}
.kramats-map-controls button:hover{background:rgb(0 0 0/.06);color:var(--ink)}
.kramats-map-controls button:active{transform:scale(.92)}
.kramats-map-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.kramats-map-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kramats-controls-rule{width:22px;height:1px;background:color-mix(in srgb,var(--ink) 14%,transparent);margin:2px 0}
.kramats-map-controls .kramats-map-compass{width:30px;height:30px;stroke:none;overflow:visible}
.kramats-compass-needle{transform:rotate(var(--kramat-compass,0rad));transform-origin:20px 20px;transition:transform .1s}
.kramats-compass-north{fill:var(--terracotta)}
.kramats-compass-south{fill:color-mix(in srgb,var(--ink) 35%,transparent)}
.kramats-map-compass text{font:700 6px var(--body);fill:var(--ink)}
.kramats-map-hint{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;margin:0;padding:.75rem 1.1rem;border-radius:12px;background:rgb(20 24 22/.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:.86rem;pointer-events:none;box-shadow:var(--kr-shadow)}
.kramats-map-credit{position:absolute;left:1.1rem;bottom:.7rem;z-index:3;margin:0;font-size:.64rem;color:var(--ink);opacity:.62;text-shadow:0 0 4px rgb(255 255 255/.8)}
.kramats-map-loading{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;z-index:3;display:flex;align-items:center;gap:.6rem;margin:0;padding:.55rem .95rem;border-radius:999px;background:var(--kr-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--kr-shadow);font-size:.78rem;color:var(--ink);transition:opacity .5s}
.kramats-map-loading span{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 20%,transparent);border-top-color:var(--terracotta);animation:kramat-spin .9s linear infinite}
@keyframes kramat-spin{to{transform:rotate(1turn)}}
.kramats-map.is-live .kramats-map-loading{opacity:0}
.kramats-panel-people img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0 0 var(--space-3);border-radius:14px;box-shadow:0 10px 30px -12px rgb(20 24 22/.35)}
.kramats-panel-detail:not([hidden]),.kramats-panel-intro:not([hidden]){animation:kramat-panel-in .5s var(--ease) both}
.kramats-panel-detail:not([hidden]) li{animation:kramat-panel-in .55s var(--ease) both}
.kramats-panel-detail:not([hidden]) li:nth-child(2){animation-delay:.06s}
.kramats-panel-detail:not([hidden]) li:nth-child(3){animation-delay:.12s}
@keyframes kramat-panel-in{from{opacity:0;translate:0 12px}}

/* The essay */
.kramats-essay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12);margin-bottom:var(--space-16)}
.kramats-essay-block h2{font-size:clamp(1.9rem,2.8vw,2.7rem)}
.kramats-essay-block p{max-width:var(--reading);font-size:1.02rem;line-height:1.75}

.kramats-section-heading{border-top:1px solid var(--ink);padding-top:var(--space-6);margin-bottom:var(--space-8)}

/* The circle */
.kramats-stops{list-style:none;padding:0;margin:0 0 var(--space-16)}
.kramats-stop{padding:var(--space-8) 0;border-bottom:1px solid var(--line)}
.kramats-stop-body h3{font-size:clamp(1.7rem,2.4vw,2.3rem);margin-bottom:var(--space-4)}
.kramats-people{list-style:none;padding:0;margin:0 0 var(--space-2);display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-4)}
.kramats-person,.kramats-beyond-card{display:flex;flex-direction:column;gap:.45rem;height:100%;padding:var(--space-5);text-decoration:none;background:var(--theme-surface);border:1px solid var(--line);transition:border-color .2s,transform .2s var(--ease)}
.kramats-person:hover,.kramats-beyond-card:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}
.kramats-person-name{font:500 1.25rem/1.25 var(--serif);letter-spacing:-.02em}
.kramats-person-summary{font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.kramats-badge{align-self:flex-start;display:inline-block;font:700 .64rem/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:.28rem .6rem;border-radius:100px;background:var(--mint);color:var(--ink)}
.kramats-on-map{font-size:.82rem}

/* Beyond the circle */
.kramats-beyond-grid{list-style:none;padding:0;margin:0 0 var(--space-16);display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--space-4)}
.kramats-beyond-grid li:nth-child(6n+1) .kramats-beyond-card{background:var(--mint)}
.kramats-beyond-grid li:nth-child(6n+2) .kramats-beyond-card{background:var(--sky)}
.kramats-beyond-grid li:nth-child(6n+3) .kramats-beyond-card{background:var(--pink)}
.kramats-beyond-grid li:nth-child(6n+4) .kramats-beyond-card{background:var(--lilac)}
.kramats-beyond-grid li:nth-child(6n+5) .kramats-beyond-card{background:var(--lemon)}
.kramats-beyond-grid li:nth-child(6n+6) .kramats-beyond-card{background:var(--peach)}
.kramats-beyond-card{border-color:transparent}
.kramats-beyond-card .kramats-badge{background:var(--theme-surface);margin-top:auto}
.kramats-beyond-place{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* Visiting and sources */
.kramats-visiting-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-12);margin-bottom:var(--space-12)}
.kramats-etiquette{margin:0;padding-left:1.2rem;display:grid;gap:.7rem;font-size:1rem}
.kramats-etiquette li::marker{color:var(--terracotta)}
.kramats-tours{background:var(--lemon);padding:var(--space-8);align-self:start}
.kramats-tours p{font:500 1.3rem/1.45 var(--serif);letter-spacing:-.015em}
.kramats-sources,.kramat-sources{font-size:.78rem;line-height:1.7;color:var(--muted)}
.kramats-sources span,.kramat-sources span{font-weight:700;color:var(--ink-soft)}

/* Article */
.kramat-header{padding-top:var(--space-12);padding-bottom:var(--space-8);border-bottom:1px solid var(--line);margin-bottom:var(--space-12)}
.kramat-header h1{max-width:18ch;margin-bottom:.3em}
.kramat-other-names{font:italic 400 1.15rem/1.5 var(--serif);color:var(--ink-soft);margin:0 0 var(--space-6)}
.kramat-summary{max-width:46ch}
.kramat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;font-size:.9rem;font-weight:600;margin:0}
.kramat-layout{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:clamp(2rem,6vw,6rem);margin-bottom:var(--space-16)}
.kramat-body{max-width:var(--reading)}
.kramat-block h2{font-size:clamp(1.6rem,2.3vw,2.2rem);margin-top:var(--space-10)}
.kramat-block:first-child h2{margin-top:0}
.kramat-block p{font-size:1.08rem;line-height:1.8}
.kramat-block:first-child p:first-of-type::first-letter{float:left;font:400 4.6rem/.82 var(--serif);color:var(--terracotta);margin:.35rem .6rem 0 0}
.kramat-sources{border-top:1px solid var(--line);padding-top:var(--space-4);margin-top:var(--space-10)}
.kramat-aside{display:flex;flex-direction:column;gap:var(--space-8);align-self:start;position:sticky;top:120px}
.kramat-locator-caption{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
.kramat-locator-caption a{color:var(--ink);font-weight:600}
.kramat-visit{background:var(--mint);padding:var(--space-6)}
.kramat-visit h2,.kramat-related h2{font-size:1.4rem}
.kramat-visit p{font-size:.92rem;line-height:1.65}
.kramat-visit p:last-child{margin:0}
.kramat-tours{border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);padding-top:var(--space-4)}
.kramat-related ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.kramat-related a{display:flex;flex-direction:column;padding:.7rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.kramat-related span{font:500 1.1rem/1.3 var(--serif)}
.kramat-related small{color:var(--muted)}

/* Dark map */
:root[data-theme=dark] :is(.kramats-page,.kramat-article){--kr-chart:#16181a;--kr-ink:#e6e1d8;--kr-dome:#2b2925;--kr-glass:rgb(30 33 35/.7);--kr-glass-line:rgb(255 255 255/.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) :is(.kramats-page,.kramat-article){--kr-chart:#16181a;--kr-ink:#e6e1d8;--kr-dome:#2b2925;--kr-glass:rgb(30 33 35/.7);--kr-glass-line:rgb(255 255 255/.12)}}
:root[data-theme=dark] .kramats-label{color:#e8e4dc;text-shadow:0 0 4px #000,0 0 10px rgb(0 0 0/.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .kramats-label{color:#e8e4dc;text-shadow:0 0 4px #000,0 0 10px rgb(0 0 0/.8)}}
:root[data-theme=dark] .kramats-map-controls button:hover{background:rgb(255 255 255/.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .kramats-map-controls button:hover{background:rgb(255 255 255/.08)}}

/* Tablet and phone */
@media (max-width:1000px){
  .kramat-layout{grid-template-columns:1fr}
  .kramat-aside{position:static}
  .kramats-essay{grid-template-columns:1fr;gap:var(--space-8)}
}
@media (max-width:900px){
  .kramats-atlas{grid-template-columns:1fr}
  .kramats-map{min-height:64vh}
  .kramats-atlas{border-radius:18px}
  .kramats-map-controls{right:.6rem;top:.6rem;flex-direction:row;padding:3px;gap:0;border-radius:12px}
  .kramats-map-controls button{width:34px;height:34px;border-radius:9px}
  .kramats-map-controls svg{width:18px;height:18px}
  /* On a phone only zoom and home stay; two fingers turn the map */
  .kramats-map-controls :is([data-kramat-control=north],[data-kramat-control=turn-left],[data-kramat-control=turn-right]),.kramats-controls-rule{display:none}
  .kramats-label{font-size:.6rem;letter-spacing:.1em}
  .kramats-label-sea{font-size:.82rem;letter-spacing:.22em}
  .kramats-panel{border-left:0;border-top:1px solid var(--line);max-height:none}
  .kramats-panel.is-open{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;z-index:1000;max-height:56%;border:1px solid var(--kr-glass-line);border-radius:18px;box-shadow:0 -6px 40px -8px rgb(0 0 0/.35);padding-top:var(--space-6);animation:kramat-sheet-in .45s cubic-bezier(.2,.9,.25,1) both}
  @keyframes kramat-sheet-in{from{translate:0 40px;opacity:0}}
  .kramats-map-controls{transition:opacity .3s}
  .kramats-atlas:has(.kramats-panel.is-open) .kramats-map-controls{opacity:0;pointer-events:none}
  .kramats-visiting-grid{grid-template-columns:1fr;gap:var(--space-8)}
}
@media (max-width:640px){
  .kramats-hero{padding-top:var(--space-8)}
  .kramats-tours{padding:var(--space-6)}
}
@media (prefers-reduced-motion:reduce){.kramats-person,.kramats-beyond-card,.kramat-pin3d svg,.kramats-canvas,.kramats-map-still{transition:none}.kramat-pin3d,.kramats-panel-detail,.kramats-panel-intro,.kramats-panel-detail li,.kramats-panel.is-open{animation:none}.kramats-map-loading span{animation:none}}
.kramats-person,.kramats-beyond-card,.kramats-person-name,.kramats-beyond-place{text-align:left}
.kramats-person,.kramats-beyond-card{align-items:stretch}

/* Pictures */
.kramat-figure{margin:0}
.kramat-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--theme-soft)}
.kramat-figure figcaption{display:flex;flex-wrap:wrap;gap:.15rem .5rem;margin-top:.55rem;font-size:.76rem;line-height:1.45;color:var(--muted)}
.kramat-figure figcaption span{font-weight:600;color:var(--ink-soft)}
.kramat-figure figcaption a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.kramat-figure.is-print img{border:8px solid var(--theme-surface);outline:1px solid var(--line);box-shadow:0 10px 26px rgb(40 30 20/.14);max-width:30rem}
.kramat-figure.is-print{transform:rotate(-.6deg)}
.kramat-gallery .kramat-figure.is-print:nth-child(even){transform:rotate(.7deg)}
.kramats-card-image{display:block;width:calc(100% + 2 * var(--space-5));max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-3)}
.is-dark{display:none}
:root[data-theme=dark] .is-light{display:none}
:root[data-theme=dark] .is-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .is-light{display:none}:root:not([data-theme=light]) .is-dark{display:block}}

/* Essay with old prints and maps */
.kramats-essay{grid-template-columns:1fr;gap:var(--space-16)}
.kramats-essay-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.kramats-essay-block:nth-child(even) .kramats-essay-pictures{order:-1}
.kramats-essay-pictures{display:grid;gap:var(--space-4)}
.kramats-essay-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

/* Article header with its picture, and the gallery */
.kramat-header.has-picture{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.kramat-hero:not(.is-print) img{aspect-ratio:3/2}
.kramat-hero.is-print{justify-self:center;align-self:center}
.kramat-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--space-8) var(--space-6);margin:var(--space-12) 0 0;padding-top:var(--space-8);border-top:1px solid var(--line)}

/* The still locator: a crop of the baked chart with the kramat marked */
.kramat-locator{margin:0}
.kramat-locator-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--kr-chart)}
.kramat-locator-frame img{position:absolute;max-width:none;height:auto}
.kramat-locator-pin{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--terracotta);border:3px solid var(--kr-dome);box-shadow:0 0 0 6px color-mix(in srgb,var(--kr-glow) 45%,transparent),0 2px 6px rgb(0 0 0/.3)}
.kramat-locator-pin.is-area{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--terracotta) 22%,transparent);border:2px dashed var(--terracotta);box-shadow:none}

@media (max-width:1000px){
  .kramat-header.has-picture{grid-template-columns:1fr;align-items:start}
  .kramats-essay-block{grid-template-columns:1fr}
  .kramats-essay-block:nth-child(even) .kramats-essay-pictures{order:0}
}
.kramats-panel-detail .eyebrow{padding-right:3.4rem}

/* Chapter cards, raised: rounded, layered shadow, a lift and a slow zoom on the picture */
.kramats-person,.kramats-beyond-card{border-radius:18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:0 1px 2px rgb(20 24 22/.06),0 10px 28px -14px rgb(20 24 22/.22);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.kramats-person:hover,.kramats-beyond-card:hover,.kramats-person:focus-visible,.kramats-beyond-card:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 2px 4px rgb(20 24 22/.06),0 24px 48px -18px rgb(20 24 22/.32)}
.kramats-card-image{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s;transform-origin:50% 60%}
.kramats-person:hover .kramats-card-image,.kramats-beyond-card:hover .kramats-card-image{transform:scale(1.045);filter:saturate(1.08)}
.kramats-person-name{transition:color .3s}
.kramats-person:hover .kramats-person-name,.kramats-beyond-card:hover .kramats-person-name{color:var(--terracotta)}
.kramats-on-map{margin-top:var(--space-3)}
.kramat-figure:not(.is-print) img{border-radius:16px;box-shadow:0 18px 40px -22px rgb(20 24 22/.45)}
.kramat-locator-frame{border-radius:16px;box-shadow:var(--kr-shadow)}
@media (prefers-reduced-motion:reduce){.kramats-card-image{transition:none}.kramats-person:hover,.kramats-beyond-card:hover{transform:none}}

/* When you visit: the greeting in Arabic, recitation and manners */
.kramat-visit-body{max-width:46rem;margin:0 auto var(--space-16);display:grid;gap:var(--space-12)}
.kramat-visit-body h2{font-size:clamp(1.6rem,2.3vw,2.2rem)}
.kramat-visit-body p{font-size:1.06rem;line-height:1.75}
.kramat-dua{margin:var(--space-6) 0 0;padding:var(--space-8) var(--space-6);border-radius:18px;background:var(--theme-surface);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 1px 2px rgb(20 24 22/.05),0 14px 34px -18px rgb(20 24 22/.25)}
.kramat-visit-body .kramat-dua-arabic{font-family:'Noto Naskh Arabic','Amiri',serif;font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:2.1;text-align:right;color:var(--ink);margin:0 0 var(--space-4)}
.kramat-dua-translit{font-style:italic;color:var(--ink-soft);margin:0 0 var(--space-3)}
.kramat-dua-meaning{margin:0 0 var(--space-4)}
.kramat-dua figcaption{font-size:.84rem;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--space-3)}
.kramat-dua figcaption a,.kramat-manners-source a{color:var(--ink);font-weight:600}
.kramat-surahs{list-style:none;padding:0;margin:var(--space-4) 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.kramat-surahs a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1rem;border-radius:999px;background:var(--mint);color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem}
.kramat-surahs a:hover{background:color-mix(in srgb,var(--mint) 80%,var(--ink) 20%)}
.kramat-manners{margin:0;padding-left:1.2rem;display:grid;gap:.8rem}
.kramat-visit-section > p + p{margin-top:var(--space-4)}
.kramat-manners li{font-size:1.02rem;line-height:1.65}
.kramat-manners li::marker{color:var(--terracotta);font-weight:700}
.kramat-manners-source{font-size:.8rem;color:var(--muted)}
.kramats-visit-link{margin-top:var(--space-4)}

/* The visiting page reads slowly: a serif reading face, room between thoughts, the pause set apart */
.kramat-visit-header .kramat-visit-standfirst{max-width:34ch;font:italic 400 clamp(1.3rem,2.2vw,1.65rem)/1.55 var(--serif);color:var(--ink-soft);margin:0}
.kramat-visit-body{max-width:40rem;gap:clamp(3.5rem,7vw,5.5rem)}
.kramat-visit-body .kramat-visit-section > p{font:400 clamp(1.08rem,1.5vw,1.2rem)/1.85 var(--serif);letter-spacing:-.005em;margin:0 0 1.15em}
.kramat-visit-section h2{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:.9em}
.kramat-visit-body .kramat-visit-section > p.kramat-visit-pause{font-style:italic;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.5;color:var(--ink-soft);margin:2.2rem 0 0;padding-left:1.1rem;border-left:2px solid var(--terracotta)}
.kramat-read-more{border-top:1px solid var(--line);padding-top:var(--space-6)}
.kramat-read-more h2{font:700 .72rem/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-4)}
.kramat-read-more ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.kramat-read-more a,.kramat-read-more-title{display:block;min-height:0;font-size:.92rem;line-height:1.45;color:var(--ink)}
.kramat-read-more small{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.kramat-visit-page :is(.kramat-visit-body,.kramat-visit-header).section-shell{max-width:min(40rem,calc(100% - 2.5rem));margin-inline:auto}

/* Pictures on the visiting page: quiet breaks in the reading column, one set beside a story */
.kramat-visit-figure{margin:2.4rem 0}
.kramat-visit-figure.is-wide{margin-inline:calc(min(0px, (100% - 100vw) / 2 + 1.25rem))}
@media (min-width:900px){.kramat-visit-figure.is-wide{margin-inline:-6rem}}
.kramat-visit-figure.is-inset{float:right;width:46%;margin:.35rem 0 1rem 1.6rem}
.kramat-visit-figure.is-inset img{aspect-ratio:4/5}
.kramat-visit-section::after{content:"";display:block;clear:both}
.kramat-surahs span{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1rem;border-radius:999px;background:var(--mint);color:var(--ink);font-weight:600;font-size:.9rem}
@media (max-width:640px){.kramat-visit-figure.is-inset{float:none;width:auto;margin:2rem 0}.kramat-visit-figure.is-inset img{aspect-ratio:3/2}}

/* The same map on the Kramat tour page. */
.tour-atlas{margin-block:2rem}