/* modern: cloned from Manodo Home 03 Modern.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="modern"][data-palette="own"] {
  --paper: #FFFFFF;
  --ink: #101418;
  --accent: #1E6F5C;
  --accent2: #7CC3AE;
  --desk: #F1F1F1;
  --line: #E2E3E3;
  --bord: #C1C2C3;
  --faint: #B3B4B5;
  --strike: #9FA1A3;
  --mut: #5C5F62;
  --soft: #45484B;
  --papermut: #BCBDBE;
  --pmut2: #969899;
  --stone: #DEDEDF;
  --inkline: #2F3336;
  --glass: rgba(255,255,255,0.94);
  --scrim: rgba(16,20,24,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(--paper);
}

/* 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="modern"] body { background: var(--paper-3); }
[data-design="modern"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="modern"] :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="modern"]: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="modern"] .dc-modern-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="modern"] .dc-modern-h1:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h2:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h3:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h4:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h5:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h6:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h7:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h8:hover { border-color: var(--ink) }
[data-design="modern"] .dc-modern-h9:hover { background: var(--accent) }

/* The ambient layer: above the sheet's own ground, below everything on it. */
[data-design="modern"] .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="modern"] .dc-ins { overflow: hidden; }

[data-design="modern"] .dc-orn__jaal {
  position: absolute; top: -240px; left: -240px;
  width: calc(100% + 480px); height: calc(100% + 480px); display: block;
  opacity: calc(.045 * var(--pattern-intensity, 1));
  animation: dc-mod-drift 240s linear infinite; will-change: transform;
}
[data-design="modern"] .dc-orn__jaal svg { width: 100%; height: 100%; display: block; }
@keyframes dc-mod-drift { to { transform: translate3d(240px, 240px, 0); } }

/* -- the ambient lattice ---------------------------------------------------
   Oversized by one tile on each side and translated by exactly one tile, so
   the pattern that leaves the frame is the pattern that arrives. */
[data-design="modern"] .dc-orn__jaal {
  position: absolute; top: -240px; left: -240px;
  width: calc(100% + 480px); height: calc(100% + 480px); display: block;
  opacity: calc(.045 * var(--pattern-intensity, 1));
  animation: dc-modern-drift 240s linear infinite;
  will-change: transform;
}
[data-design="modern"] .dc-orn__jaal--deep {
  top: -480px; left: -480px;
  width: calc(100% + 960px); height: calc(100% + 960px);
  opacity: calc(.026 * var(--pattern-intensity, 1));
  animation: dc-modern-drift-deep 617s linear infinite;
}
[data-design="modern"] .dc-orn__jaal svg { width: 100%; height: 100%; display: block; }

@keyframes dc-modern-drift      { to { transform: translate3d(240px, 240px, 0); } }
@keyframes dc-modern-drift-deep { to { transform: translate3d(-480px, 480px, 0); } }

/* -- the one insert --------------------------------------------------------
   Section padding matched to the brief's own 32px gutter, so the band sits on
   the same edges as the sections above and below it. */
[data-design="modern"] .dc-modern-rule {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 2.4vw, 34px) 32px;
  line-height: 0;
}
[data-design="modern"] .dc-modern-rule__ink {
  display: block;
  width: clamp(44px, 5.6vw, 72px); aspect-ratio: 1;
  /* The engine paints the strand with --pat-c2; on this tone that slot is the
     indigo. Point it at the viridian so the visible line is the one named. */
  --pat-c2: var(--pat-3);
  opacity: calc(.5 * var(--pattern-intensity, 1));
}
[data-design="modern"] .dc-modern-rule__ink svg { width: 100%; height: 100%; display: block; }

/* Hairline means one line. The broad chalk casing under the strand is what
   makes a kolam read as rice flour, and this design is not rice flour. */
[data-design="modern"] .dc-modern-kolam .kl-line--under { display: none; }

/* Drawn on once, then left alone. The fill mode holds the finished state, and
   there is no iteration count: the stroke arrives and that is the last thing
   that happens on this page. */
[data-design="modern"] .dc-modern-kolam .kl-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dc-modern-draw 3.6s cubic-bezier(.22,.62,.24,1) .35s both;
}
@keyframes dc-modern-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* A drawing that never completes is a line nobody ever sees, so reduced motion
   gets the finished stroke rather than a frozen fragment of it. */
@media (prefers-reduced-motion: reduce) {
  [data-design="modern"] .dc-modern-kolam .kl-line {
    animation: none !important; stroke-dashoffset: 0 !important;
  }
  [data-design="modern"] .dc-orn__jaal { animation: none !important; }
}