/* layouts/gallery.css — „Galerie“: editorial, the system's serif faces on
   cream paper, wood brown. The accent (theme.accent, default brown) always
   meets the cream --ground: as text and rules on the paper and as the
   background of cream text (the button); the loader requires 4.5 : 1. */
:root {
  --ground: #f7f1e6; --paper: #fffaf2; --bg: #f7f1e6; --bg-alt: #efe5d3;
  --ink: #2b2118; --muted: #6b5a4a; --line: #d9cbb3;
  --accent: #7a4a26; --focus: #7a4a26;
  --max: 1100px;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-display: var(--font);
}
body { font-size: 1.0625rem; line-height: 1.65; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.005em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.g-h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.35rem); font-weight: 500; }
.g-lead { font-size: 1.15rem; color: var(--muted); }
.g-note { color: var(--muted); font-style: italic; }

/* masthead: centred, not sticky, an inline menu between hairlines */
.g-mast { text-align: center; padding: 2.25rem 0 0; }
.g-notice { margin: 0 0 1.25rem; font-style: italic; color: var(--muted); }
.g-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); font-weight: 500; line-height: 1.1; letter-spacing: .01em; }
.g-brand .icon { width: .8em; height: .8em; color: var(--accent); }
.g-place { margin: .5rem 0 0; font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--muted); font-size: 1.05rem; }
.g-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 0; margin-top: 1.5rem; padding: .7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-nav a { padding: .2rem .85rem; color: var(--ink); text-decoration: none; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.1rem; }
@media (min-width: 720px) { .g-nav a + a { border-left: 1px solid var(--line); } }
.g-nav a:hover { color: var(--accent); text-decoration: underline; }

/* intro */
.g-intro { padding-top: 3rem; padding-bottom: 2.5rem; text-align: center; }
.g-intro h1 { max-width: 18em; margin: 0 auto .9rem; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); font-weight: 500; line-height: 1.1; }
.g-tagline { max-width: 36rem; margin: 0 auto 1.75rem; font-size: 1.2rem; color: var(--muted); font-style: italic; }
.g-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1rem; margin: 0; }
.g-btn { display: inline-block; padding: .75rem 1.6rem; background: var(--accent); color: var(--ground); text-decoration: none; letter-spacing: .04em; border-radius: 2px; }
.g-btn:hover { filter: brightness(.86); } /* darker: the cream text keeps its contrast */
.g-or { color: var(--muted); font-style: italic; }
.g-phone { color: var(--ink); white-space: nowrap; font-size: 1.15rem; }

/* signposts */
.g-paths { padding-bottom: 2.5rem; }
.g-path-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.g-path { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); }
.g-path h2, .g-path h3 { font-size: 1.45rem; font-weight: 500; margin-bottom: .4rem; }
.g-path p { color: var(--muted); }
.g-path a { display: inline-flex; align-items: center; gap: .35rem; }
.g-path .icon { width: 1.05rem; height: 1.05rem; }

/* the mosaic of work */
.g-work { padding: 1rem 0 4rem; }
.g-head { display: grid; gap: .25rem 2rem; align-items: baseline; margin-bottom: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.g-head h2 { margin: 0; }
.g-head p { margin: 0; color: var(--muted); font-style: italic; max-width: 34rem; }
@media (min-width: 800px) { .g-head { grid-template-columns: auto 1fr; } .g-head p { justify-self: end; text-align: right; } }
.g-mosaic { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 10.5rem; grid-auto-flow: dense; }
.g-mosaic li { min-width: 0; }
.g-mosaic li:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.g-mosaic li:nth-child(6n+2) { grid-row: span 2; }
.g-mosaic li:nth-child(6n+5), .g-mosaic li:nth-child(6n) { grid-column: span 2; grid-row: span 2; }
.g-mosaic figure { position: relative; height: 100%; margin: 0; overflow: hidden; background: var(--bg-alt); }
.g-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-mosaic figcaption { position: absolute; left: .6rem; bottom: .6rem; max-width: calc(100% - 1.2rem); padding: .2rem .6rem; background: var(--paper); color: var(--ink); font-size: .9rem; font-style: italic; line-height: 1.35; }
@media (min-width: 800px) {
  .g-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 14rem; gap: .75rem; }
  .g-mosaic li:nth-child(6n+5), .g-mosaic li:nth-child(6n) { grid-row: span 1; }
}

