/* ============================================================
   Design system — loaded after site.css.
   Every rule here is driven by a class the admin sets on <body>
   (st-<option>-<value>) or by a per-section class the editor sets.
   Nothing in here is edited to re-skin a site.
   ============================================================ */

:root {
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  --shadow-lift: 0 10px 30px rgba(0,0,0,.10);
  --section-pad: clamp(2.5rem, 6vw, 4.5rem);
  --h1: clamp(2rem, 6vw, 3.1rem);
  --h2: clamp(1.5rem, 4vw, 2.2rem);
  --h3: 1.25rem;
  --body-size: 1.0625rem;
  --lead: 1.65;
  --title-space: 0;
  --title-transform: none;
  --title-style: normal;
}

body { font-size: var(--body-size); line-height: var(--lead); }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h1, h2, h3, h4 {
  letter-spacing: var(--title-space);
  text-transform: var(--title-transform);
  font-style: var(--title-style);
}
.pad { padding-block: var(--section-pad); }

/* ── Type scale ────────────────────────────────────────────── */
.st-type-scale-compact {
  --h1: clamp(1.7rem, 4.4vw, 2.4rem); --h2: clamp(1.3rem, 3vw, 1.7rem);
  --h3: 1.1rem; --body-size: 1rem; --lead: 1.6;
}
.st-type-scale-grand {
  --h1: clamp(2.4rem, 8vw, 4.4rem); --h2: clamp(1.8rem, 5vw, 2.9rem);
  --h3: 1.4rem; --body-size: 1.125rem; --lead: 1.7;
}

/* ── Rhythm ────────────────────────────────────────────────── */
.st-rhythm-tight { --section-pad: clamp(1.5rem, 4vw, 2.75rem); }
.st-rhythm-airy  { --section-pad: clamp(3.5rem, 9vw, 7rem); }

/* ── Corners ───────────────────────────────────────────────── */
.st-corners-sharp { --radius: 0px; }
.st-corners-soft  { --radius: 10px; }
.st-corners-round { --radius: 20px; }

/* ── Depth ─────────────────────────────────────────────────── */
.st-depth-flat   { --shadow: none; --shadow-lift: none; }
.st-depth-soft   { --shadow: 0 1px 2px rgba(0,0,0,.05); --shadow-lift: 0 10px 30px rgba(0,0,0,.10); }
.st-depth-lifted { --shadow: 0 4px 14px rgba(0,0,0,.10); --shadow-lift: 0 18px 44px rgba(0,0,0,.22); }
.card { box-shadow: var(--shadow); }
.card:hover { box-shadow: var(--shadow-lift); }
.st-depth-flat .card:hover { transform: none; }

