/* ==========================================================================
   anora.one — journal stylesheet
   A calm, photo-led travel magazine on paper. Newsreader for display and
   reading, the system sans for labels and controls. Photographs carry the
   page; every image box has a tone and a fixed ratio so nothing loads empty.

   1  @font-face          9  Hero
   2  Tokens             10  Cards (story, place, guide)
   3  Dark tokens        11  Story page (prose, gallery, timeline)
   4  Reset and base     12  Guide page
   5  Layout             13  Directory
   6  Header and footer  14  Shared with the studio (preview bar, notices)
   7  Buttons, links,    15  Utilities
      chips              16  Place gallery
   8  Forms              17  Reduced motion
   ========================================================================== */


/* 1 — @font-face ----------------------------------------------------------- */

@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-roman.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}


/* 2 — Tokens --------------------------------------------------------------- */

:root{
  --paper:#f6f3ec; --surface:#fffdf8; --ink:#1f231e; --muted:#5d625a; --line:#dcd8cc;
  --green:#2f4a3a; --green-ink:#f6f3ec; --terracotta:#9a5b3c; --olive:#dfe3d2; --error:#932d2d;
  --photo-tone:#d9d2c3;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --step--1:clamp(.82rem,.8rem + .1vw,.88rem); --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem); --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.3rem);
  --step-3:clamp(2.2rem,1.7rem + 2.4vw,3.6rem); --step-4:clamp(2.8rem,2rem + 4vw,5.4rem);
  --gutter:16px; --max:1240px; --radius:2px;
}
@media (min-width:720px){:root{--gutter:32px}}

/* Derived tokens: spacing rhythm, motion and the fixed light ink used over photos. */
:root{
  --space-s:clamp(12px,1.5vw,18px); --space-m:clamp(20px,3vw,32px);
  --space-l:clamp(40px,6vw,72px); --space-xl:clamp(56px,9vw,120px);
  --grid-gap:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --on-photo:#f6f3ec;
  --shade:linear-gradient(180deg,rgba(14,18,14,0) 25%,rgba(14,18,14,.55) 55%,rgba(14,18,14,.82) 100%);
  --on-photo-shadow:0 1px 18px rgba(0,0,0,.35);
  --label:.72rem;
}
@media (min-width:720px){:root{--grid-gap:28px}}


/* 3 — Dark tokens ---------------------------------------------------------- */

@media (prefers-color-scheme:dark){:root{
  --paper:#151815; --surface:#1c201c; --ink:#ece8de; --muted:#a6aa9f; --line:#323831;
  --green:#a9c4ad; --green-ink:#151815; --terracotta:#d79a76; --olive:#273026; --photo-tone:#2a2e29;
}}
@media (prefers-color-scheme:dark){:root{--error:#e8968c}}


/* 4 — Reset and base ------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:var(--step-0)/1.6 var(--sans)}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08}
h1,h2,h3,p,figure,ol,ul{margin:0}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
h1,h2,h3{font-optical-sizing:auto;text-wrap:balance}
p{text-wrap:pretty}
em{font-style:italic;color:var(--green)}
img{display:block;max-width:100%;height:auto;background:var(--photo-tone)}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
a:hover{color:var(--terracotta)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input,select,textarea,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
::selection{background:var(--olive);color:var(--ink)}
[hidden]{display:none!important}


/* 5 — Layout --------------------------------------------------------------- */

.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
main{display:block}

.section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:var(--space-m)}
.section-heading h2{margin-top:10px}
.section-heading>p{max-width:42ch;color:var(--muted);font-size:var(--step--1)}

.eyebrow{display:block;font:600 var(--label)/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.story-grid,.place-grid,.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--grid-gap)}
/* Cards keep their natural height: a card without a photo never stretches into an empty panel beside a photo card. */
.place-grid{align-items:start}
.story-grid{row-gap:calc(var(--grid-gap) * 1.6)}


/* 6 — Header and footer ---------------------------------------------------- */

.site-header{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding-block:12px;border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font:500 2.1rem/1 var(--serif);letter-spacing:-.05em;color:var(--ink)}
.wordmark:hover{color:var(--green)}
.site-header nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin-right:-12px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;font-size:var(--step--1);letter-spacing:.01em}
.site-header nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--terracotta);text-underline-offset:.45em}
.studio-label{font:600 var(--label)/1 var(--sans);letter-spacing:.16em;color:var(--muted);margin-right:auto}
.site-header form{margin:0}
@media (max-width:719px){
  .site-header{padding-block:8px 4px}
  .site-header nav{width:100%;margin-inline:-12px;margin-right:0}
}

