/* Greek Mansion decor layer - chalk-board illustrations from the brand boards, cut into
   transparent sprites (scripts/decor/extract.py) and placed per page/section by gm-decor.js
   from decor/gm-decor.json.

   Every decorated section gets one .gmd-layer as its last child. The section becomes an
   isolated stacking context, so the layer (z-index -1) paints above the section's own
   background and texture but below all of its content. Line-art sprites are masks tinted
   per surface: navy on light sections, white on dark ones, gold for accents.

   Device tiers: phone < 768px, tablet 768-1023px, desktop 1024px+. The admin's switches arrive
   as gmd-x-<device> classes (off on that device) and gmd-no-<feature>-<device> flags on <html>. */

/* ---- tiers & switches ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  :root { --gmd-pat-k: var(--gmd-pk-phone, 1); --gmd-art-k: var(--gmd-ak-phone, 1); }
  .gmd-x-phone { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --gmd-pat-k: var(--gmd-pk-tablet, 1); --gmd-art-k: var(--gmd-ak-tablet, 1); }
  .gmd-x-tablet { display: none !important; }
}
@media (min-width: 1024px) {
  :root { --gmd-pat-k: var(--gmd-pk-desktop, 1); --gmd-art-k: var(--gmd-ak-desktop, 1); }
  .gmd-x-desktop { display: none !important; }
}

.gmd-host {
  position: relative;
  isolation: isolate;
}

.gmd-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* It follows the section's content, so sibling utilities (space-y, divide-y) must not move it. */
  margin: 0 !important;
  border: 0 !important;
}
/* Off screen, a section's decor costs nothing: the browser skips painting and layering it until
   the section comes near. */
.gmd-layer { content-visibility: auto; contain-intrinsic-size: auto 100%; }
/* clip, not hidden: hidden would make the layer a scroll container and pinned drawings
   (position: sticky) inside it would stop sticking. */
@supports (overflow: clip) {
  .gmd-layer { overflow: clip; }
}
/* Photo heroes: above the photograph and its shading, below the lettering (z-10/z-20). */
.gmd-layer--over { z-index: 5; }

/* ---- background pattern -----------------------------------------------------------------
   Sketch style: a white silhouette tile used as a mask and tinted (navy on light sections,
   white on dark ones). Colour style: the same layout drawn in colour, one tile for light and
   one for dark sections. Tile and size follow the device tier. */
