/* Studio Di: colours sampled from the logo (charcoal #2c2d2d line art, crimson #d01f3c "Di").
   Display face Fraunces with the SOFT axis, echoing the rounded serif of the logo's "Di";
   body Figtree. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/fraunces-latin-soft-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/fraunces-latin-ext-soft-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url(fonts/figtree-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url(fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #2c2d2d;        /* logo line art */
  --red: #d01f3c;        /* logo "Di", 5.3:1 on white: safe for text and buttons */
  --red-deep: #a8152f;   /* hover */
  --rose: #fbeef0;       /* pale tint of the red for alternating bands */
  --rose-line: #f1d3d8;
  --paper: #ffffff;
  --muted: #6b6566;      /* 5.7:1 on white, 5.2:1 on rose */

  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Figtree", system-ui, sans-serif;

  --s-1: .875rem; --s0: 1.0625rem; --s1: 1.25rem; --s2: 1.6rem; --s3: 2.1rem; --s4: 2.8rem;
  --wrap: 74rem;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --band: clamp(3.5rem, 8vw, 6rem);
  --r: 1.25rem;          /* soft corners, like the logo's rounded serifs */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--s0)/1.6 var(--f-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 560; line-height: 1.08; margin: 0 0 .5em;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 72; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 4vw + 1rem, 4.25rem); }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s1); font-variation-settings: "SOFT" 100, "opsz" 24; letter-spacing: 0; }
em { font-style: normal; color: var(--red); }
p { margin: 0 0 1em; max-width: 64ch; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--red); color: var(--paper); padding: .5rem 1rem; }
.skip:focus { left: .5rem; }
.lede { font-size: var(--s1); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.link { color: var(--red); font-weight: 600; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--red-deep); }

/* ---------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn { display: inline-flex; align-items: baseline; gap: .5rem; min-height: 3.1rem; padding: .8rem 1.4rem; border-radius: 999px;
  font: 700 var(--s1)/1.2 var(--f-body); text-decoration: none; border: 2px solid var(--red); transition: background .15s, color .15s; }
.btn-who { font-weight: 500; font-size: var(--s-1); }
.btn-red { background: var(--red); color: var(--paper); }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn-line { color: var(--red); background: var(--paper); }
.btn-line:hover { background: var(--rose); }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rose-line); }
.top-in { display: flex; align-items: center; gap: 2rem; height: 4.5rem; }
.logo { height: 3.25rem; width: auto; }
.nav { display: flex; gap: 1.75rem; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 600; color: var(--muted); padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.top-call { background: var(--red); color: var(--paper); text-decoration: none; font-weight: 700; padding: .55rem 1.1rem; border-radius: 999px; white-space: nowrap; }
.top-call:hover { background: var(--red-deep); }
@media (max-width: 52em) {
  .top-in { height: auto; flex-wrap: wrap; gap: 0 1rem; padding-top: .5rem; }
  .logo { height: 2.75rem; }
  .top-call { margin-left: auto; }
  .nav { order: 3; width: 100%; margin: 0; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; padding: .35rem 0 .5rem; }
  .nav a { white-space: nowrap; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; }
.hero h1 { max-width: 15ch; }
.today { display: inline-flex; align-items: center; gap: .6rem; margin: 1.25rem 0 0; padding: .45rem .9rem; border-radius: 999px; background: var(--rose); font-weight: 600; }
.today::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.today.is-open::before { background: #2f8f4e; box-shadow: 0 0 0 4px rgba(47, 143, 78, .18); }

.hero-work { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, minmax(0, 3.2rem)); }
.hero-shot { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 18px 40px -22px rgba(44, 45, 45, .55); }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-shot-0 { grid-column: 1 / 4; grid-row: 1 / 8; z-index: 1; }
.hero-shot-1 { grid-column: 4 / 7; grid-row: 2 / 9; z-index: 2; transform: translateX(-10%); }
.hero-shot-2 { display: none; }
@media (min-width: 70em) {
  .hero-work { grid-template-columns: repeat(9, 1fr); }
  .hero-shot-0 { grid-column: 1 / 4; grid-row: 2 / 9; }
  .hero-shot-1 { grid-column: 4 / 7; grid-row: 1 / 8; transform: none; }
  .hero-shot-2 { display: block; grid-column: 7 / 10; grid-row: 3 / 10; }
  .hero-work { grid-template-rows: repeat(9, minmax(0, 3rem)); gap: 0 1rem; }
}
@media (max-width: 52em) {
  .hero-in { grid-template-columns: 1fr; gap: 2rem; }
  .hero-work { grid-template-rows: repeat(8, minmax(0, 2.6rem)); }
}

/* ---------------------------------------------------------------- bands */
.band { padding: var(--band) 0; }
.band-tight { padding-top: clamp(2rem, 5vw, 3.5rem); }
.band-rose { background: var(--rose); }
.head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.75rem; }
.head-row h2 { margin: 0; }
.head-row p { margin: 0; color: var(--muted); }
.more { color: var(--red); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--rose-line); }
.more:hover { border-color: var(--red); }