.site-footer{width:min(var(--max),100% - 2*var(--gutter));margin:var(--space-xl) auto 0;padding-block:28px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:var(--step--1);color:var(--muted)}
.site-footer .wordmark{font-size:1.7rem}
.site-footer p{margin-right:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 4px;margin-inline:-10px}
.site-footer a:not(.wordmark){display:inline-flex;align-items:center;min-height:44px;padding-inline:10px}
.site-footer>span{width:100%}
@media (min-width:900px){.site-footer>span{width:auto}}


/* 7 — Buttons, links, chips ------------------------------------------------ */

.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.6em 1.3em;border:1px solid var(--green);border-radius:var(--radius);background:var(--green);color:var(--green-ink);font:500 var(--step--1)/1.3 var(--sans);letter-spacing:.02em;text-align:center}
.button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.button.secondary{background:transparent;color:var(--green);border-color:var(--line)}
.button.secondary:hover{border-color:var(--green);background:var(--olive);color:var(--green)}
.button:disabled{opacity:.55;cursor:not-allowed}

.underlined{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:var(--line);font-size:var(--step--1)}
.underlined:hover{text-decoration-color:currentColor}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--step--1);color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:var(--step--1);line-height:1.2}
.chips a:hover{border-color:var(--green);color:var(--green)}
.chips a[aria-current="true"]{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.chips .chip-clear{border-color:transparent;background:none;text-decoration:underline;text-underline-offset:.3em;color:var(--muted)}


/* 8 — Forms ---------------------------------------------------------------- */

.destination-search label,.directory-filters label{display:block;margin-bottom:6px;font:600 var(--label)/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.destination-search>div{display:flex;flex-wrap:wrap;gap:10px}
.destination-search input,.directory-filters input,.directory-filters select{width:100%;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:16px}
.destination-search input{flex:1 1 220px;width:auto}
.destination-search input:focus,.directory-filters input:focus,.directory-filters select:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 1px var(--green)}
.destination-search input:focus-visible,.directory-filters input:focus-visible,.directory-filters select:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.destination-search .button{flex:none;min-height:48px}

.directory-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;padding-block:20px;margin-bottom:8px;border-block:1px solid var(--line)}
.directory-filters>div{flex:1 1 200px;min-width:0}
.directory-filters>.button{min-height:48px}
.directory-filters>.underlined{min-height:48px}
@media (max-width:719px){.directory-filters>div{flex-basis:100%}.directory-filters>.button{width:100%}}
@media (min-width:1000px){.directory-filters{flex-wrap:nowrap}.directory-filters>div{flex:1 1 0}.directory-filters>.button,.directory-filters>.underlined{flex:none}}
.directory-count{margin:18px 0 22px;font-size:var(--step--1);color:var(--muted)}


/* 9 — Hero ----------------------------------------------------------------- */

/* Home: one full-bleed photograph, the headline and the destination search
   set low over a soft shade. Without any photo it becomes a typographic band. */
