/* Guide pages (/guides, /guides/*): the website's design system in article form.
   Loads after site.css. Street blades, the parking sign, kerb paint, Archivo headlines on sandstone paper. */

/* Hero */
.guide-hero { padding-bottom: clamp(2.5rem, 5vw, 5rem); }
.guide-hero .hero-map { background-position: 50% 35%; }
.guide-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: 1.2fr .8fr; gap: 2rem; } }
.guide-hero .hero-title { font-size: clamp(2.9rem, 1rem + 7.6vw, 7.6rem); }
.crumbs { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: .7rem; color: var(--sand); }
.crumbs a { color: var(--blue); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.js .hero .crumbs { opacity: 0; transition: opacity .8s var(--ease-out-expo); }
.js .hero.is-in .crumbs { opacity: 1; }

/* The big sign in the hero: the real parking-sign component, standing on its pole. */
.guide-sign { position: relative; justify-self: center; padding: 1rem 0 250px; }
.guide-sign .parking-sign { position: relative; left: auto; top: auto; width: 200px; padding: 1rem .9rem 1.1rem; }
.guide-sign .ps-big { font-size: 3.8rem; }
.guide-sign .ps-mid { grid-column: 1 / -1; font-size: 2.1rem; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1; margin-bottom: .3rem; }
.guide-sign .ps-ticket { font-size: 1.05rem; }
.guide-sign .ps-time, .guide-sign .ps-days { font-size: .78rem; }
.sign-red { color: var(--red); box-shadow: inset 0 0 0 2px #1d1d1d, inset 0 0 0 4px var(--white), inset 0 0 0 5.5px var(--red), 0 18px 30px -16px #0d1b2e88; }
.sign-blue { color: var(--blue); box-shadow: inset 0 0 0 2px #1d1d1d, inset 0 0 0 4px var(--white), inset 0 0 0 5.5px var(--blue), 0 18px 30px -16px #0d1b2e88; }
@media (max-width: 999px) { .guide-sign { padding-bottom: 120px; } .guide-sign .parking-sign::after { height: 110px; } }

/* Body layout: sticky contents rail on the left, article on the right. */
.guide-body { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 var(--space-section); }
.guide-layout { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .guide-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 5rem; align-items: start; } .guide-toc { position: sticky; top: 5.5rem; } }
.guide-toc ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.guide-toc li { border-bottom: 1.5px solid var(--line); }
.guide-toc a { display: flex; align-items: baseline; gap: .8rem; padding: .72rem 0; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; transition: color var(--duration-fast) ease, padding-left var(--duration-fast) ease; }
.guide-toc a:hover { color: var(--blue); padding-left: .3rem; }
.guide-toc i { font-style: normal; font-family: var(--font-display); font-weight: 900; font-stretch: 78%; font-size: 1.1rem; color: var(--red); min-width: 1.6em; }
.guide-toc .kicker { display: block; margin-bottom: .8rem; }
.guide-toc .toc-cta { margin-top: 1.4rem; }

/* In short: the blue tile with kerb paint along the bottom. */
.inshort { position: relative; overflow: hidden; background: var(--blue); color: var(--white); border-radius: var(--radius-lg); padding: 1.8rem 1.8rem 2.2rem; box-shadow: var(--shadow-lift); margin-bottom: 3rem; }
.inshort::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--kerb) 0 34px, var(--asphalt) 34px 68px); }
.prose .inshort h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 90%; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: #ffd0d6; }
.prose .inshort ul { margin: .9rem 0 0; padding-left: 1.2rem; }
.prose .inshort li { margin: .55rem 0; font-size: 1.05rem; line-height: 1.5; color: #ffffffee; }
.prose .inshort b, .prose .inshort a { color: var(--kerb); }
.prose .inshort a { font-weight: 700; }

/* Article prose */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin: 3.4rem 0 1rem; font-family: var(--font-display); font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: .92; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 5.5rem; }
.prose h2 em { font-style: normal; color: var(--red); }
.prose h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 90%; font-size: 1.35rem; line-height: 1.15; margin: 1.9rem 0 .4rem; color: var(--blue); }
.prose p, .prose li { color: #2f3a4b; font-size: 1.04rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .45rem; }
.prose a { color: var(--blue); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }
.prose b { color: var(--ink); }
.prose .steps { margin-top: 1.4rem; }
.prose .step { padding: 1.3rem 0; }
.prose .step p { max-width: none; }

/* Sheets: tables drawn like a sign schedule. */
.sheet { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1.5px solid var(--line); border-radius: 22px; overflow: hidden; margin: 1.3rem 0; box-shadow: 0 18px 36px -28px #0d1b2e66; }
.sheet th { background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 800; font-stretch: 90%; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; padding: .9rem 1.1rem; text-align: left; }
.sheet td { padding: .9rem 1.1rem; border-top: 1.5px solid var(--line); vertical-align: top; color: #2f3a4b; }
.sheet tr:first-child td { border-top: 0; }
.sheet tbody tr:hover td { background: #faf7f0; }
.sheet .num { font-family: var(--font-display); font-weight: 900; font-stretch: 85%; font-size: 1.4rem; line-height: 1; color: var(--red); white-space: nowrap; }
.sheet .pts { font-family: var(--font-display); font-weight: 800; font-stretch: 90%; color: var(--muted); white-space: nowrap; }
.sheet .code { font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: 1.6rem; line-height: 1; color: var(--sign-green); white-space: nowrap; }
.sheet th.lab, .sheet td.lab { width: 1%; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-stretch: 90%; color: var(--blue); }
@media (max-width: 560px) { .sheet { border-radius: 16px; } .sheet th, .sheet td { padding: .65rem .6rem; font-size: .92rem; } .sheet .num { font-size: 1.1rem; white-space: normal; } .sheet .pts { white-space: normal; font-size: .85rem; } .sheet .code { font-size: 1.25rem; } .sheet th.lab, .sheet td.lab { white-space: normal; } }

/* Callouts */
.note { background: var(--white); border: 1.5px solid var(--line); border-left: 6px solid var(--blue); border-radius: 16px; padding: 1rem 1.2rem; }
.note b { color: var(--blue); }
.prose .emergency { margin-top: 1.4rem; }
.prose .emergency b { color: var(--white); }

/* The call to action: night-blue band with the Newcastle streets under it. */
.guide-cta { position: relative; overflow: hidden; isolation: isolate; margin: 3.5rem 0 0; background: var(--blue-night); color: var(--white); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1rem + 2.5vw, 2.8rem); display: grid; gap: 1.3rem; box-shadow: var(--shadow-lift); }
.guide-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/assets/site/newcastle-streets.webp') 50% 50% / cover no-repeat; opacity: .16; mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.4); }
.guide-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--kerb) 0 34px, transparent 34px 68px); opacity: .9; }
.guide-cta h2 { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 78%; text-transform: uppercase; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: .9; letter-spacing: -0.015em; color: var(--white); }
.guide-cta h2 span { color: var(--red-light); }
.guide-cta p { margin: 0; color: #ffffffd9; max-width: 34rem; font-size: 1.05rem; }
.guide-cta .btn-ghost { color: var(--white); border-color: var(--white); }
.guide-cta .btn-ghost:hover { background: var(--white); color: var(--blue-night); }
@media (min-width: 820px) { .guide-cta { grid-template-columns: 1fr auto; align-items: center; } .guide-cta .cta-row { margin-top: 0; } }

/* Related guides */
.related { padding: 0 0 var(--space-section); }