/* ── Buttons ───────────────────────────────────────────────── */
.st-btn-outline .btn {
  background: transparent; color: var(--c-primary); border-width: 2px;
}
.st-btn-outline .btn:hover { background: var(--c-primary); color: var(--c-onprim); opacity: 1; }
.st-btn-pill .btn { border-radius: 999px; padding-inline: 1.7rem; }
.st-btn-link .btn {
  background: none; border: 0; border-bottom: 2px solid currentColor;
  border-radius: 0; padding: .2rem 0; color: var(--c-primary);
}
.st-btn-link .btn:hover { border-bottom-color: transparent; }
.st-btn-outline .hero:not(.hero-plain) .btn,
.st-btn-link .hero:not(.hero-plain) .btn { color: #fff; border-color: currentColor; background: none; }

/* ── Cards ─────────────────────────────────────────────────── */
.st-card-flat .card { border-color: transparent; background: none; }
.st-card-flat .card-body { padding-inline: 0; }
.st-card-elevated .card { border-color: transparent; box-shadow: var(--shadow-lift); }

.st-card-overlay .card { position: relative; border: 0; background: var(--c-surface); }
.st-card-overlay .card-media img { aspect-ratio: 3 / 4; }
.st-card-overlay .card:has(.card-media) .card-body {
  position: absolute; inset: auto 0 0 0; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  padding-top: 3.5rem;
}
.st-card-overlay .card:has(.card-media) .card-body .muted,
.st-card-overlay .card:has(.card-media) .card-body .date { color: rgba(255,255,255,.82); }

/* ── Image shape ───────────────────────────────────────────── */
.st-img-square  .card-media img, .st-img-square  .split-media img,
.st-img-square  .grid-gallery a { border-radius: 0; }
.st-img-rounded .card-media img, .st-img-rounded .split-media img { border-radius: 0; }
.st-img-rounded .card { border-radius: var(--radius); }
.st-img-arch .split-media img, .st-img-arch .grid-gallery a, .st-img-arch .card-media img {
  border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% 0 0;
}
.st-img-arch .single-cover img { border-radius: 0 0 var(--radius) var(--radius); }
.st-img-circle .card-media img { aspect-ratio: 1; border-radius: 50%; width: 72%; margin: 1rem auto 0; }
.st-img-circle .split-media img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* ── Header variants ───────────────────────────────────────── */
.st-head-over .site-head {
  position: absolute; inset: 0 0 auto 0; background: transparent;
  border-bottom-color: transparent; backdrop-filter: none;
}
.st-head-over .site-head, .st-head-over .site-head a { color: #fff; }
.st-head-over .search-panel { background: rgba(0,0,0,.55); backdrop-filter: blur(10px); border-top-color: rgba(255,255,255,.15); }
.st-head-over .search-form input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.st-head-over .search-form input::placeholder { color: rgba(255,255,255,.7); }
.st-head-over main > .hero:first-child { padding-top: 68px; }
.st-head-over .site-head.scrolled {
  position: fixed; background: var(--c-header); border-bottom-color: var(--c-border);
  backdrop-filter: blur(10px); animation: drop .25s ease;
}
.st-head-over .site-head.scrolled, .st-head-over .site-head.scrolled a { color: var(--c-text); }
@keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }

@media (min-width: 900px) {
  .st-head-centered .head-row { flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
  .st-head-centered .brand { margin: 0; flex-basis: 100%; justify-content: center; padding-top: .6rem; }
  .st-head-centered .nav { justify-content: center; width: 100%; }
  .st-head-centered .nav-list { margin-inline: auto; }
}

/* ── Heading treatments ────────────────────────────────────── */
.st-titles-caps   { --title-space: .12em; --title-transform: uppercase; }
.st-titles-caps h1, .st-titles-caps h2 { font-size: calc(var(--h1) * .8); }
.st-titles-caps h2 { font-size: calc(var(--h2) * .82); }
.st-titles-italic { --title-style: italic; }

/* ── Per-section options set in the block editor ───────────── */
.sec--bg-tint    { background: color-mix(in srgb, var(--c-accent) 8%, var(--c-bg)); }
.sec--bg-surface { background: var(--c-surface); }
.sec--bg-dark    { background: #0d0d0d; color: #f2efe9; }
.sec--bg-dark .muted, .sec--bg-dark .date { color: #a39c90; }
.sec--bg-dark h1, .sec--bg-dark h2, .sec--bg-dark h3 { color: #fff; }
.sec--bg-accent  { background: var(--c-primary); color: var(--c-onprim); }

/* A section painted in colours of its own. Two of them: the block writes
   both as custom properties on its own element and the theme picks, so a
   white band on the light theme is a dark one at night instead of a hole
   burnt in the page. A block given only one colour uses it for both —
   which is what a single colour used to mean. */
.sec--bg-own { background: var(--sec-bg, transparent); }
:root[data-theme="dark"] .sec--bg-own {
  background: var(--sec-bg-dark, var(--sec-bg, transparent));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sec--bg-own {
    background: var(--sec-bg-dark, var(--sec-bg, transparent));
  }
}
.sec--bg-accent h2, .sec--bg-accent h3, .sec--bg-accent .muted { color: inherit; }
.sec--bg-accent .btn { background: var(--c-onprim); color: var(--c-primary); border-color: var(--c-onprim); }

.sec--pad-none { padding-block: 0; }
.sec--pad-sm   { padding-block: calc(var(--section-pad) * .45); }
.sec--pad-lg   { padding-block: calc(var(--section-pad) * 1.6); }

/* Centred is what a block does unless it is told otherwise. Centring the
   text is only half of it: a reading column, an intro or a grid that has
   fewer items than it has room for all have to be drawn to the middle as
   well, or the section reads as left-aligned however the text is set. */
.sec--align-center { text-align: center; }
.sec--align-center .prose,
.sec--align-center .section-intro,
.sec--align-center .hero-text,
.sec--align-center .contact-line,
.sec--align-center .timeline,
.sec--align-center .faq,
.sec--align-center .schedule,
.sec--align-center form { margin-inline: auto; }
.sec--align-center .section-head { justify-content: center; }
.sec--align-center .schedule th, .sec--align-center .schedule td { text-align: center; }
.sec--align-center .schedule td.num { text-align: center; }
/* Three cards in a row that fits four sit left of centre otherwise. */
.sec--align-center .grid-cards,
.sec--align-center .grid-gallery,
.sec--align-center .people { justify-content: center; }
.sec--align-center .socials,
.sec--align-center .split { justify-content: center; }
/* A row laid out with flex ignores text-align, so it is told separately. */
.sec--align-center .link-name,
.sec--align-center .stats,
.sec--align-center .foot-row { justify-content: center; }
/* A bulleted list centred as a block of text but still reading as a list:
   the markers go inside, so the lines centre instead of hanging off an
   invisible left edge. */
.sec--align-center .prose ul,
.sec--align-center .prose ol { list-style-position: inside; padding-left: 0; }
.sec--align-center .prose blockquote { border-left: 0; padding-left: 0; }

/* The pages the site generates for itself — an archive, a search, one
   news item — are not built from blocks, so they carry no alignment
   choice of their own. They follow the same rule by hand: the heading
   and the line above it are centred, while the body of an article keeps
   its left edge, because a paragraph is read rather than looked at. */
main > section.wrap > .section-title,
main > section.wrap > .muted,
.single > header,
.single > .pad { text-align: center; }
.single > header .date { letter-spacing: .08em; }

/* Left is now a deliberate choice, and it means the text — the column it
   is set in still sits in the middle of the page rather than against the
   edge of a container twice its width. */
.sec--align-left { text-align: left; }
.sec--align-left .prose { margin-inline: auto; }

.sec--w-narrow .wrap { width: min(100% - 2rem, 720px); }
.sec--w-wide   .wrap { width: min(100% - 2rem, 1400px); }
.sec--w-full   .wrap { width: 100%; }
.sec--w-full .grid-gallery { gap: 2px; }

/* Cards per-block column count */
.cards-2 .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.cards-4 .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cards-list .grid-cards { grid-template-columns: 1fr; }
.cards-list .card-link { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 1.25rem; }
.cards-list .card-media img { aspect-ratio: 1; height: 100%; }
@media (max-width: 600px) {
  .cards-list .card-link { grid-template-columns: 1fr; }
  .cards-list .card-media img { aspect-ratio: 16 / 10; }
}

/* Gallery variants */
.gal-mosaic .grid-gallery { grid-auto-rows: 12rem; grid-auto-flow: dense; }
.gal-mosaic .grid-gallery a:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gal-mosaic .grid-gallery img { height: 100%; aspect-ratio: auto; }
.gal-carousel .grid-gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: .5rem;
}
.gal-carousel .grid-gallery a { flex: 0 0 min(78%, 340px); scroll-snap-align: center; }

/* Text block in two columns */
.text-2col .prose { max-width: none; columns: 2; column-gap: 3rem; }
@media (max-width: 700px) { .text-2col .prose { columns: 1; } }

/* Hero overlay strength + text position */
.hero--dim-none::before { display: none; }
.hero { position: relative; }
.hero:not(.hero-plain)::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}
.hero--dim-strong:not(.hero-plain)::before { background: rgba(0,0,0,.62); }
.hero--dim-soft:not(.hero-plain)::before { background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); }
.hero-inner { position: relative; z-index: 1; }
.hero--center { text-align: center; }
.hero--center .hero-text { margin-inline: auto; }
.hero--center .hero-inner { display: grid; justify-items: center; }
.hero--middle { align-items: center; }

/* ── Reveal on scroll ──────────────────────────────────────── */
.st-motion-subtle [data-reveal], .st-motion-full [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.75,.3,1);
}
.st-motion-full [data-reveal] { transform: translateY(34px) scale(.985); }
[data-reveal].shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Extra blocks ──────────────────────────────────────────── */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); text-align: center; }
.stat-n { font-family: var(--font-head); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: var(--c-primary); }
.stat-l { color: var(--c-muted); font-size: .92rem; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-border); }
.timeline li { position: relative; padding: 0 0 1.75rem 1.5rem; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .45em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-accent); border: 2px solid var(--c-bg);
}
.timeline .when { font-family: var(--font-head); color: var(--c-primary); font-size: 1.05rem; }