.gmd-pat {
  --gmd-tile: url("img/t-pattern-d.webp");
  --gmd-tile-light: url("img/t-pattern-d-light.webp");
  --gmd-tile-dark: url("img/t-pattern-d-dark.webp");
  --gmd-tile-size: 840px;
  position: absolute;
  inset: -140px 0;
  background-color: var(--gmd-pat-tint, #1E2A78);
  opacity: 0;
  -webkit-mask: var(--gmd-tile) 0 0 / var(--gmd-tile-size) var(--gmd-tile-size) repeat;
  mask: var(--gmd-tile) 0 0 / var(--gmd-tile-size) var(--gmd-tile-size) repeat;
  translate: 0 var(--py, 0px);
  transition: opacity 1.8s ease;
}
.gmd-seen > .gmd-layer > .gmd-pat { opacity: calc(var(--gmd-pat-o, .05) * var(--gmd-pat-k, 1) * var(--gmd-pat-ck, 1)); }
.gmd-pat--dark { --gmd-pat-tint: #fff; --gmd-pat-o: .055; }
.gmd-pat--light { --gmd-pat-tint: #1E2A78; --gmd-pat-o: .052; }
.gmd-pat--soft { --gmd-pat-o: .035; }
@media (max-width: 1023.98px) {
  /* Phones and tablets: fewer, smaller motifs - and a little stronger, so the texture still
     reads on a small bright screen. */
  .gmd-pat {
    --gmd-tile: url("img/t-pattern-m.webp");
    --gmd-tile-light: url("img/t-pattern-m-light.webp");
    --gmd-tile-dark: url("img/t-pattern-m-dark.webp");
    --gmd-tile-size: 440px;
  }
  .gmd-pat--light { --gmd-pat-o: .072; }
  .gmd-pat--dark { --gmd-pat-o: .078; }
  .gmd-pat--soft { --gmd-pat-o: .055; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .gmd-pat { --gmd-tile-size: 560px; }
  .gmd-pat--light { --gmd-pat-o: .064; }
  .gmd-pat--dark { --gmd-pat-o: .07; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .gmd-pat { --gmd-tile-size: 720px; }
}

/* ---- Greek-key bands ------------------------------------------------------------------- */
.gmd-key {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--h, 16px);
  background-color: var(--tint, #C9A227);
  opacity: var(--o, .5);
  -webkit-mask: url("img/t-meander.webp") 0 50% / auto 100% repeat-x;
  mask: url("img/t-meander.webp") 0 50% / auto 100% repeat-x;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 2.2s cubic-bezier(.65, .05, .36, 1) .2s;
}
.gmd-seen > .gmd-layer > .gmd-key { clip-path: inset(0 0 0 0); }
@media (max-width: 767.98px) { .gmd-key { height: calc(var(--h, 16px) * .75); } }

/* ---- sprites ----------------------------------------------------------------------------
   The box carries position, parallax (translate), scroll tilt (rotate) and the entrance
   (transform / clip-path); the picture itself is ::after, which carries the idle motion. Each
   motion has its own property, so none of them can cancel another. */
.gmd-s,
.gmd-track {
  --w: var(--dw);
  --l: var(--dl, auto); --t: var(--dt, auto); --r: var(--dr, auto); --b: var(--db, auto);
  --rot: var(--drot, 0deg); --o: var(--do, .1);
}
@media (max-width: 767.98px) {
  .gmd-s, .gmd-track { --w: var(--mw); --l: var(--ml, auto); --t: var(--mt, auto); --r: var(--mr, auto); --b: var(--mb, auto); --rot: var(--mrot, 0deg); --o: var(--mo, .1); }
  .gmd-no-m { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .gmd-s, .gmd-track { --w: calc(var(--mw) * 1.4); --l: var(--ml, auto); --t: var(--mt, auto); --r: var(--mr, auto); --b: var(--mb, auto); --rot: var(--mrot, 0deg); --o: var(--mo, .1); }
  .gmd-no-m { display: none !important; }
}
@media (min-width: 1024px) {
  .gmd-s, .gmd-track { --w: calc(var(--dw) * var(--k, 1)); }
  .gmd-no-d { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .gmd-s, .gmd-track { --k: .78; } }
@media (min-width: 1680px) { .gmd-s, .gmd-track { --k: 1.12; } }

.gmd-s {
  position: absolute;
  display: block;
  width: var(--w);
  aspect-ratio: var(--ar);
  left: var(--l);
  top: var(--t);
  right: var(--r);
  bottom: var(--b);
  rotate: calc(var(--rot) + var(--sr, 0deg));
  translate: var(--px, 0px) var(--py, 0px);
  opacity: 0;
}
/* Not loaded yet: nothing shows (the loader attaches the picture, then the entrance can run). */
.gmd-wait, .gmd-wait .gmd-s { visibility: hidden !important; }
.gmd-s::after { content: ""; position: absolute; inset: 0; }
.gmd-m::after {
  background-color: var(--tint, #1E2A78);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.gmd-c::after,
.gmd-p::after { background: var(--src) center / contain no-repeat; }
.gmd-p::after { filter: drop-shadow(0 14px 18px rgba(17, 25, 54, .18)); }
.gmd-s.is-in { opacity: min(1, calc(var(--o) * var(--gmd-art-k, 1) * var(--ok, 1))); }

/* Entrances: line drawings sketch themselves in (left to right, every third bottom to top);
   coloured chalk and photographs rise and settle. */
.gmd-m {
  clip-path: inset(0 100% 0 0);
  transition: opacity .9s ease var(--delay, 0s), clip-path 2s cubic-bezier(.65, .05, .36, 1) var(--delay, 0s);
}
.gmd-m.gmd-up { clip-path: inset(100% 0 0 0); }
.gmd-m.is-in { clip-path: inset(-4% -4% -4% -4%); }
.gmd-c,
.gmd-p {
  transform: translateY(30px) scale(.9);
  transition: opacity 1.2s ease var(--delay, 0s), transform 1.7s cubic-bezier(.2, .75, .2, 1) var(--delay, 0s);
}
.gmd-c.is-in,
.gmd-p.is-in { transform: none; }

/* Idle motion - slow enough to read as breathing, never as a widget. */
.gmd-a-sway::after { transform-origin: 50% 100%; animation: gmd-sway 9s ease-in-out var(--idle-delay, 0s) infinite alternate; }
.gmd-a-bob::after { animation: gmd-bob 7s ease-in-out var(--idle-delay, 0s) infinite alternate; }
.gmd-a-spin::after { animation: gmd-spin 120s linear var(--idle-delay, 0s) infinite; }
.gmd-a-drift::after { animation: gmd-drift 16s ease-in-out var(--idle-delay, 0s) infinite alternate; }
.gmd-a-sail::after { transform-origin: 50% 90%; animation: gmd-sail 5s ease-in-out var(--idle-delay, 0s) infinite alternate; }
/* Idle motion runs only for sections on screen, and holds still while the page is scrolling. */
.gmd-host:not(.gmd-vis) .gmd-s::after,
.gmd-host.gmd-scrolling .gmd-s::after { animation-play-state: paused; }
@keyframes gmd-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes gmd-bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes gmd-spin { to { transform: rotate(360deg); } }
@keyframes gmd-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(28px, -14px); } 100% { transform: translate(60px, 4px); } }
@keyframes gmd-sail { from { transform: rotate(-4deg) translateY(-3px); } to { transform: rotate(3deg) translateY(4px); } }


/* ---- parallax on the compositor (scroll-driven animations) ------------------------------
   Depth without any script work while scrolling: each piece's own position in the viewport
   drives the animation. --sp is its speed (+ lags behind, - runs ahead), --spin its tilt. */
@supports (animation-timeline: view()) {
  .gmd-par {
    animation: gmd-par linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes gmd-par {
    from { translate: var(--px, 0px) calc(var(--sp) * calc(var(--spr, 450px) * -1)); rotate: calc(var(--rot, 0deg) - var(--spin, 0) * 450deg); }
    to   { translate: var(--px, 0px) calc(var(--sp) * var(--spr, 450px)); rotate: calc(var(--rot, 0deg) + var(--spin, 0) * 450deg); }
  }
  html.gmd-reduced .gmd-par { animation: none; }
}
@media (max-width: 767.98px) { html.gmd-no-parallax-phone .gmd-par { animation: none; } }
@media (min-width: 768px) and (max-width: 1023.98px) { html.gmd-no-parallax-tablet .gmd-par { animation: none; } }
@media (min-width: 1024px) { html.gmd-no-parallax-desktop .gmd-par { animation: none; } }

/* ---- phones and tablets: lighter on the graphics chip ----------------------------------
   The left-to-right sketch wipe (clip-path) repaints large masked pictures while the page moves;
   on touch screens drawings fade and rise instead - same feel, compositor-only. No photo shadows. */
@media (max-width: 1023.98px) {
  .gmd-m, .gmd-m.gmd-up {
    clip-path: none;
    transform: translateY(24px) scale(.95);
    transition: opacity 1s ease var(--delay, 0s), transform 1.5s cubic-bezier(.2, .75, .2, 1) var(--delay, 0s);
  }
  .gmd-m.is-in { clip-path: none; transform: none; }
  .gmd-p::after { filter: none; }
  /* The pattern is as big as its section: kept still on touch screens, it stays part of the
     section's own paint instead of becoming a huge moving layer. */
  .gmd-pat.gmd-par { animation: none; }
  .gmd-key { clip-path: none; opacity: 0; transition: opacity 1.6s ease .2s; }
  .gmd-seen > .gmd-layer > .gmd-key { clip-path: none; opacity: var(--o, .5); }
}

/* ---- pinned drawings: a track spans the section, the drawing sticks inside it ----------- */
.gmd-track {
  position: absolute;
  width: var(--w);
  left: var(--l);
  right: var(--r);
  top: var(--t, 0px);
  bottom: var(--b, 0px);
}
.gmd-track > .gmd-s {
  position: sticky;
  top: var(--pin, 140px);
  left: auto; right: auto; bottom: auto;
  width: 100%;
}

/* ---- olive vine: page-scroll progress on wide screens ------------------------------------ */
#gmd-vine {
  position: fixed;
  top: 112px;
  bottom: 136px;
  right: 14px;
  width: 44px;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
#gmd-vine.is-on { opacity: 1; }
#gmd-vine svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#gmd-vine .gmd-vine-track { stroke: #C9A227; stroke-opacity: .2; }
#gmd-vine .gmd-vine-stem { stroke: #C9A227; stroke-opacity: .75; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.gmd-leaf {
  position: absolute;
  width: 46px;
  aspect-ratio: 170 / 95;
  background-color: #B8922A;
  -webkit-mask: url("img/m-olive-sprig.webp") center / contain no-repeat;
  mask: url("img/m-olive-sprig.webp") center / contain no-repeat;
  opacity: 0;
  scale: .3;
  transition: opacity .7s ease, scale .9s cubic-bezier(.2, 1.4, .4, 1);
}
.gmd-leaf.on { opacity: .62; scale: 1; }
@media (max-width: 1279.98px) { #gmd-vine { display: none; } }

/* ---- Greek-key progress under the header (phones and tablets) ----------------------------- */
#gmd-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 80px;
  height: 7px;
  z-index: 41;
  pointer-events: none;
  background-color: #C9A227;
  -webkit-mask: url("img/t-meander.webp") 0 50% / auto 100% repeat-x;
  mask: url("img/t-meander.webp") 0 50% / auto 100% repeat-x;
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
  opacity: 0;
  transition: opacity .5s ease;
}
#gmd-progress.is-on { opacity: .85; }
@media (min-width: 1024px) { #gmd-progress { display: none; } }

/* ---- menu rail: a chalk sketch of the category you are reading (desktop) ------------------ */
#gmd-rail {
  position: fixed;
  top: 50%;
  left: var(--rail-l, 16px);
  width: var(--rail-w, 180px);
  z-index: 25;
  pointer-events: none;
  translate: 0 -40%;
  opacity: 0;
  transition: opacity .6s ease;
  text-align: center;
  color: #1E2A78;
}
#gmd-rail.is-on { opacity: 1; }
.gmd-rail-slot { position: relative; height: calc(var(--rail-w, 180px) * .78); }
.gmd-rail-art,
.gmd-badge-art {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  background-color: #1E2A78;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  opacity: 0;
  rotate: 8deg;
  scale: .86;
  translate: 0 10px;
  transition: opacity .7s ease, rotate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1);
}
.gmd-rail-art.on { opacity: .3; rotate: -3deg; scale: 1; translate: 0 0; }
.gmd-rail-art.off, .gmd-badge-art.off { opacity: 0; rotate: -12deg; scale: .9; translate: 0 -10px; }
.gmd-rail-no {
  display: block;
  margin-top: 14px;
  font-family: var(--font-norwester, Poppins), "Arial Narrow", sans-serif;
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(201, 162, 39, .9);
}
.gmd-rail-name {
  display: block;
  margin-top: 4px;
  font-family: "Greek Mansion Handwriting", var(--font-poppins), cursive;
  font-size: 22px;
  line-height: 1.1;
  color: rgba(30, 42, 120, .55);
}
.gmd-rail-line {
  display: block;
  width: 64px;
  height: 10px;
  margin: 8px auto 0;
  background-color: rgba(201, 162, 39, .7);
  -webkit-mask: url("img/t-meander.webp") 0 50% / auto 100% repeat-x;
  mask: url("img/t-meander.webp") 0 50% / auto 100% repeat-x;
}
@media (max-width: 1279.98px) { #gmd-rail { display: none; } }

/* ---- phones / tablets: the category's dish at the start of the sticky category bar ------- */
#gmd-badge {
  position: fixed;
  top: 80px;
  left: 0;
  width: 58px;
  height: var(--bar-h, 48px);
  z-index: 31;
  pointer-events: none;
  background: linear-gradient(90deg, #F8F5ED 72%, rgba(248, 245, 237, 0));
  opacity: 0;
  translate: -12px 0;
  transition: opacity .4s ease, translate .5s cubic-bezier(.2, .7, .2, 1);
}
#gmd-badge.is-on { opacity: 1; translate: 0 0; }
.gmd-badge-art { inset: 6px 14px 6px 8px; width: auto; height: auto; }
.gmd-badge-art.on { opacity: .75; rotate: -4deg; scale: 1; translate: 0 0; }
@media (max-width: 1023.98px) {
  html.gmd-badge-on #full-menu,
  html.gmd-badge-on #gm-live-catering > nav { padding-left: 58px; transition: padding-left .4s ease; }
}
@media (min-width: 1024px) { #gmd-badge { display: none; } }

/* The category you are in, marked in the sticky bar. */
#full-menu a.gmd-active,
#gm-live-catering > nav a.gmd-active { color: #1E2A78; box-shadow: inset 0 -2px 0 #C9A227; padding-bottom: 4px; }

/* ---- smooth scrolling: the script moves the page, so CSS smoothing must stand aside ------- */
html.gmd-gliding { scroll-behavior: auto !important; }


/* ---- colour style (per device, chosen in the admin) ------------------------------------------
   Line drawings are shown in their real colours instead of as a tinted silhouette, the pattern
   switches to its colour tiles, and both get more presence so the colours actually read. */
@media (max-width: 767.98px) {
  html.gmd-colour-phone .gmd-s::after { -webkit-mask: none; mask: none; background: var(--srcc, var(--src)) center / contain no-repeat; }
  html.gmd-colour-phone .gmd-s { aspect-ratio: var(--arc, var(--ar)); }
  html.gmd-colour-phone :is(.gmd-s, .gmd-track) { --ok: var(--ckm, 1); }
  html.gmd-colour-phone .gmd-pat { -webkit-mask: none; mask: none; background: var(--gmd-tile-light) 0 0 / var(--gmd-tile-size) var(--gmd-tile-size) repeat; --gmd-pat-ck: 2.4; }
  html.gmd-colour-phone .gmd-pat--dark { background-image: var(--gmd-tile-dark); --gmd-pat-ck: 2; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  html.gmd-colour-tablet .gmd-s::after { -webkit-mask: none; mask: none; background: var(--srcc, var(--src)) center / contain no-repeat; }
  html.gmd-colour-tablet .gmd-s { aspect-ratio: var(--arc, var(--ar)); }
  html.gmd-colour-tablet :is(.gmd-s, .gmd-track) { --ok: var(--ckm, 1); }
  html.gmd-colour-tablet .gmd-pat { -webkit-mask: none; mask: none; background: var(--gmd-tile-light) 0 0 / var(--gmd-tile-size) var(--gmd-tile-size) repeat; --gmd-pat-ck: 2.4; }
  html.gmd-colour-tablet .gmd-pat--dark { background-image: var(--gmd-tile-dark); --gmd-pat-ck: 2; }
}
@media (min-width: 1024px) {
  html.gmd-colour-desktop .gmd-s::after { -webkit-mask: none; mask: none; background: var(--srcc, var(--src)) center / contain no-repeat; }
  html.gmd-colour-desktop .gmd-s { aspect-ratio: var(--arc, var(--ar)); }
  html.gmd-colour-desktop :is(.gmd-s, .gmd-track) { --ok: var(--ckd, 1); }
  html.gmd-colour-desktop .gmd-pat { -webkit-mask: none; mask: none; background: var(--gmd-tile-light) 0 0 / var(--gmd-tile-size) var(--gmd-tile-size) repeat; --gmd-pat-ck: 2.4; }
  html.gmd-colour-desktop .gmd-pat--dark { background-image: var(--gmd-tile-dark); --gmd-pat-ck: 2; }
}


/* ---- black sketch style (per device, chosen in the admin) -------------------------------------
   Every line drawing and the pattern in black ink: as ink on light sections, as a deeper etching
   on dark ones (given more presence there so it still reads). Coloured chalk pieces become black
   line art too; photographs stay photographs. */
@media (max-width: 767.98px) {
  html.gmd-black-phone :is(.gmd-s, .gmd-track) { --tint: #121212 !important; }
  html.gmd-black-phone :is(.gmd-s, .gmd-track).gmd-dk { --tint: #05060c !important; --ok: 2.4; }
  html.gmd-black-phone .gmd-c::after { background: #121212; -webkit-mask: var(--srcm) center / contain no-repeat; mask: var(--srcm) center / contain no-repeat; }
  html.gmd-black-phone .gmd-dk .gmd-c::after, html.gmd-black-phone .gmd-c.gmd-dk::after { background: #05060c; }
  html.gmd-black-phone .gmd-pat--light { --gmd-pat-tint: #121212; }
  html.gmd-black-phone .gmd-pat--dark { --gmd-pat-tint: #05060c; --gmd-pat-ck: 2.2; }
  html.gmd-black-phone :is(.gmd-rail-art, .gmd-badge-art) { background-color: #121212; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  html.gmd-black-tablet :is(.gmd-s, .gmd-track) { --tint: #121212 !important; }
  html.gmd-black-tablet :is(.gmd-s, .gmd-track).gmd-dk { --tint: #05060c !important; --ok: 2.4; }
  html.gmd-black-tablet .gmd-c::after { background: #121212; -webkit-mask: var(--srcm) center / contain no-repeat; mask: var(--srcm) center / contain no-repeat; }
  html.gmd-black-tablet .gmd-dk .gmd-c::after, html.gmd-black-tablet .gmd-c.gmd-dk::after { background: #05060c; }
  html.gmd-black-tablet .gmd-pat--light { --gmd-pat-tint: #121212; }
  html.gmd-black-tablet .gmd-pat--dark { --gmd-pat-tint: #05060c; --gmd-pat-ck: 2.2; }
  html.gmd-black-tablet :is(.gmd-rail-art, .gmd-badge-art) { background-color: #121212; }
}
@media (min-width: 1024px) {
  html.gmd-black-desktop :is(.gmd-s, .gmd-track) { --tint: #121212 !important; }
  html.gmd-black-desktop :is(.gmd-s, .gmd-track).gmd-dk { --tint: #05060c !important; --ok: 2.4; }
  html.gmd-black-desktop .gmd-c::after { background: #121212; -webkit-mask: var(--srcm) center / contain no-repeat; mask: var(--srcm) center / contain no-repeat; }
  html.gmd-black-desktop .gmd-dk .gmd-c::after, html.gmd-black-desktop .gmd-c.gmd-dk::after { background: #05060c; }
  html.gmd-black-desktop .gmd-pat--light { --gmd-pat-tint: #121212; }
  html.gmd-black-desktop .gmd-pat--dark { --gmd-pat-tint: #05060c; --gmd-pat-ck: 2.2; }
  html.gmd-black-desktop :is(.gmd-rail-art, .gmd-badge-art) { background-color: #121212; }
}

/* ---- switches from the admin (per device) -------------------------------------------------- */
@media (max-width: 767.98px) {
  html.gmd-no-reveal-phone .gmd-s { clip-path: none !important; transform: none !important; transition: none !important; opacity: min(1, calc(var(--o) * var(--gmd-art-k, 1) * var(--ok, 1))); }
  html.gmd-no-reveal-phone .gmd-pat { transition: none; opacity: calc(var(--gmd-pat-o, .05) * var(--gmd-pat-k, 1) * var(--gmd-pat-ck, 1)); }
  html.gmd-no-reveal-phone .gmd-key { transition: none; clip-path: none; }
  html.gmd-no-idle-phone .gmd-s::after { animation: none !important; }
  html.gmd-no-reveal-phone :is(.gmd-leaf, .gmd-rail-art, .gmd-badge-art, #gmd-badge, #gmd-progress, #gmd-vine, #gmd-rail) { transition: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  html.gmd-no-reveal-tablet .gmd-s { clip-path: none !important; transform: none !important; transition: none !important; opacity: min(1, calc(var(--o) * var(--gmd-art-k, 1) * var(--ok, 1))); }
  html.gmd-no-reveal-tablet .gmd-pat { transition: none; opacity: calc(var(--gmd-pat-o, .05) * var(--gmd-pat-k, 1) * var(--gmd-pat-ck, 1)); }
  html.gmd-no-reveal-tablet .gmd-key { transition: none; clip-path: none; }
  html.gmd-no-idle-tablet .gmd-s::after { animation: none !important; }
  html.gmd-no-reveal-tablet :is(.gmd-leaf, .gmd-rail-art, .gmd-badge-art, #gmd-badge, #gmd-progress, #gmd-vine, #gmd-rail) { transition: none !important; }
}
@media (min-width: 1024px) {
  html.gmd-no-reveal-desktop .gmd-s { clip-path: none !important; transform: none !important; transition: none !important; opacity: min(1, calc(var(--o) * var(--gmd-art-k, 1) * var(--ok, 1))); }
  html.gmd-no-reveal-desktop .gmd-pat { transition: none; opacity: calc(var(--gmd-pat-o, .05) * var(--gmd-pat-k, 1) * var(--gmd-pat-ck, 1)); }
  html.gmd-no-reveal-desktop .gmd-key { transition: none; clip-path: none; }
  html.gmd-no-idle-desktop .gmd-s::after { animation: none !important; }
  html.gmd-no-reveal-desktop :is(.gmd-leaf, .gmd-rail-art, .gmd-badge-art, #gmd-badge, #gmd-progress, #gmd-vine, #gmd-rail) { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .gmd-s, .gmd-pat, .gmd-key, .gmd-leaf, .gmd-rail-art, .gmd-badge-art { transition: none !important; }
  .gmd-s { clip-path: none !important; transform: none !important; }
  .gmd-s::after { animation: none !important; }
}
@media print {
  .gmd-layer, #gmd-vine, #gmd-rail, #gmd-progress, #gmd-badge { display: none !important; }
}