/* masthead: cloned from Manodo Home 02 Masthead.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="masthead"][data-palette="own"] {
  --paper: #FBF9F4;
  --ink: #14110E;
  --accent: #8C1C13;
  --accent2: #D9A05B;
  --desk: #EDEBE6;
  --line: #DFDDD8;
  --bord: #BFBDB8;
  --faint: #B1AFAA;
  --strike: #9F9C98;
  --mut: #5E5B58;
  --soft: #474441;
  --papermut: #BAB8B4;
  --pmut2: #95938F;
  --stone: #DBD9D4;
  --inkline: #322F2C;
  --glass: rgba(251,249,244,0.94);
  --scrim: rgba(20,17,14,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="masthead"] body { background: var(--paper-3); }
[data-design="masthead"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="masthead"] :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="masthead"]: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="masthead"] .dc-masthead-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="masthead"] .dc-masthead-h1:hover { background: var(--accent); border-color: var(--accent) }

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

[data-design="masthead"] .dc-orn .bloom span { animation: none; }
[data-design="masthead"] .dc-orn .bloom svg {
  animation: dc-mh-strike 1.5s ease-out both, dc-mh-register 94s ease-in-out infinite;
}
[data-design="masthead"] .dc-orn .bloom__b svg {
  animation: dc-mh-strike 1.5s ease-out .35s both, dc-mh-register-b 127s ease-in-out infinite;
}
@keyframes dc-mh-strike { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc-mh-register {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  34%      { transform: translate3d(-1.1%, .6%, 0) rotate(.55deg); }
  67%      { transform: translate3d(.8%, -.5%, 0) rotate(-.4deg); }
}
@keyframes dc-mh-register-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  40%      { transform: translate3d(.9%, -.7%, 0) rotate(-.6deg); }
  75%      { transform: translate3d(-.6%, .4%, 0) rotate(.35deg); }
}

/* ---- the ambient bed -------------------------------------------------------
   The table's rules are inherited; these restate the motion on the same
   selectors so the strike carries the press curve and the creep is slower and
   smaller than the floor version. The motion sits on the svg, never on the
   positioned span: the bloom anchors carry their offset on the span's own
   transform, and a keyframe that restates someone else's transform is how an
   ornament ends up in the wrong corner. */
[data-design="masthead"] .dc-orn .bloom span { animation: none; }
[data-design="masthead"] .dc-orn .bloom svg {
  animation: dc-masthead-ink 1.05s cubic-bezier(.19,.88,.24,1) both,
             dc-masthead-creep 128s ease-in-out 1.05s infinite;
  will-change: opacity, transform;
}
[data-design="masthead"] .dc-orn .bloom__b svg {
  animation: dc-masthead-ink 1.05s cubic-bezier(.19,.88,.24,1) .26s both,
             dc-masthead-creep-b 163s ease-in-out 1.31s infinite;
}

/* The drawn rules. One continuous stroke each, so they arrive by being drawn
   rather than by fading up, and once arrived they hold and creep like
   everything else on the sheet. */
[data-design="masthead"] .dc-orn .dc-masthead-rule {
  position: absolute; left: -8%; width: 116%; display: block;
  height: clamp(44px, 6vw, 96px);
  opacity: calc(.1 * var(--pattern-intensity, 1));
}
[data-design="masthead"] .dc-orn .dc-masthead-rule svg { width: 100%; height: 100%; display: block; }
[data-design="masthead"] .dc-orn .dc-masthead-rule--a { top: 21%; animation: dc-masthead-creep 141s ease-in-out 2.4s infinite; }
[data-design="masthead"] .dc-orn .dc-masthead-rule--b { bottom: 17%; animation: dc-masthead-creep-b 176s ease-in-out 3.1s infinite; }
[data-design="masthead"] .dc-orn .dc-masthead-rule .kl-line {
  stroke-dashoffset: 0;
  animation: dc-masthead-draw 2.3s cubic-bezier(.22,.86,.24,1) .18s both;
}
[data-design="masthead"] .dc-orn .dc-masthead-rule--b .kl-line { animation-delay: .62s; }
/* The soft casing under the fine line is laid down a beat first, the way a
   broad nib puts its body down before the edge shows. */
[data-design="masthead"] .dc-orn .dc-masthead-rule .kl-line--under { animation-delay: 0s; }
[data-design="masthead"] .dc-orn .dc-masthead-rule--b .kl-line--under { animation-delay: .44s; }

