/* incumbent: cloned from Manodo Home Redesign.dc.html. Generated by tools/clone.js. */

/* The brief's own ground, which is what the design was drawn on.
 *
 * Two vocabularies on purpose. The brief's markup reads its own names (--desk,
 * --bord, --papermut); the site's chrome, the shared sections appended under
 * the brief, hover states and focus outlines read the site's names
 * (--accent-ink, --on-accent, --line-2, --well). The first cut of this block
 * carried only the brief's names, and every consumer of the other vocabulary
 * quietly resolved to nothing: hovers that never changed, buttons whose text
 * did not paint, wells with no ground. A palette is only a palette here if
 * BOTH vocabularies resolve, and the site's names are derived from the brief's
 * own values so the two cannot disagree.
 *
 * Deliberately NOT :root-scoped. On a normal page these attributes sit on the
 * html element and nothing changes; on the sampler, one page carries all seven
 * themes at once, each section wrapped in a div bearing its own theme's
 * data-design and data-palette, and custom properties cascade from whatever
 * element defines them. :root would have pinned every theme's colours to the
 * one document. */
[data-design="incumbent"][data-palette="own"] {
  --paper: #F7F4EE;
  --ink: #1C1A17;
  --accent: #A9702E;
  --accent2: #E0BC7C;
  --desk: #EFEAE1;
  --line: #E2DCD1;
  --bord: #C9C1B3;
  --faint: #C0B9AC;
  --strike: #A7A096;
  --mut: #64604F;
  --soft: #57524A;
  --papermut: #BDB6AA;
  --pmut2: #98917F;
  --stone: #E4DCCE;
  --inkline: #34302A;
  --glass: rgba(247,244,238,0.94);
  --scrim: rgba(28,26,23,0.72);
  --paper-2:   color-mix(in srgb, var(--paper) 55%, var(--desk));
  --paper-3:   var(--desk);
  --well:      var(--stone);
  --well-dim:  color-mix(in srgb, var(--stone) 82%, var(--ink));
  --ink-2:     var(--inkline);
  --line-2:    var(--bord);
  --accent-2:  var(--accent2);
  --accent-ink: var(--accent);
  --on-accent: var(--ink);
}

/* The brief's own base rules, which lived in its <helmet> and were otherwise
   lost with it: the desk tone outside the sheet, and plain ink links that turn
   accent on hover. Scoped to the cloned surfaces (the chrome and the brief's
   own unclassed sections); the shared sections keep the site's styling, and
   anything the brief set inline still wins outright. */
:root[data-design="incumbent"] body { background: var(--paper-3); }
[data-design="incumbent"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="incumbent"] :is(header, footer, section:not([class])) a:hover { color: var(--accent); }

/* The same names, driven by whichever of the 24 palettes is chosen, so the
   colour switcher works on cloned markup without touching a single style="". */
[data-design="incumbent"]:not([data-palette="own"]) {
  --accent2: var(--accent-2);
  --desk: var(--paper-3);
  --bord: var(--line-2);
  --papermut: var(--faint);
  --pmut2: var(--strike);
  --inkline: var(--ink-2);
  --glass: color-mix(in srgb, var(--paper) 94%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* style-hover="..." is an authoring attribute no browser implements. These are
   the brief's own hover declarations, moved into rules that actually fire. */
[data-design="incumbent"] .dc-incumbent-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="incumbent"] .dc-incumbent-h1:hover { border-color: var(--ink); color: var(--ink) }
[data-design="incumbent"] .dc-incumbent-h2:hover { background: var(--accent); color: var(--paper) }
[data-design="incumbent"] .dc-incumbent-h3:hover { border-color: var(--ink); color: var(--ink) }
[data-design="incumbent"] .dc-incumbent-h4:hover { border-color: var(--ink); color: var(--ink) }
[data-design="incumbent"] .dc-incumbent-h5:hover { background: var(--accent2) }
[data-design="incumbent"] .dc-incumbent-h6:hover { border-color: var(--ink) }
[data-design="incumbent"] .dc-incumbent-h7:hover { border-color: var(--ink) }
[data-design="incumbent"] .dc-incumbent-h8:hover { background: var(--accent); border-color: var(--accent) }

/* The ambient layer: above the sheet's own ground, below everything on it. */
[data-design="incumbent"] .dc-orn {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: -1;
}
/* An inserted ornament band clips its own overhang so a vine that runs off the
   edge cannot widen the page. */
[data-design="incumbent"] .dc-ins { overflow: hidden; }


/* -- the ambient wash ------------------------------------------------------
   One tile of travel over four minutes, which reads as paper at rest and as
   movement only if you stay with it. Oversized by a tile on each axis so the
   translate never uncovers an edge. */
[data-design="incumbent"] .dc-inc-jaal {
  position: absolute; top: -260px; left: -260px;
  width: calc(100% + 520px); height: calc(100% + 520px); display: block;
  opacity: calc(.05 * var(--pattern-intensity, 1));
  animation: dc-incumbent-wash 260s linear infinite;
  will-change: transform;
}
[data-design="incumbent"] .dc-inc-jaal svg { width: 100%; height: 100%; display: block; }

/* Two sprigs riding the wash, out of step with it and with each other, so the
   layer never arrives back at an arrangement it has already held. */
[data-design="incumbent"] .dc-inc-buti {
  position: absolute; display: block;
  width: clamp(96px, 13vw, 208px); aspect-ratio: 1;
  opacity: calc(.11 * var(--pattern-intensity, 1));
  will-change: transform;
}
[data-design="incumbent"] .dc-inc-buti svg { width: 100%; height: 100%; display: block; }
[data-design="incumbent"] .dc-inc-buti--a {
  top: 22%; left: 4%;
  animation: dc-incumbent-sway 190s ease-in-out infinite;
}
[data-design="incumbent"] .dc-inc-buti--b {
  top: 64%; right: 5%;
  animation: dc-incumbent-sway 233s ease-in-out infinite reverse;
}

@keyframes dc-incumbent-wash { to { transform: translate3d(260px, 260px, 0); } }
@keyframes dc-incumbent-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%      { transform: translate3d(2.2%, -3.4%, 0) rotate(2.4deg); }
  66%      { transform: translate3d(-1.8%, 2.6%, 0) rotate(-1.9deg); }
}