/* home gallery strip: two rows, scrolls sideways on phones */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.strip img, .wall img, .interior img { border-radius: calc(var(--r) * .6); width: 100%; transition: transform .25s, filter .25s; }
.strip a:hover img, .wall a:hover img, .interior a:hover img { transform: scale(1.02); filter: saturate(1.08); }
.strip img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 56em) {
  .strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .strip li { scroll-snap-align: start; }
}

/* services */
.services { display: grid; grid-template-columns: 1fr 2.4fr; gap: 1rem 3rem; }
.svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
.svc li { padding: 1.1rem 0; border-top: 1px solid var(--rose-line); }
.svc h3 { margin: 0 0 .25rem; }
.svc p { margin: 0; color: var(--muted); }
@media (max-width: 56em) { .services { grid-template-columns: 1fr; } }
@media (max-width: 36em) { .svc { grid-template-columns: 1fr; } }

/* visit: hours and location */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; align-items: start; }
@media (max-width: 52em) { .visit { grid-template-columns: 1fr; } }
.hours { width: 100%; max-width: 26rem; border-collapse: collapse; font-size: var(--s1); }
.hours th { text-align: left; font-weight: 500; padding: .55rem 0; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; padding: .55rem 0; }
.hours tr { border-bottom: 1px solid var(--rose-line); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--red); font-weight: 700; }
.hours tr.is-today th::after { content: " (danes)"; font-weight: 500; font-size: var(--s-1); }
.hours-note { color: var(--muted); font-size: var(--s-1); margin-top: .75rem; }
address { font-style: normal; font-size: var(--s1); line-height: 1.5; margin-bottom: 1rem; }
.visit-img { border-radius: var(--r); margin-top: 1.5rem; }

/* gift voucher */
.gift { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem 4rem; align-items: center; }
.gift-img { border-radius: .75rem; box-shadow: 0 24px 50px -28px rgba(168, 21, 47, .55); transform: rotate(-2deg); }
.gift-page { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 52em) { .gift, .gift-page { grid-template-columns: 1fr; } .gift-img { transform: none; } }
.steps { padding-left: 1.4rem; margin: 0 0 1rem; }
.steps li { padding: .4rem 0 .4rem .3rem; }
.steps li::marker { color: var(--red); font: 600 var(--s1) var(--f-display); }

/* booking band */
.book { background: var(--red); color: var(--paper); padding: clamp(3rem, 7vw, 4.5rem) 0; }
.book-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem 4rem; align-items: center; }
.book h2 { font-size: var(--s4); margin-bottom: .35em; }
.book p { margin: 0; opacity: .92; }
.book a:not(.btn) { color: inherit; }
.book-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.book .btn-red { background: var(--paper); color: var(--red); border-color: var(--paper); }
.book .btn-red:hover { background: var(--rose); border-color: var(--rose); }
.book .btn-line { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .7); }
.book .btn-line:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 52em) { .book-in { grid-template-columns: 1fr; } .book-actions { justify-content: flex-start; } }

/* ---------------------------------------------------------------- inner pages */
.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); }
.page-head h1 { margin-bottom: .3em; }
.nf { min-height: 50vh; }

