/* Chipstead Lodge graphics layer, September 2026.
   Engraved-style line drawings, the area map, photo frames and page finishes.
   Brand: navy for ink, bright gold for decoration only, gold-deep for gold text on light.
   Remove this file and assets/graphics.js to return to the previous design. */

:root {
  --gx-navy: #0e1e3a;
  --gx-gold: #c9a84c;
  --gx-gold-deep: #7a6421;
  --gx-cream: #f8f6f1;
  --gx-ink: #1a1a1a;
  --gx-ink-light: #4a4a4a;
  --gx-ease: cubic-bezier(.22, .61, .36, 1);
  --gx-ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ------------------------------------------------------------------
   Line drawings
   ------------------------------------------------------------------ */
.gx-illo { display: block; width: 72px; height: 72px; overflow: visible; }
.gx-s { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.gx-s.gx-thin { stroke-width: 1.15; }
.gx-illo .gx-ink { stroke: var(--gx-navy); }
.gx-illo .gx-gold { stroke: var(--gx-gold); }
.gx-illo .gx-dot { fill: var(--gx-gold); }
.gx-illo .gx-glyph { fill: var(--gx-gold-deep); font: 600 15px/1 'Cormorant Garamond', Georgia, serif; }

/* Draw-in: each stroke is normalised to length 1 and revealed in order. */
.gx-anim .gx-draw .gx-s { stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02; transition: stroke-dashoffset var(--dur, 1.1s) var(--gx-ease-io) var(--d, 0s); }
.gx-anim .gx-draw.is-drawn .gx-s { stroke-dashoffset: 0; }
.gx-anim .gx-draw .gx-dot, .gx-anim .gx-draw .gx-glyph { opacity: 0; transition: opacity .6s var(--gx-ease) var(--end, 1s); }
.gx-anim .gx-draw.is-drawn .gx-dot, .gx-anim .gx-draw.is-drawn .gx-glyph { opacity: 1; }
.gx-anim .gx-draw .gx-fade { opacity: 0; transition: opacity .8s var(--gx-ease) var(--d, 0s); }
.gx-anim .gx-draw.is-drawn .gx-fade { opacity: 1; }

/* ------------------------------------------------------------------
   Homepage: practical guide cards
   ------------------------------------------------------------------ */
.guide-grid.gx-has-illos > a { position: relative; }
.gx-card-illo { width: 70px; height: 70px; margin: 0 0 .85rem -4px; transition: transform .5s var(--gx-ease); }
.gx-card::after { content: ''; position: absolute; top: -2px; left: 0; height: 2px; width: 0; background: var(--gx-navy); transition: width .6s var(--gx-ease); }
.gx-card:hover::after, .gx-card:focus-visible::after { width: 38%; }
.gx-card:hover .gx-card-illo, .gx-card:focus-visible .gx-card-illo { transform: translateY(-3px); }

/* ------------------------------------------------------------------
   /a-meeting/: the evening in three parts
   ------------------------------------------------------------------ */
.gx-evening { position: relative; margin: 2.25rem 0 2.5rem; }
.gx-evening-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.gx-evening-step { margin: 0; padding: 0; text-align: center; }
.gx-evening-step::before { content: none; }
.gx-evening-step .gx-illo { width: 92px; height: 92px; margin: 0 auto .8rem; padding: 6px; box-sizing: content-box; background: var(--gx-cream); border-radius: 50%; }
.gx-evening-step strong { display: block; font: 600 1.2rem/1.25 'Cormorant Garamond', Georgia, serif; color: var(--gx-navy); }
.gx-evening-step span { display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.5; color: var(--gx-ink-light); }
.gx-evening-thread { position: absolute; z-index: 0; top: 52px; left: 16.667%; right: 16.667%; height: 1px; background: var(--gx-gold); transform-origin: left center; }
.gx-anim .gx-evening .gx-evening-thread { transform: scaleX(0); transition: transform 2.6s var(--gx-ease-io) .35s; }
.gx-anim .gx-evening.is-drawn .gx-evening-thread { transform: none; }
@media (max-width: 600px) {
  .gx-evening-steps { grid-template-columns: 1fr; gap: 1rem; }
  .gx-evening-step { display: grid; grid-template-columns: 76px 1fr; column-gap: 1rem; align-items: center; text-align: left; }
  .gx-evening-step .gx-illo { width: 64px; height: 64px; margin: 0; grid-row: span 2; }
  .gx-evening-step span { margin-top: .1rem; }
  .gx-evening-thread { top: 38px; bottom: 38px; left: 38px; right: auto; width: 1px; height: auto; transform-origin: center top; }
  .gx-anim .gx-evening .gx-evening-thread { transform: scaleY(0); }
}

/* ------------------------------------------------------------------
   /costs/: four dinners, inside the "short answer" figure
   ------------------------------------------------------------------ */
.gx-dinners { margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(14, 30, 58, .1); }
.gx-dinners-row { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; gap: clamp(.25rem, 3vw, 1.75rem); }
.gx-dinners-row li { margin: 0; padding: 0; }
.gx-dinners-row li::before { content: none; }
.gx-dinners-row .gx-illo { width: 68px; height: 68px; }
.gx-dinners-month { display: block; margin-top: .3rem; font: 600 .72rem/1 Raleway, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--gx-gold-deep); }
.gx-dinners figcaption { margin: .9rem auto 0; max-width: 30rem; font: italic 400 1.05rem/1.5 'Cormorant Garamond', Georgia, serif; color: var(--gx-ink-light); }
@media (max-width: 420px) { .gx-dinners-row .gx-illo { width: 58px; height: 58px; } }

/* ------------------------------------------------------------------
   /local/: area map
   ------------------------------------------------------------------ */
.gx-map { margin: 2rem 0 2.5rem; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 2rem; align-items: center; }
.gx-map-svg { display: block; width: 100%; height: auto; background: #fbfaf6; overflow: visible; }
.gx-map-svg .gx-ink { stroke: var(--gx-navy); }
.gx-map-svg .gx-frame { opacity: .5; }
.gx-map-svg .gx-ring { stroke: var(--gx-gold); stroke-width: 1.2; }
.gx-map-svg text { font-family: Raleway, 'Helvetica Neue', Arial, sans-serif; }
.gx-map-svg .gx-ring-label { font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--gx-gold-deep); }
.gx-map-svg .gx-town circle { fill: var(--gx-navy); }
.gx-map-svg .gx-town text { font: 500 13px 'Cormorant Garamond', Georgia, serif; fill: var(--gx-ink); }
.gx-map-svg .gx-venue rect { stroke: var(--gx-navy); stroke-width: 1.5; }
.gx-map-svg .gx-venue-main rect { fill: var(--gx-gold); }
.gx-map-svg .gx-venue-practice rect { fill: #fff; }
.gx-map-svg .gx-halo { fill: rgba(201, 168, 76, .16); stroke: var(--gx-gold); stroke-width: .8; }
.gx-map-svg .gx-venue-name { font: 700 14px 'Cormorant Garamond', Georgia, serif; fill: var(--gx-navy); }
.gx-map-svg .gx-venue-note { font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--gx-gold-deep); }
.gx-map-svg .gx-furniture path { fill: none; stroke: var(--gx-navy); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.gx-map-svg .gx-furniture text { font-size: 9px; font-weight: 600; letter-spacing: .12em; fill: var(--gx-ink-light); }
.gx-map-side .gx-map-title { margin: 0 0 .75rem; font: 600 .78rem/1.4 Raleway, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gx-gold-deep); }
.gx-map-list { list-style: none; margin: 0; padding: 0; }
.gx-map-list li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem 0; border-bottom: 1px solid rgba(14, 30, 58, .1); font-size: .98rem; color: var(--gx-ink); }
.gx-map-list li::before { content: none; }
.gx-map-miles { color: var(--gx-ink-light); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-map-side .gx-map-note { margin: .85rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--gx-ink-light); }
@media (max-width: 700px) {
  .gx-map { grid-template-columns: 1fr; gap: 1.5rem; }
  .gx-map-svg { max-width: 360px; margin: 0 auto; }
}