/* Two stamped marks in the outer margins. These strike; they are not drawn. */
[data-design="masthead"] .dc-orn .dc-masthead-buti {
  position: absolute; display: block;
  width: clamp(56px, 7vw, 108px); aspect-ratio: 1;
  opacity: calc(.11 * var(--pattern-intensity, 1));
  animation: dc-masthead-ink .5s cubic-bezier(.15,.9,.2,1) .7s both,
             dc-masthead-creep 149s ease-in-out 1.2s infinite;
}
[data-design="masthead"] .dc-orn .dc-masthead-buti svg { width: 100%; height: 100%; display: block; }
[data-design="masthead"] .dc-orn .dc-masthead-buti--l { top: 34%; left: 2.5%; }
[data-design="masthead"] .dc-orn .dc-masthead-buti--r {
  top: 63%; right: 2.5%;
  animation: dc-masthead-ink .5s cubic-bezier(.15,.9,.2,1) .92s both,
             dc-masthead-creep-b 167s ease-in-out 1.5s infinite;
}

/* ---- the inserted flourish -------------------------------------------------
   A thin drawn rule under the contents block, in madder at strength. Its
   horizontal padding is the brief's own, clamp(19px, 3.33vw, 48px), so the
   flourish is measured to the same column as the section above it. */
[data-design="masthead"] .dc-masthead-flourish {
  padding: clamp(20px, 3.2vw, 46px) clamp(19px, 3.33vw, 48px) 0;
}
/* The hairline the flourish hangs from, pressed out from the centre. */
[data-design="masthead"] .dc-masthead-flourish::before {
  content: ""; display: block; height: 1px; background: var(--accent);
  opacity: .45; transform: scaleX(1); transform-origin: 50% 50%;
  animation: dc-masthead-press .95s cubic-bezier(.2,.9,.22,1) both;
}
/* One madder ink through the whole flourish, with the second accent only on
   the counterpoint marks: a printed flourish is struck from one plate. */
[data-design="masthead"] .dc-masthead-flourish .belband > span {
  color: var(--accent);
  opacity: calc(.88 * var(--pattern-intensity, 1));
  --pat-c1: var(--accent); --pat-c2: var(--accent);
  --pat-c3: var(--accent); --pat-c4: var(--accent2);
}
[data-design="masthead"] .dc-masthead-flourish .belband svg { height: clamp(30px, 4.4vw, 62px); }
[data-design="masthead"] .dc-masthead-flourish .kl-line {
  stroke-dashoffset: 0;
  animation: dc-masthead-draw 2.6s cubic-bezier(.22,.86,.24,1) .3s both;
}
[data-design="masthead"] .dc-masthead-flourish .kl-line--under { animation-delay: .06s; }

/* ---- the four motions ------------------------------------------------------
   ink   the strike. Steep, then done.
   draw  the pen travelling the length of one continuous stroke, once.
   press the rule pushed out from the centre under the plate.
   creep registration drift, and nothing else, for as long as the page is open.
   -------------------------------------------------------------------------- */
@keyframes dc-masthead-ink { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc-masthead-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes dc-masthead-press { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dc-masthead-creep {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  36%      { transform: translate3d(-.9%, .45%, 0) rotate(.4deg); }
  71%      { transform: translate3d(.6%, -.35%, 0) rotate(-.28deg); }
}
@keyframes dc-masthead-creep-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  42%      { transform: translate3d(.7%, -.5%, 0) rotate(-.42deg); }
  78%      { transform: translate3d(-.45%, .3%, 0) rotate(.24deg); }
}

/* The global reduce rule halts the ambient layer. The insert lives in the page
   flow rather than inside it, so it is halted here: a drawing animation that
   never runs is a line that is never there, so the finished mark is what rest
   gets, not a frozen fragment of one. */
@media (prefers-reduced-motion: reduce) {
  [data-design="masthead"] .dc-masthead-flourish::before {
    animation: none !important; transform: scaleX(1) !important;
  }
  [data-design="masthead"] .dc-masthead-flourish .belband > span,
  [data-design="masthead"] .dc-masthead-flourish .kl,
  [data-design="masthead"] .dc-masthead-flourish .kl-line {
    animation: none !important; stroke-dashoffset: 0 !important;
  }
  [data-design="masthead"] .dc-orn .dc-masthead-rule .kl-line {
    animation: none !important; stroke-dashoffset: 0 !important;
  }
}