/* -- the inserted bands ----------------------------------------------------
   Foreground ornament, so the tone opacity is lifted off the ambient floor
   and the inks are pulled back to the accent: this design is gold on cream,
   and a saffron stroke in a band that sits between two sections would be a
   second colour the sheet does not otherwise own. */
[data-design="incumbent"] .dc-inc-band {
  padding: clamp(16px, 2.4vw, 34px) clamp(22px, 3.89vw, 56px);
  line-height: 0;
}
[data-design="incumbent"] .dc-inc-band .belband > span,
[data-design="incumbent"] .dc-inc-band .dc-inc-korner__k {
  opacity: calc(.85 * var(--pattern-intensity, 1));
  color: var(--accent);
  --pat-c1: var(--accent);
  --pat-c2: var(--accent);
  --pat-c3: var(--accent);
  --pat-c4: var(--accent2);
}

/* The creeper. The dash is far shorter than the path, so a body of finite
   length walks the whole border head first and the line is never all present
   at once: a bel travels, it does not appear. Ninety seconds end to end, which
   is the same unhurried rate the blooms turn at. */
[data-design="incumbent"] .dc-inc-band .kl-line {
  stroke-dasharray: 300 1000;
  animation: dc-incumbent-travel 90s linear infinite;
}
[data-design="incumbent"] .dc-inc-band .kl-line--under {
  animation-delay: -2.2s;
  opacity: .24;
}
@keyframes dc-incumbent-travel {
  from { stroke-dashoffset: 1300; }
  to   { stroke-dashoffset: -1000; }
}

/* The konia rule. Two corner pieces facing each other across a hairline, and
   nothing in it moves except the light: a long opacity breath on the corners
   and a hairline that eases out from its centre and back. Quiet is the brief. */
[data-design="incumbent"] .dc-inc-korner {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px);
}
[data-design="incumbent"] .dc-inc-korner__k {
  position: relative; display: block; flex: 0 0 auto;
  width: clamp(38px, 5.2vw, 76px); aspect-ratio: 1;
  animation: dc-incumbent-breath 34s ease-in-out infinite;
}
[data-design="incumbent"] .dc-inc-korner__k--r { animation-delay: -17s; }
[data-design="incumbent"] .dc-inc-korner__k svg {
  position: static; inset: auto;
  width: 100%; height: 100%; display: block;
}
[data-design="incumbent"] .dc-inc-korner__line {
  flex: 1 1 auto; display: block; height: 1px;
  background: var(--accent);
  opacity: calc(.5 * var(--pattern-intensity, 1));
  transform-origin: 50% 50%;
  animation: dc-incumbent-rule 34s ease-in-out infinite;
}
@keyframes dc-incumbent-breath {
  0%, 100% { opacity: calc(.62 * var(--pattern-intensity, 1)); }
  50%      { opacity: calc(.95 * var(--pattern-intensity, 1)); }
}
@keyframes dc-incumbent-rule {
  0%, 100% { transform: scaleX(.86); }
  50%      { transform: scaleX(1); }
}

/* A global reduce rule halts the ambient layer. The bands are their own
   sections, so they are halted here: the creeper is left fully drawn rather
   than frozen mid travel, which for a dashed stroke would be a line that is
   mostly not there. */
@media (prefers-reduced-motion: reduce) {
  [data-design="incumbent"] .dc-inc-band .kl-line {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  [data-design="incumbent"] .dc-inc-korner__k,
  [data-design="incumbent"] .dc-inc-korner__line {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}