.faq { border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  cursor: pointer; padding: 1rem .25rem; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 .25rem 1.1rem; color: var(--c-muted); }

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { max-width: 52ch; margin-inline: auto; }

.people { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); text-align: center; }
.people figure { margin: 0; }
.people img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: .75rem; }
.people .role { color: var(--c-muted); font-size: .9rem; }

/* ── Under-construction page ───────────────────────────────── */
.head-bare { position: static; background: none; border-bottom: 0; backdrop-filter: none; }
.head-bare .head-row { justify-content: space-between; }
.holding { display: grid; align-items: center; min-height: calc(100dvh - 200px); }
.holding-empty { padding-block: clamp(3rem, 12vh, 7rem); }
.holding-empty h1 { margin-top: .6em; }
.logo-big {
  height: calc(var(--logo-h, 46px) * 2); width: auto;
  max-width: min(86vw, 720px); object-fit: contain; margin: 0 auto;
}
.holding .center { margin-inline: auto; }

/* The bar the owner sees while the site is closed to visitors. */
.admin-bar {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center;
  padding: .55rem 1rem; font-size: .85rem;
  background: var(--c-accent); color: #141210;
}
.admin-bar a { color: inherit; font-weight: 700; }

/* ── Where the two rules are ───────────────────────────────────
   The red line closing the header and the red line opening the footer
   are the page's own frame, and a picture centred "between the lines"
   has to be centred between those two, not between two guesses at them.
   site.js measures the header and the footer and writes the distance
   here; this calc is the value until it does, and the value for a
   visitor with no JavaScript. It assumes the two bars are the same
   height, which the default footer is. */