/* sections */
.g-section { padding: 4rem 0; }
.g-alt { background: var(--bg-alt); }
.g-alt .g-head { border-top-color: #cdbd9f; }
.g-narrow { max-width: 50rem; }

/* the story: a drop cap, the photo beside it and the facts under both */
.g-story-grid { display: grid; gap: 2rem; align-items: start; }
.g-story-text > p:first-of-type::first-letter { float: left; margin: .35rem .5rem 0 0; font-size: 3.6em; line-height: .8; color: var(--accent); }
.g-story-img { margin: 0; }
.g-story-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.g-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.25rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.g-facts div { display: flex; flex-direction: column-reverse; text-align: center; }
.g-facts dt { color: var(--muted); font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 1.05rem; }
.g-facts dd { margin: 0; font-size: 2rem; line-height: 1.2; color: var(--accent); }
@media (min-width: 900px) {
  .g-story-grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }
  .g-story-grid .g-facts { grid-column: 1 / -1; }
}

/* columns of services */
.g-columns { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.g-columns li { padding-top: 1rem; border-top: 2px solid var(--accent); }
.g-columns h3 { font-size: 1.4rem; font-weight: 500; margin-bottom: .4rem; }
.g-columns p { color: var(--muted); margin: 0; }
.g-col-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1rem; }

/* the vertical timeline with photos */
.g-timeline { list-style: none; counter-reset: g-step; padding: 0; margin: 0 0 1.5rem; }
.g-timeline li { counter-increment: g-step; position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: 2.5rem; }
.g-timeline li::before { content: counter(g-step); grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--bg-alt); color: var(--accent); font-size: 1.25rem; position: relative; z-index: 1; }
.g-timeline li::after { content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: 0; width: 1px; background: #bba98b; }
.g-timeline li:last-child { padding-bottom: 0; }
.g-timeline li:last-child::after { display: none; }
.g-step-img { grid-column: 2; display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1rem; }
.g-timeline h3 { grid-column: 2; font-size: 1.45rem; font-weight: 500; margin: .35rem 0 .35rem; }
.g-timeline p { grid-column: 2; margin: 0; color: var(--muted); max-width: 34rem; }
@media (min-width: 800px) {
  .g-timeline li { grid-template-columns: 2.75rem minmax(0, 22rem) minmax(0, 1fr); column-gap: 2rem; }
  .g-step-img { grid-row: 1 / span 2; margin: 0; }
  .g-timeline h3, .g-timeline p { grid-column: 3; }
  .g-timeline h3 { align-self: end; margin-top: 0; }
  .g-timeline p { align-self: start; }
  .g-timeline .g-noimg h3, .g-timeline .g-noimg p { grid-column: 2 / -1; }
}

/* prices at the end */
.g-price-group { font-size: 1.3rem; font-weight: 500; margin: 2rem 0 .25rem; }
.g-prices { margin: 1rem 0 1.25rem; border-top: 1px solid var(--ink); }
.g-prices div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.5rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.g-prices dt { font-size: 1.15rem; }
.g-prices dt span { display: block; font-size: .95rem; color: var(--muted); font-style: italic; }
.g-prices dd { margin: 0; white-space: nowrap; font-variant-numeric: oldstyle-nums; }
.g-prices .g-hl dd { color: var(--accent); font-style: italic; }

/* contact */
.g-contact { border-top: 1px solid var(--line); background: var(--paper); }
.g-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 900px) { .g-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.g-company { font-size: 1.5rem; margin: 0 0 .5rem; }
.g-contact .contact-list { font-size: 1.15rem; }
.g-contact .contact-list .label { font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1rem; }
.g-hours { margin-bottom: 2rem; }
.g-hours h3 { font-size: 1.3rem; font-weight: 500; }
.g-contact .contact-form:not(.demo-form) { background: var(--bg); padding: 1.5rem; border: 1px solid var(--line); }
.g-contact .demo-form { border-radius: 0; background: var(--bg); border-color: #bba98b; }
.g-contact .demo-form p { color: var(--muted); }
.g-contact .contact-form button { color: var(--ground); background: var(--accent); }

/* colophon */
.g-foot { padding: 2.5rem 0 3rem; text-align: center; color: var(--muted); font-size: .95rem; }
.g-foot::before { content: ""; display: block; width: 4rem; height: 1px; margin: 0 auto 1.5rem; background: var(--accent); }
.g-foot p { margin: 0 0 .35rem; }
.g-foot-brand { color: var(--ink); font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1.05rem; }