/* ------------------------------------------------------------------
   Guide pages: an engraved corner frame around the page title
   (skipped where the header holds a photograph)
   ------------------------------------------------------------------ */
@property --gx-corner { syntax: '<length>'; inherits: false; initial-value: 34px; }
.guide-page .hero:not(:has(figure, img)) { position: relative; }
.guide-page .hero:not(:has(figure, img))::before {
  content: ''; position: absolute; inset: 1.75rem 0 .25rem; pointer-events: none;
  --gx-c: rgba(201, 168, 76, .85);
  background:
    linear-gradient(var(--gx-c), var(--gx-c)) left top / var(--gx-corner) 1px no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) left top / 1px var(--gx-corner) no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) right top / var(--gx-corner) 1px no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) right top / 1px var(--gx-corner) no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) left bottom / var(--gx-corner) 1px no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) left bottom / 1px var(--gx-corner) no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) right bottom / var(--gx-corner) 1px no-repeat,
    linear-gradient(var(--gx-c), var(--gx-c)) right bottom / 1px var(--gx-corner) no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .guide-page .hero:not(:has(figure, img))::before { animation: gx-corners 1.6s var(--gx-ease) .2s both; }
  .guide-page hr.divider { animation: gx-rule 1.2s var(--gx-ease) .6s both; }
}
@keyframes gx-corners { from { --gx-corner: 0px; opacity: 0; } to { --gx-corner: 34px; opacity: 1; } }
@keyframes gx-rule { from { width: 0; } to { width: 60px; } }
@media (max-width: 600px) {
  .guide-page .hero:not(:has(figure, img))::before { inset: 1.25rem .75rem 0; }
}

