@layer foundation, site, reading;
@layer site {
/* Hostels in Paris: an ivory city notebook, burgundy folios and a ruled index. */
:root:root { --paper:#fbf7ef; --ink:#242329; --muted:#62595c; --line:#d8cfc6; --panel:#f0e9de; --heading:Georgia,'Times New Roman',serif; --gap:3.2rem; font-size:17px; }
:root body { background:var(--paper); }
:root .wrap { width:min(1180px,calc(100% - 5rem)); }
:root .preview-notice { background:#762d3b; font-size:.7rem; letter-spacing:.08em; }
:root .site-header { display:block; padding-block:1.8rem 0; border-bottom:3px double var(--ink); }
:root .site-header .brand { display:inline-block; color:#762d3b; font-size:clamp(1.8rem,3.4vw,2.6rem); font-style:italic; letter-spacing:-.055em; padding-bottom:1.4rem; }
:root .site-header nav { border-top:1px solid var(--line); }
:root .site-header nav ul { gap:0; justify-content:space-between; }
:root .site-header nav a { padding:.9rem .35rem; font-size:.78rem; }
:root .site-header nav a:hover, :root .site-header nav a[aria-current] { color:#762d3b; text-decoration:underline; text-underline-offset:.35em; }
:root .page-header { padding-block:3.3rem 2rem; max-width:980px; }
:root h1 { font-size:clamp(2.6rem,5.4vw,4.7rem); max-width:19ch; letter-spacing:-.055em; line-height:1.06; }
:root .eyebrow { color:#762d3b; letter-spacing:.16em; font-size:.67rem; }
:root .intro { max-width:62ch; font-size:1.15rem; }
:root .byline { font-size:.74rem; }
:root .hero-image { margin:0 0 3rem; display:grid; grid-template-columns:minmax(0,2fr) minmax(180px,1fr); align-items:end; gap:2rem; }
:root .hero-image img { width:100%; max-height:420px; object-fit:contain; object-position:left center; background:#ece6dc; }
:root .hero-image figcaption { font-size:.75rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
:root .archetype-home .page-header { max-width:100%; display:grid; grid-template-columns:1.5fr 1fr; column-gap:4rem; }
:root .archetype-home .page-header .eyebrow { grid-column:1/-1; }
:root .archetype-home h1 { grid-column:1; grid-row:2/4; margin-top:0; }
:root .archetype-home .intro { grid-column:2; align-self:end; padding-top:.3rem; }
:root .archetype-home .byline { grid-column:2; margin-top:0; }
:root .feature-list { grid-template-columns:1fr 2.5fr; gap:3rem; border-top:3px double var(--ink); }
:root .curated-links { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; counter-reset:selection; }
:root .curated-item { gap:1rem; padding-block:1.5rem; }
:root .curated-item h3 { font-size:1.35rem; line-height:1.2; }
:root .curated-item h3 a { text-decoration:none; }
:root .curated-item h3 a:hover { text-decoration:underline; }
:root .item-number { color:#762d3b; font:italic 1.15rem Georgia,serif; min-width:1.4rem; padding-top:0; }
:root .curated-item p { line-height:1.6; font-size:.86rem; }
:root .prose { max-width:76ch; }
:root .prose section { margin-bottom:2.8rem; }
:root .prose h2 { max-width:30ch; font-size:2rem; }
:root .prose p { max-width:68ch; }
:root .prose a { color:#762d3b; }
:root .section-sources { margin-top:1.1rem; font-size:.72rem; }
:root .on-this-page { background:transparent; border-block:1px solid var(--line); padding:1.4rem 0; }
:root .on-this-page ol { columns:2; column-gap:2.5rem; }
:root .on-this-page li { break-inside:avoid; }
:root .on-this-page a { font-size:.85rem; }
:root .table-scroll { border-top:3px double var(--ink); }
:root th { background:#eee4d8; color:var(--ink); font-size:.78rem; }
:root td { font-size:.86rem; vertical-align:top; }
:root tr:nth-child(even) td { background:#f3eee5; }
:root .button { background:#762d3b; border-radius:0; padding:.9rem 1.4rem; font-weight:700; }
:root .button:hover { background:#54202b; }
:root .merchant-section, :root .evidence { border-top:3px double var(--ink); }
:root .evidence { color:var(--muted); }
:root .evidence h2 { color:var(--ink); }
:root .evidence h3 { font-family:Arial,Helvetica,sans-serif; font-size:.9rem; font-weight:700; }
:root .evidence p { font-size:.8rem; }
:root .breadcrumbs { font-size:.72rem; }
:root .research-method { padding-block:1.6rem; border-block:1px solid var(--line); max-width:76ch; }
:root .site-footer { margin-top:4rem; padding-block:2rem 3rem; border-top:3px double var(--ink); display:grid; grid-template-columns:1fr 2fr; gap:3rem; }
:root .site-footer .brand { color:#762d3b; font-style:italic; }
:root .site-footer p { font-size:.8rem; }
:root a:focus-visible, :root [tabindex]:focus-visible { outline-color:#762d3b; }
@media(max-width:850px) {
:root .wrap { width:calc(100% - 2.5rem); }
:root .archetype-home .page-header { column-gap:2rem; }
:root .feature-list { grid-template-columns:1fr; gap:1rem; }
}
@media(max-width:600px) {
:root:root { font-size:16px; --gap:2.5rem; }
:root .wrap { width:calc(100% - 2rem); }
:root .site-header { padding-top:1.2rem; }
:root .site-header .brand { padding-bottom:1rem; }
:root .site-header nav ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1rem; }
:root .site-header nav a { padding:.65rem 0; min-height:44px; font-size:.78rem; }
:root .page-header { padding-block:2.2rem 1.8rem; }
:root .archetype-home .page-header { display:block; }
:root h1 { font-size:clamp(2.6rem,11vw,3.6rem); }
:root .intro { font-size:1.08rem; }
:root .archetype-home .byline { margin-top:1.2rem; }
:root .hero-image { display:block; }
:root .hero-image img { max-height:380px; }
:root .hero-image figcaption { margin-top:1rem; }
:root .curated-links { grid-template-columns:1fr; }
:root .curated-item { padding-block:1.35rem; }
:root .on-this-page ol { columns:1; }
:root .site-footer { grid-template-columns:1fr; gap:.5rem; }
:root .prose h2 { font-size:1.8rem; }
}
@media print { .wrap { width:100%; } .archetype-home .page-header,.hero-image,.site-footer { display:block; } .hero-image img { max-height:240px; } .button { color:black; background:white; } }
/* Keep optional Markdown siblings within the same reading measure as sections. */
:root main > h2, :root main > h3 { max-width:30ch; margin-top:2rem; }
:root main > p, :root main > ul, :root main > ol, :root .entity-details > p, :root .entity-details > ul, :root .entity-details > ol { max-width:68ch; }
:root .table-scroll { max-width:100%; }
:root caption { text-align:left; font-size:.85rem; padding:1rem; font-weight:700; }

/* A portrait plate keeps the city image intact without a padded image frame. */
:root .hero-image { grid-template-columns:minmax(200px,315px) minmax(0,1fr); gap:2.5rem; }
:root .hero-image img { max-height:420px; background:transparent; }
:root .hero-image figcaption { max-width:45ch; }
@media(max-width:600px) {
 :root .hero-image { display:block; }
 :root .hero-image img { width:auto; max-width:100%; max-height:380px; }
}

}