.home-hero{position:relative;display:flex;align-items:flex-end;min-height:min(78vh,760px);background:var(--photo-tone);color:var(--on-photo);overflow:hidden}
.home-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,18,14,.5) 0%,rgba(14,18,14,.2) 45%,rgba(14,18,14,0) 75%),linear-gradient(180deg,rgba(14,18,14,.2) 0%,rgba(14,18,14,0) 25%,rgba(14,18,14,.55) 60%,rgba(14,18,14,.82) 100%)}
.home-hero-inner{position:relative;z-index:1;padding-block:var(--space-xl) var(--space-m);text-shadow:var(--on-photo-shadow)}
.home-hero .eyebrow{color:inherit}
.home-hero h1{max-width:13ch;margin-top:14px;font-size:var(--step-4);font-weight:300;letter-spacing:-.025em;line-height:1.02;text-shadow:0 1px 30px rgba(0,0,0,.3)}
.home-hero h1 em{color:inherit}
.home-hero .destination-search{max-width:620px;margin-top:var(--space-m)}
.home-hero .destination-search label{color:inherit}
.home-hero .destination-search input{border-color:transparent;background:rgba(255,253,248,.94);color:#1f231e}
.home-hero .destination-search input::placeholder{color:#5d625a}
.home-hero .button,.home-hero input{text-shadow:none}
.home-hero .button{background:var(--on-photo);border-color:var(--on-photo);color:#1f231e}
.home-hero .button:hover{background:transparent;color:var(--on-photo)}
.home-hero-credit{margin-top:var(--space-m);font:italic 400 var(--step--1)/1.4 var(--serif)}
.home-hero-credit a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.home-hero-credit a:hover{color:inherit;text-decoration-thickness:2px}
.home-hero.is-plain{min-height:0;background:var(--olive);color:var(--ink)}
.home-hero.is-plain::after{content:none}
.home-hero.is-plain .home-hero-inner{text-shadow:none}
.home-hero.is-plain h1 em{color:var(--green)}
.home-hero.is-plain .destination-search input{border-color:var(--line);background:var(--surface);color:var(--ink)}
.home-hero.is-plain .button{background:var(--green);border-color:var(--green);color:var(--green-ink)}

.guides-band{padding-top:var(--space-l)}
.section-more{margin-top:var(--space-m);text-align:center}


/* 10 — Cards ---------------------------------------------------------------- */

.card-image,.place-photo,.hero,.guide-hero,.gallery figure{background:var(--photo-tone);overflow:hidden}
.card-image img,.place-photo img{aspect-ratio:4/3;width:100%;object-fit:cover}

/* Story card: the photograph first, then a quiet meta line and the title. */
.story-card{display:flex;flex-direction:column;min-width:0}
.card-image{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius)}
.card-image img{height:100%;transition:transform .9s var(--ease)}
.card-image:hover img{transform:scale(1.03)}
.image-label{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.card-arrow{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:1.1rem;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.card-image:hover .card-arrow,.card-image:focus-visible .card-arrow{opacity:1;transform:none}
.card-meta{display:flex;flex-wrap:wrap;gap:0 .6em;margin:16px 0 6px;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card-meta span+span::before{content:"·";margin-right:.6em}
.story-card h3{font-size:var(--step-1);margin-bottom:8px}
.story-card h3 a:hover{color:var(--green)}
.story-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;color:var(--muted);font-size:var(--step--1);line-height:1.6}

/* Place card. With a photo it reads like a story card; without one it is a
   typographic index card on the surface tone, never an empty image box. */
.place-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.place-card.has-photo{background:none;border:0}
.place-photo{display:block;aspect-ratio:4/3;border-radius:var(--radius)}
.place-photo img{height:100%;transition:transform .9s var(--ease)}
.place-photo:hover img{transform:scale(1.03)}
.place-body{display:flex;flex-direction:column;gap:8px;padding:22px 22px 14px}
.has-photo .place-body{padding:16px 0 0}
.place-meta{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:1.6em}
.place-card h3{font-size:var(--step-1)}
.favourite-mark{color:var(--terracotta);font-size:.8em;vertical-align:.12em}
/* Draft places only appear in an owner's signed-in preview. */
.place-card.is-draft{outline:1px dashed var(--terracotta);outline-offset:4px}
.draft-label{align-self:flex-start;padding:2px 8px;border:1px solid var(--terracotta);color:var(--terracotta);font-size:var(--label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.place-note{font:italic 400 var(--step-0)/1.5 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.place-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;padding-top:4px;font-size:var(--step--1)}
.place-actions a{display:inline-flex;align-items:center;min-height:44px}
.place-actions a:not(.underlined){color:var(--green)}
.place-actions a:not(.underlined):hover{color:var(--terracotta)}
.place-sources{display:flex;flex-direction:column;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.place-sources .eyebrow{margin-bottom:2px}
.place-sources>a{display:flex;align-items:center;min-height:44px;font-size:var(--step--1);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.3em}


/* Guide card: the city's cover photograph with its name set over it. A guide
   without a cover becomes an olive panel with the same type, never a blank box. */
.guide-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.guide-card{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;min-height:260px;overflow:hidden;border-radius:var(--radius);background:var(--olive);color:var(--ink)}
.guide-card-image{position:absolute;inset:0;background:var(--photo-tone)}
.guide-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.guide-card-image::after{content:"";position:absolute;inset:0;background:var(--shade)}
.guide-card:hover .guide-card-image img{transform:scale(1.03)}
.guide-card-text{position:relative;z-index:1;display:block;padding:var(--space-m)}
.guide-card-image+.guide-card-text{color:var(--on-photo);text-shadow:var(--on-photo-shadow)}
.guide-card-image+.guide-card-text .eyebrow{color:inherit}
.guide-card h3{margin:8px 0 4px;font-size:var(--step-3);font-weight:300;letter-spacing:-.02em}
.guide-card p{font-size:var(--step--1)}
.guide-card:hover{color:var(--ink)}
.guide-card:hover .guide-card-image+.guide-card-text{color:var(--on-photo)}


/* 11 — Story page ----------------------------------------------------------- */

/* The cover runs edge to edge; the title sits below it on paper, not over it. */
.article-cover{height:min(66vh,560px);background:var(--photo-tone);overflow:hidden}
.article-cover img{width:100%;height:100%;object-fit:cover}
@media (min-width:720px){.article-cover{height:min(80vh,820px)}}

.article-header{max-width:960px;padding-block:var(--space-m) 0;text-align:center}
.article-header .back-link{margin-bottom:var(--space-s)}
.article-header .eyebrow{margin-bottom:18px}
.article-header h1{font-size:var(--step-4);font-weight:300;letter-spacing:-.025em;line-height:1.02}
.article-intro{max-width:34ch;margin:24px auto 0;font:italic 300 var(--step-1)/1.45 var(--serif);color:var(--muted)}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 1.2em;margin-top:24px;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.article-meta span:empty{display:none}
.article-meta span+span::before{content:"·";margin-right:1.2em}

.article-layout{display:grid;gap:var(--space-m);padding-block:var(--space-l)}
.article-aside{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;padding-block:8px;border-block:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}
.article-aside .eyebrow{width:100%;padding-top:8px}
.article-aside p{width:100%;font:italic var(--step-0)/1.4 var(--serif);color:var(--ink)}
.article-aside a{display:inline-flex;align-items:center;min-height:44px;color:var(--green)}
.article-aside a:hover{color:var(--terracotta)}
@media (min-width:1000px){
  .article-layout{grid-template-columns:minmax(0,1fr) minmax(0,68ch) minmax(0,1fr);column-gap:var(--space-l)}
  .article-aside{grid-column:1;align-self:start;justify-self:end;position:sticky;top:24px;flex-direction:column;align-items:flex-start;width:min(100%,220px);padding:16px 0 8px;border-bottom:0}
  .article-aside p{margin:6px 0 10px}
  .article-aside a{min-height:38px}
  .article-layout .prose{grid-column:2}
}

.prose{max-width:68ch;font:400 var(--step-1)/1.62 var(--serif);overflow-wrap:break-word}
.prose p+p,.prose p+h2,.prose h2+p{margin-top:1em}
.prose h2{font-size:var(--step-2);margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

.recommendations,.gallery-section,.trip-timeline{padding-block:var(--space-l) 0}
.recommendations>.section-heading,.gallery-section>.section-heading,.trip-timeline>.section-heading{padding-top:var(--space-s);border-top:1px solid var(--line)}

.timeline{list-style:none;padding:0;max-width:900px}
.timeline li{position:relative;display:grid;gap:6px;padding:0 0 28px 26px;border-left:1px solid var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-5px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--terracotta)}
.timeline-date{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.timeline h3{margin-bottom:6px}
.timeline p{max-width:60ch;color:var(--muted)}
@media (min-width:720px){.timeline li{grid-template-columns:170px 1fr;gap:28px}}

/* Gallery: a loose, magazine-like grid. Every third photograph spans two
   columns from 900px; dense flow closes the gaps. Captions read "Place · date". */
.gallery{display:grid;grid-template-columns:1fr;gap:var(--grid-gap);grid-auto-flow:dense}
.gallery figure{display:flex;flex-direction:column;min-width:0;background:none}
.gallery a{display:block;flex:1;overflow:hidden;border-radius:var(--radius);background:var(--photo-tone)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .9s var(--ease)}
.gallery a:hover img{transform:scale(1.02)}
.gallery figcaption{padding-top:10px;font:italic 400 var(--step--1)/1.5 var(--serif);color:var(--muted)}
.photo-place{color:var(--ink)}
.photo-date{white-space:nowrap}
@media (min-width:640px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery figure:nth-child(3n){grid-column:span 2}
  /* Wide photographs fill the row height set by their portrait neighbours. */
  .gallery figure:nth-child(3n) img{height:100%;aspect-ratio:8/5}
}

/* Closing band: the story hands the reader on to its city guide. */
.guide-band{position:relative;display:flex;align-items:flex-end;min-height:clamp(260px,40vw,440px);margin-top:var(--space-xl);overflow:hidden;background:var(--olive);color:var(--ink)}
.guide-band-image{position:absolute;inset:0;background:var(--photo-tone)}
.guide-band-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.guide-band-image::after{content:"";position:absolute;inset:0;background:var(--shade)}
.guide-band:hover .guide-band-image img{transform:scale(1.02)}
.guide-band-text{position:relative;z-index:1;display:block;padding-block:var(--space-l) var(--space-m)}
.guide-band-image+.guide-band-text{color:var(--on-photo);text-shadow:var(--on-photo-shadow)}
.guide-band-image+.guide-band-text .eyebrow{color:inherit}
.guide-band-title{display:block;max-width:18ch;margin-top:10px;font:300 var(--step-3)/1.05 var(--serif);letter-spacing:-.02em}
.guide-band-count{display:block;margin-top:12px;font-size:var(--step--1)}
.guide-band:hover{color:var(--ink)}
.guide-band:hover .guide-band-image+.guide-band-text{color:var(--on-photo)}

.article-bottom{padding-block:var(--space-l) 0;text-align:center}


/* 12 — Guide page ------------------------------------------------------------ */

/* Hero: the cover photograph edge to edge with the city's name set low over a
   soft shade. Without a cover it is a typographic header on olive. */
.guide-hero{position:relative;display:flex;align-items:flex-end;background:var(--olive)}
.guide-hero.has-cover{min-height:min(72vh,700px);background:var(--photo-tone);color:var(--on-photo)}
.guide-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.guide-hero.has-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,14,.15) 0%,rgba(14,18,14,0) 25%,rgba(14,18,14,.55) 55%,rgba(14,18,14,.82) 100%)}
.guide-hero-text{position:relative;z-index:1;padding-block:var(--space-xl) var(--space-m)}
.guide-hero.has-cover .guide-hero-text{text-shadow:var(--on-photo-shadow)}
.guide-hero.has-cover .eyebrow{color:inherit}
.guide-hero h1{margin-top:10px;font-size:var(--step-4);font-weight:300;letter-spacing:-.025em;line-height:1}
.guide-count{margin-top:12px;font:italic 400 var(--step-1)/1.4 var(--serif);color:var(--muted)}
.guide-hero.has-cover .guide-count{color:inherit}

.guide-intro{padding-block:var(--space-l) 0}
.guide-intro.prose{max-width:none}
.guide-intro>*{max-width:60ch}
.guide-intro>p:first-child{max-width:44ch;font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);font-weight:300;line-height:1.4}
.guide-favourites,.guide-places,.visits-strip{padding-block:var(--space-l) 0}
.guide-places>.chips:first-of-type{margin-top:4px}

/* Neighbourhoods: a thin rule, the area's name and how many places it holds. */
.neighbourhood{margin-top:var(--space-l)}
.neighbourhood-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:var(--space-m);padding-top:14px;border-top:1px solid var(--line);font-size:var(--step-2)}
.neighbourhood-title span{flex:none;font:var(--step--1) var(--sans);letter-spacing:.1em;color:var(--muted)}

/* Over the visits: one photograph per month in a strip that scrolls on its own;
   the page itself never scrolls sideways. */
.visits{display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,260px);gap:16px;list-style:none;padding:0 0 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.visits li{scroll-snap-align:start}
.visits figure{background:none}
.visits img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.visits figcaption{padding-top:8px;font:italic 400 var(--step--1)/1.4 var(--serif);color:var(--muted)}


/* 13 — Directory -------------------------------------------------------------- */

.directory-header{padding-block:var(--space-l) var(--space-m)}
.directory-header h1{max-width:18ch;margin-top:14px;font-weight:300;letter-spacing:-.02em}
.directory-header>p{max-width:58ch;margin-top:18px;color:var(--muted)}
.directory{padding-bottom:var(--space-m)}

.empty-state{padding:var(--space-l) 24px;text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}
.empty-state h1,.empty-state h2,.empty-state h3{margin-bottom:10px}
.empty-state p{max-width:46ch;margin:0 auto 20px;color:var(--muted)}
main.empty-state{margin-top:var(--space-l)}

.stories{padding-block:var(--space-l) 0}

.about{display:grid;gap:var(--space-m);margin-top:var(--space-xl);padding:var(--space-l) var(--space-m);background:var(--olive);border-radius:var(--radius)}
.about-mark{display:block;font:300 clamp(6rem,14vw,12rem)/.8 var(--serif);letter-spacing:-.08em;color:var(--green);margin-top:18px}
.about h2{margin-bottom:18px}
.about p{max-width:52ch;color:var(--ink)}
.about p+p{margin-top:12px}
.about .underlined{margin-top:12px}
@media (min-width:900px){.about{grid-template-columns:1fr 1.4fr;padding:var(--space-l)}}
@media (max-width:719px){.about-mark{display:none}}


/* 14 — Shared with the studio --------------------------------------------- */

.preview-bar{padding:12px var(--gutter);background:var(--green);color:var(--green-ink);font-size:var(--step--1);text-align:center}
.preview-bar a{margin-left:16px;text-decoration:underline;text-underline-offset:.25em}
.preview-bar a:hover{color:inherit}
.notice,.error{margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--green);background:var(--surface);font-size:var(--step--1);line-height:1.6}
.error{border-left-color:var(--error);color:var(--error)}
.muted{color:var(--muted)}


/* 15 — Utilities ------------------------------------------------------------ */

.skip-link{position:absolute;left:16px;top:-100px;z-index:20;padding:12px 16px;background:var(--green);color:var(--green-ink)}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}


/* 16 — Place gallery --------------------------------------------------------- */

/* A place with more than one photo carries "+N photos" on its cover, set like the label on a print; it opens the
   gallery (public/assets/gallery.js). The gallery is a dark light box, the same in light and dark mode, so photos read
   true; the description is the caption, in the journal's italic, and the count is set in the serif. */
.place-figure{position:relative}
.gallery-badge{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px 0 11px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 var(--label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 2px 14px rgba(14,18,14,.28)}
.gallery-badge::after{content:"";position:absolute;inset:-4px}
.gallery-badge:hover{background:var(--green);color:var(--green-ink)}
.gallery-badge svg{flex:none}

dialog.photo-viewer{--light-box:#0e110e;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--light-box);color:var(--on-photo);overflow:hidden}
dialog.photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:photo-viewer-open .22s ease-out}
dialog.photo-viewer::backdrop{background:#0e110e}
body:has(dialog.photo-viewer[open]){overflow:hidden}
.photo-viewer :focus-visible{outline-color:var(--on-photo)}
.photo-viewer-bar{display:flex;align-items:center;gap:18px;padding:max(10px,env(safe-area-inset-top)) var(--gutter) 10px}
.photo-viewer-title{min-width:0;margin-right:auto;overflow:hidden;font:600 var(--label)/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:rgba(246,243,236,.72)}
.photo-viewer-count{flex:none;font:400 var(--step-1)/1 var(--serif);font-variant-numeric:tabular-nums}
.photo-viewer-close,.photo-viewer-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(246,243,236,.3);border-radius:50%;background:rgba(14,17,14,.55);color:var(--on-photo)}
.photo-viewer-close{flex:none}
.photo-viewer-close:hover,.photo-viewer-step:hover:not([aria-disabled="true"]){border-color:var(--on-photo);background:var(--on-photo);color:#0e110e}
.photo-viewer-stage{position:relative;min-height:0;margin:0;touch-action:pan-y pinch-zoom}
.photo-viewer-stage img{position:absolute;top:0;left:var(--gutter);width:calc(100% - 2 * var(--gutter));height:100%;object-fit:contain;background:none;transition:opacity .25s var(--ease)}
.photo-viewer-stage.is-loading img{opacity:.35}
.photo-viewer-step{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px}
.photo-viewer-step.is-previous{left:var(--gutter)}
.photo-viewer-step.is-next{right:var(--gutter)}
.photo-viewer-step[aria-disabled="true"]{opacity:.25;cursor:default}
.photo-viewer-caption{max-width:62ch;min-height:calc(1.4em + 34px);margin:0 auto;padding:14px var(--gutter) max(20px,env(safe-area-inset-bottom));text-align:center;text-wrap:balance;font:italic 400 var(--step-1)/1.4 var(--serif)}
.photo-viewer-stage img.from-next{--from:32px;animation:photo-viewer-in .35s var(--ease)}
.photo-viewer-stage img.from-previous{--from:-32px;animation:photo-viewer-in .35s var(--ease)}
@keyframes photo-viewer-in{from{opacity:0;transform:translateX(var(--from))}}
@keyframes photo-viewer-open{from{opacity:0}}
@media (max-width:719px){.photo-viewer-step{width:44px;height:44px;margin-top:-22px}}


/* 17 — Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}