/* ------------------------------------------------------------------
   Photographs: an offset gold keyline, settling into place when seen
   ------------------------------------------------------------------ */
.gx-framed { position: relative; isolation: isolate; }
.gx-framed::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 1px solid rgba(201, 168, 76, .7); transform: translate(-14px, -14px); }
.gx-anim .gx-framed::before { opacity: 0; transform: none; transition: opacity 1s var(--gx-ease) .2s, transform 1.6s var(--gx-ease) .2s; }
.gx-anim .gx-framed.is-framed::before { opacity: 1; transform: translate(-14px, -14px); }
/* Let the motion layer's photo reveal interpolate without clipping the frame. */
.mo-anim .mo-photo.gx-framed { clip-path: inset(-40px); }
.mo-anim .mo-photo.gx-framed.mo-photo-pending { clip-path: inset(6% 4% 6% 4%); }
@media (max-width: 800px) { .gx-framed::before { display: none; } }

/* ------------------------------------------------------------------
   Paper: a faint warm grain on the cream pages and the cream homepage band
   ------------------------------------------------------------------ */
body.guide-page, .home-page .practical-guides {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   Background: faint construction lines
   ------------------------------------------------------------------ */
.gx-has-backdrop { position: relative; isolation: isolate; }
.gx-has-backdrop > :not(.gx-backdrop) { position: relative; z-index: 1; }
.home-page #pillars.gx-has-backdrop .pillar { background: #132a4e; }
.gx-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gx-backdrop svg { position: absolute; top: -40px; will-change: transform; }
.gx-backdrop--right svg { right: -140px; }
.gx-backdrop--left svg { left: -140px; }
.gx-construct .gx-s { stroke: var(--gx-gold); stroke-width: 1; opacity: .09; }
.gx-anim .gx-construct .gx-s { transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
.gx-margins { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
.gx-margin { position: absolute; top: 0; bottom: 0; width: calc((100vw - 760px) / 2); overflow: hidden; }
.gx-margin--left { left: 0; }
.gx-margin--right { right: 0; }
.gx-margin svg { position: absolute; top: 90px; will-change: transform; }
.gx-margin--left svg { right: 10px; }
.gx-margin--right svg { left: 10px; }
.gx-margin .gx-construct .gx-s { stroke: var(--gx-navy); opacity: .075; }
@media (min-width: 1180px) { .gx-margins { display: block; } }
@media (max-width: 800px) {
  .gx-backdrop svg { width: 520px; height: auto; top: -20px; }
  .gx-backdrop--right svg { right: -170px; }
  .gx-backdrop--left svg { left: -170px; }
  .gx-construct .gx-s { opacity: .07; }
}

@media print {
  .gx-backdrop, .gx-margins { display: none !important; }
  .gx-anim .gx-draw .gx-s { stroke-dashoffset: 0 !important; }
  .gx-anim .gx-draw .gx-fade, .gx-anim .gx-draw .gx-dot, .gx-anim .gx-draw .gx-glyph { opacity: 1 !important; }
  .gx-framed::before { display: none; }
}