.wall { list-style: none; margin: 0; padding: 0; columns: 4 14rem; column-gap: .9rem; }
.wall li { break-inside: avoid; margin-bottom: .9rem; }

.story { display: grid; grid-template-columns: 22rem 1fr; gap: 2rem 4rem; align-items: start; }
.story-portrait { margin: 0; position: sticky; top: 6rem; }
.portrait { border-radius: 50% 50% var(--r) var(--r); width: 100%; }
.story-portrait figcaption { margin-top: 1rem; display: grid; }
.story-portrait strong { font: 560 var(--s2)/1.2 var(--f-display); font-variation-settings: "SOFT" 100; }
.story-portrait span { color: var(--muted); }
.story-text .lede { color: var(--ink); font-family: var(--f-display); font-size: var(--s2); line-height: 1.3; font-variation-settings: "SOFT" 100, "opsz" 48; max-width: 30ch; }
.story-text h2 { margin-top: 2rem; font-size: var(--s2); }
blockquote { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 4px solid var(--red); font: 400 var(--s1)/1.5 var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100; max-width: 52ch; }
.dots { list-style: none; padding: 0; margin: 0; }
.dots li { padding: .4rem 0 .4rem 1.4rem; position: relative; }
.dots li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); }
@media (max-width: 52em) { .story { grid-template-columns: 1fr; } .story-portrait { position: static; max-width: 18rem; } }

.interior { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 40em) { .interior { grid-template-columns: 1fr; } }

.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem 5rem; }
@media (max-width: 52em) { .contact { grid-template-columns: 1fr; } }
.contact-main { border-top: 2px solid var(--ink); }
.big-link { display: grid; padding: 1.3rem 0; border-bottom: 1px solid var(--rose-line); text-decoration: none;
  font: 560 clamp(1.9rem, 3vw + 1rem, 3rem)/1.1 var(--f-display); font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.big-link span { font: 500 var(--s0)/1.3 var(--f-body); color: var(--muted); }
.big-link:hover { color: var(--red); }
.contact-side h2 { font-size: var(--s2); margin-top: 2rem; }
.contact-side h2:first-child { margin-top: 0; }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(28, 22, 24, .92); }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: .5rem; }
.lb-btn, .lb-close { position: fixed; background: var(--paper); color: var(--ink); border: 0; border-radius: 50%; width: 3rem; height: 3rem; font: 600 1.75rem/1 var(--f-body); cursor: pointer; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-close { top: 1rem; right: 1rem; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--ink); color: #cfc9ca; padding: 3rem 0 2rem; font-size: var(--s-1); }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.5rem 3rem; }
.foot-name { font: 560 var(--s2)/1 var(--f-display); color: var(--paper); font-variation-settings: "SOFT" 100; margin-bottom: .75rem; }
.foot a { color: var(--paper); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; align-content: start; }
.foot-list span { color: #a59fa0; }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid #45464a; padding-top: 1.25rem; margin: .5rem 0 0; max-width: none; color: #a59fa0; }
@media (max-width: 52em) { .foot-in { grid-template-columns: 1fr; } }

/* price list */
.pricelist { columns: 3 18rem; column-gap: 3.5rem; }
.pl-group { break-inside: avoid; margin-bottom: 2.25rem; }
.pl-group h2 { font-size: var(--s2); padding-bottom: .4rem; border-bottom: 2px solid var(--ink); margin-bottom: .25rem; }
.pl-group dl { margin: 0; }
.pl-group dl > div { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--rose-line); }
.pl-group dt { flex: 1; }
.pl-group dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-note { color: var(--muted); font-size: var(--s-1); max-width: 70ch; margin-top: 1rem; }

/* upcoming holiday closures under the hours table */
.closures { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: calc(var(--r) * .6); background: var(--rose); max-width: 26rem; }
.band-rose .closures { background: var(--paper); }
.closures p { margin: 0 0 .4rem; font-weight: 600; font-size: var(--s-1); }
.closures ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--s-1); }
.closures li span { display: block; font-weight: 600; color: var(--red); }
.closures li span::first-letter { text-transform: uppercase; }