:root {
  --rules-gap: calc(100dvh - (var(--head-h) + var(--rule-w, 2px)) * 2);
  /* Kept under its old name: existing pages style the panel with it. */
  --between-rules: var(--rules-gap);
}

/* ── Image-only block ──────────────────────────────────────── */
.image-block { margin: 0; }
/* One box wraps the picture in every layout — a link when the block has
   one, a plain div when it does not — so nothing below has to be written
   twice. Outside the frame it is a pass-through. */
.image-block .image-box { display: block; }
.image-block img { width: 100%; height: auto; border-radius: var(--radius); }
.image-block figcaption { margin-top: .6rem; text-align: center; }

/* Whole image, sized to the screen. Nothing is cropped and nothing is
   stretched; the space left over is painted in the image's own edge
   colour by the section, so there is no visible seam. This is the one
   mode that composes identically on every device. */
.img-screen .image-block img {
  width: 100%; height: 100dvh; max-height: 100dvh;
  object-fit: contain; border-radius: 0; display: block;
}
.img-screen, .img-cover { min-height: 100dvh; }
/* A vector must not be capped here — it should fill like a photo. */
.img-screen .image-block img[src$=".svg"],
.img-cover  .image-block img[src$=".svg"] { max-width: none; }
/* Image fills the screen, cropping what does not fit. 100% rather than
   100vw: 100vw ignores the scrollbar and pushes the page sideways. */
.img-cover .image-block img {
  width: 100%; height: 100dvh; object-fit: cover;
  object-position: var(--focus, center); border-radius: 0;
}

/* A landscape image cropped to a portrait phone screen becomes a zoomed
   sliver. Unless the editor asked for that crop — or supplied a separate
   phone image — show the whole thing on narrow screens instead. */
@media (orientation: portrait) and (max-width: 899px) {
  .img-cover.m-fit .image-block img {
    height: 100dvh; object-fit: contain;
  }
  .img-cover.m-fit .image-block { display: grid; align-content: center; }
}
.img-cover, .img-screen { padding-block: 0; }
.img-cover .wrap, .img-screen .wrap { width: 100%; }

/* At normal size a vector would otherwise stretch edge to edge. */
.img-normal .image-block img[src$=".svg"] { max-width: min(100%, 900px); margin-inline: auto; }

/* The holding page gives the whole viewport to whatever is on it. */
.holding-canvas { min-height: 100dvh; display: grid; align-content: center; }
.holding-canvas .block { width: 100%; }

/* Header and footer rules: colour from the palette (--c-rule), thickness
   from this option. Set as a variable so both edges stay in step. */
:root { --rule-w: 2px; }
.st-rule-none   { --rule-w: 0; }
.st-rule-thin   { --rule-w: 1px; }
.st-rule-normal { --rule-w: 2px; }
.st-rule-thick  { --rule-w: 4px; }

/* How far the footer is pushed clear of the last section. */
:root { --foot-gap: 2.5rem; }
.st-foot-gap-none   { --foot-gap: 0; }
.st-foot-gap-small  { --foot-gap: 1.25rem; }
.st-foot-gap-normal { --foot-gap: 2.5rem; }
.st-foot-gap-large  { --foot-gap: 5rem; }
.st-foot-gap-huge   { --foot-gap: 9rem; }

/* ══ The frame ═════════════════════════════════════════════════
   A panel filling the space between the two rules, and a box of a
   chosen shape centred inside it.

   The size comes from both edges of that space at once. The box is as
   wide as the panel allows and as wide as the panel's *height* allows
   once the shape is applied — whichever runs out first — so one block
   is large on a wide screen and contained on a phone, instead of being
   sized by one dimension and spilling over the other.

   That is also why the picture is given the box's full width and height
   rather than its own: width:auto means the file's pixel size, which is
   how a 1200px photograph ends up as a stamp in the middle of a 2560px
   monitor. The box decides the size; the picture fills it.
   ══════════════════════════════════════════════════════════════ */
.img-frame {
  --frame-air: clamp(.75rem, 2.5vmin, 2rem);
  /* The panel less its own breathing room. */
  --frame-h: calc(var(--rules-gap) - var(--frame-air) * 2);
  min-height: var(--rules-gap);
  display: grid;
  place-items: center;
  padding: var(--frame-air);
}
/* A caption sits inside the panel too, so the box gives up that height. */
.img-frame:has(figcaption) { --frame-h: calc(var(--rules-gap) - var(--frame-air) * 2 - 2.4rem); }
.img-frame > .wrap { width: 100%; display: grid; place-items: center; }

.img-frame .frame-fig {
  --ar: 1/1;          /* the shape, for aspect-ratio */
  --arn: 1;           /* the same shape as a number, for the calc */
  --frame-scale: .9;  /* how much of the space it is allowed to take */
  margin: 0;
  width: calc(var(--frame-scale) * min(100%, var(--frame-h) * var(--arn)));
  max-width: 100%;
}
.img-frame .image-box {
  display: block; width: 100%;
  aspect-ratio: var(--ar);
  border-radius: var(--radius);
  overflow: hidden;
}
.img-frame picture { display: contents; }
.img-frame .frame-fig img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, center);
  border-radius: 0;
}
.img-frame .fit-contain img { object-fit: contain; }
/* A vector has no business being cropped. */
.img-frame .frame-fig img[src$=".svg"] { object-fit: contain; max-width: none; }

.img-frame .edge-line .image-box   { box-shadow: 0 0 0 1px var(--c-border); }
.img-frame .edge-rule .image-box   { box-shadow: 0 0 0 var(--rule-w, 2px) var(--c-rule); }
.img-frame .edge-shadow .image-box { box-shadow: var(--shadow-lift); }

/* ── The whole image between the two rules (no chosen shape) ──
   The older of the two: the picture keeps its own proportions and is
   centred in the same panel. It reads the same measurements, so it is
   centred between the real lines as well. */
.img-fit {
  --frame-air: clamp(.75rem, 2.5vmin, 2rem);
  min-height: var(--rules-gap);
  display: grid;
  place-items: center;
  padding: var(--frame-air);
}
.img-fit > .wrap { width: 100%; display: grid; place-items: center; }
.img-fit .image-block { margin: 0; width: 100%; max-width: 100%; }
/* The box is the whole panel and the picture is drawn to fit inside it,
   so a small file is shown at the size of the space rather than at the
   size it happens to have been saved at — the panel is the frame, the
   picture keeps its own proportions inside it. */
.img-fit .image-box {
  display: block; width: 100%;
  height: calc(var(--rules-gap) - var(--frame-air) * 2);
}
.img-fit .image-block picture { display: contents; }
.img-fit .image-block img {
  width: 100%; height: 100%;
  object-fit: contain; border-radius: 0;
}

/* "Between the two lines" has to mean exactly that: the gap that normally
   holds the footer clear of the last section would sit under the picture
   and throw the centring off by half of itself. */
body:has(.img-fit) .site-foot,
body:has(.img-frame) .site-foot { margin-top: 0; }

/* This picture does not slide into view. The reveal animation starts a
   section 14px low and clears it when it scrolls into frame — but a page
   that is exactly one screen tall never scrolls, so the observer may
   never fire and the picture would sit 14px below centre for good. */
.img-fit[data-reveal], .img-frame[data-reveal] { opacity: 1; transform: none; transition: none; }

/* Neither does anything in the footer. The reveal observer ignores the
   bottom eighth of the window so a section does not flash in while it is
   still half off-screen — but the footer never leaves that strip, so a
   band sitting on the bottom edge would wait for a signal that never
   comes and stay invisible for good. The footer is furniture; it is
   simply there. */
.foot-blocks [data-reveal] { opacity: 1; transform: none; transition: none; }

/* An upright picture on an upright screen is limited by the width, so it
   can only ever fill about half the panel's height and the rest shows as
   air above and below. "Pe telefon: umple spațiul" trades the left and
   right edges for that height — the focus point decides what is kept. */
@media (max-width: 699px) {
  .img-fit.m-crop { padding: 0; }
  .img-fit.m-crop .image-block,
  .img-fit.m-crop .image-box,
  .img-fit.m-crop .image-block picture { width: 100%; }
  .img-fit.m-crop .image-block img {
    width: 100%;
    height: var(--rules-gap);
    max-height: var(--rules-gap);
    object-fit: cover;
    object-position: var(--focus, center);
  }
}