/* ============================================================
   AEQUITAS WINE HOLDINGS, INC.
   Site stylesheet for the certificate redesign (sandbox).

   Tradition: the engraved share certificate / legal instrument.
   Every colour, measure, duration and easing curve below comes
   from assets/tokens.css. Nothing here invents a value, and no
   Viridian or Cobalt token appears: the sibling houses are
   present only as logo lockups and as copy.

   Structure of a page, outside in:
     .sheet        security stock ground
       .instrument 3px double oxblood rule
         .frame    engine-turned band, all four edges
           .plate  1px hairline, the printed face
       .register   the endorsement plate on the back

   The engine turning is on the frame only. It never sits behind
   reading matter, which is why .plate paints its own stock.

   NOTE: tokens.css ships a `.aeq-guilloche` utility carrying the
   same background, but it also sets `opacity:.85`, which would
   fade every child of the frame including the plate. The band is
   therefore restated here as pattern.html does it, without the
   opacity.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--aeq-stock);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--aeq-stock);
  color: var(--aeq-ink);
  font-family: var(--aeq-sans);
  font-size: 16px;
  line-height: var(--aeq-leading-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Figures are tabular-nums, always. Declared again on the faces
   that carry the register so it survives any later override. */
.reg,
.fig,
table,
.docket,
.clause .ord { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding-left: var(--aeq-s4); }

a { color: var(--aeq-oxblood); }
a:hover { color: var(--aeq-oxblood-lt); }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--aeq-oxblood);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--aeq-stock);
  color: var(--aeq-oxblood);
  font-family: var(--aeq-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: var(--aeq-s2) var(--aeq-s3);
  border: 1px solid var(--aeq-oxblood);
  z-index: 20;
}
.skip:focus { left: var(--aeq-s3); top: var(--aeq-s3); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- The instrument ---------------------------------- */

.sheet {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(14px, 2.5vw, 34px);
}

.instrument {
  border: var(--aeq-border-outer);
  background: var(--aeq-stock);
}

.frame {
  padding: var(--aeq-guilloche-band);
  background-color: var(--aeq-stock);
  background-image:
    repeating-radial-gradient(circle at 0% 50%,
      transparent 0 3px, var(--aeq-guilloche) 3px 3.6px, transparent 3.6px 7px),
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 4px, var(--aeq-guilloche) 4px 4.6px, transparent 4.6px 9px),
    repeating-radial-gradient(circle at 100% 50%,
      transparent 0 3px, var(--aeq-guilloche) 3px 3.6px, transparent 3.6px 7px),
    repeating-linear-gradient(66deg,
      transparent 0 2px, var(--aeq-guilloche) 2px 2.4px, transparent 2.4px 5px);
  background-size: 44px 100%, 62px 100%, 44px 100%, auto;
}

.plate {
  border: var(--aeq-border-inner);
  background: var(--aeq-stock);
  padding: clamp(26px, 4vw, 58px) clamp(22px, 5vw, 72px) clamp(38px, 5vw, 58px);
}

/* The measure. Justified, hyphenated, 58 characters. */
.col {
  max-width: var(--aeq-measure);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Docket: the head of the sheet ------------------- */

.docket {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--aeq-s4);
  flex-wrap: wrap;
  font-family: var(--aeq-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--aeq-ink-2);
  border-bottom: 1px solid var(--aeq-rule);
  padding-bottom: var(--aeq-s3);
  margin-bottom: var(--aeq-s5);
}

/* The docket carries the monogram, not the full lockup: the wordmark's
   second line is illegible below about 30px, and the lockup is set at
   size a few lines further down anyway. The parent's name is carried in
   the register face instead, where it stays readable. */
.docket-id { display: flex; align-items: center; gap: var(--aeq-s3); flex-wrap: wrap; }
.docket-brand {
  display: flex;
  align-items: center;
  gap: var(--aeq-s2);
  color: var(--aeq-ink-2);
  text-decoration: none;
  transition: color var(--aeq-dur) var(--aeq-ease);
}
.docket-brand:hover { color: var(--aeq-oxblood); }
.docket-brand img { display: block; height: 26px; width: auto; }
.docket-id .no { white-space: nowrap; }

.docket-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeq-s2) var(--aeq-s4);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.docket-nav a {
  color: var(--aeq-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--aeq-dur) var(--aeq-ease),
              border-color var(--aeq-dur) var(--aeq-ease);
}
.docket-nav a:hover { color: var(--aeq-oxblood); border-bottom-color: var(--aeq-oxblood); }
.docket-nav a[aria-current] { color: var(--aeq-oxblood); border-bottom-color: var(--aeq-oxblood); }

/* ---------- The name of the instrument ---------------------- */

.head { text-align: center; }

.head .mark {
  display: block;
  margin: 0 auto;
  height: clamp(30px, 4.4vw, 50px);
  width: auto;
}
/* Sibling lockups are set by optical height, not by a shared rule:
   Viridian's is a wide single line, Cobalt's is a stacked block. */
.head .mark--viridian { height: clamp(34px, 5vw, 58px); }
/* Cobalt's mark is the Zurich poster lockup (2.60:1), not the retired v2.0
   stack (1.61:1), so its height is set to land on the same width as Viridian's
   rather than carried over from the taller mark. */
.head .mark--cobalt { height: clamp(54px, 6.9vw, 92px); }
.head .mark--tall { height: clamp(46px, 6.6vw, 84px); }

h1.name {
  font-family: var(--aeq-display);
  font-weight: var(--aeq-display-weight);
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: var(--aeq-leading-display);
  letter-spacing: var(--aeq-tracking-display);
  color: var(--aeq-ink);
}

.sub {
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
  color: var(--aeq-oxblood);
  margin-top: var(--aeq-s3);
}

.hr {
  height: 1px;
  background: var(--aeq-rule);
  margin: var(--aeq-s4) auto;
  max-width: 220px;
  position: relative;
}
.hr::after {
  content: "\2766";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--aeq-stock);
  padding: 0 var(--aeq-s2);
  color: var(--aeq-oxblood);
  font-size: 13px;
}

/* ---------- Legend and body --------------------------------- */

.legend {
  max-width: var(--aeq-measure);
  margin: 0 auto var(--aeq-s4);
  text-align: justify;
  hyphens: auto;
}
.legend:last-child { margin-bottom: 0; }

.lede {
  display: block;
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
  color: var(--aeq-ink-2);
  margin-bottom: var(--aeq-s3);
  text-align: center;
}

.essence {
  font-family: var(--aeq-display);
  font-weight: var(--aeq-display-weight);
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.2;
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
  color: var(--aeq-ink);
}

/* Section heads read as the ruled headings of a schedule. */
.sec {
  max-width: var(--aeq-measure);
  margin: var(--aeq-s6) auto var(--aeq-s4);
  border-top: 1px solid var(--aeq-rule);
  padding-top: var(--aeq-s3);
  display: flex;
  align-items: baseline;
  gap: var(--aeq-s3);
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
}
.sec h2 {
  font: inherit;
  letter-spacing: inherit;
  color: var(--aeq-ink-2);
}

/* ---------- Clauses ----------------------------------------- */

.clauses { max-width: var(--aeq-measure); margin: 0 auto; }
.clause {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: var(--aeq-s3);
  padding: var(--aeq-s3) 0;
  border-top: 1px solid var(--aeq-rule);
  text-align: justify;
  hyphens: auto;
}
.clause:last-of-type { border-bottom: 1px solid var(--aeq-rule); }
.clause .ord {
  font-family: var(--aeq-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aeq-oxblood);
  padding-top: var(--aeq-s1);
  text-align: left;
}
.clause b {
  font-family: var(--aeq-display);
  font-weight: var(--aeq-display-weight);
  font-style: normal;
}
.clause p + p { margin-top: var(--aeq-s2); }
.clause ul { text-align: left; margin-top: var(--aeq-s2); }
.clause li { margin-bottom: var(--aeq-s1); }

/* ---------- The houses -------------------------------------- */

.schedule { max-width: var(--aeq-measure); margin: 0 auto; }

.house {
  display: block;
  padding: var(--aeq-s4) 0;
  border-top: 1px solid var(--aeq-rule);
  text-decoration: none;
  color: var(--aeq-ink);
}
.house:last-child { border-bottom: 1px solid var(--aeq-rule); }
.house .role {
  font-family: var(--aeq-mono);
  font-size: 9.5px;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
  color: var(--aeq-ink-2);
}
.house .house-mark {
  display: block;
  height: 34px;
  width: auto;
  margin: var(--aeq-s3) 0 var(--aeq-s3);
}
.house .house-mark--cobalt { height: 54px; }
.house .line {
  font-family: var(--aeq-display);
  font-weight: var(--aeq-display-weight);
  font-size: 19px;
  line-height: 1.24;
}
.house .desc {
  margin-top: var(--aeq-s2);
  text-align: justify;
  hyphens: auto;
  color: var(--aeq-ink-2);
}
.house .cta {
  display: inline-block;
  margin-top: var(--aeq-s3);
  font-family: var(--aeq-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aeq-oxblood);
  border-bottom: 1px solid var(--aeq-rule);
  padding-bottom: 2px;
  transition: color var(--aeq-dur) var(--aeq-ease),
              border-color var(--aeq-dur) var(--aeq-ease);
}
.house:hover .cta { color: var(--aeq-oxblood-lt); border-bottom-color: var(--aeq-oxblood-lt); }

/* ---------- Attestation ------------------------------------- */

/* The seal closes the sheet on its own, on the same centre axis as the
   head and its fleuron rule. It is an engraving device, not a claim
   that anyone signed: the ruled signature lines that used to flank it
   were struck out as theatre. */
.attest {
  display: flex;
  justify-content: center;
  margin: var(--aeq-s6) auto 0;
  max-width: var(--aeq-measure);
}
.seal {
  width: 128px; height: 128px;
  border-radius: 50%;
  border: 2px solid var(--aeq-seal);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--aeq-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  /* The rim and the ring work are the seal gold. The legend is not:
     the seal token measures 2.74:1 against the stock, so gold type on
     the disc fails at any size. Engraved in oxblood instead, 9.2:1. */
  color: var(--aeq-oxblood);
  text-transform: uppercase;
  line-height: 1.5;
  /* Solid centre disc: the legend must not sit on the ring work.
     `closest-side` is load-bearing. Without it the gradient ray runs to
     the farthest corner, so the system's 47% resolves to only 66% of the
     seal's radius, the longest legend line overruns the disc, and gold
     type lands on gold ring work. Sized here against the radius instead. */
  background:
    radial-gradient(circle closest-side, var(--aeq-stock) 0 76%, transparent 76%),
    repeating-conic-gradient(from 0deg, transparent 0 3deg, rgba(168, 135, 62, .30) 3deg 6deg);
}

/* ---------- Stamps ------------------------------------------ */

.stamp {
  display: inline-block;
  font-family: var(--aeq-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  padding: 5px 11px;
  transform: rotate(-2.5deg);
  opacity: .88;
  color: var(--aeq-oxblood);
}
.stamp--pend { color: var(--aeq-ink-2); transform: rotate(1.5deg); }
/* On the endorsement plate the stamp must be struck in a light ink. */
.register .stamp { color: var(--aeq-seal); }

/* ---------- The endorsement plate (the back) ---------------- */

.register {
  background: var(--aeq-void);
  color: var(--aeq-stock);
  margin-top: var(--aeq-s2);
  padding: var(--aeq-s5) clamp(22px, 3.5vw, 54px);
}
.register h2,
.register .plate-title {
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
  color: var(--aeq-seal);
  margin-bottom: var(--aeq-s4);
  font-weight: 400;
}
/* Display line on the dark side. Colour is set explicitly rather
   than inherited, for the same reason the register cells are. */
.register .plate-display {
  font-family: var(--aeq-display);
  font-weight: var(--aeq-display-weight);
  font-size: clamp(21px, 2.8vw, 32px);
  line-height: 1.2;
  color: var(--aeq-stock);
  max-width: 22ch;
  margin-bottom: var(--aeq-s4);
}
.register .split {
  border-top: 1px solid rgba(169, 180, 172, .4);
  margin: var(--aeq-s6) 0 var(--aeq-s4);
}
.register .endorse {
  font-family: var(--aeq-sans);
  font-size: 14px;
  color: var(--aeq-guilloche);
  max-width: var(--aeq-measure);
  text-align: justify;
  hyphens: auto;
}
.register .endorse a { color: var(--aeq-stock); }
.register .endorse a:hover { color: var(--aeq-seal); }

.register .mail {
  display: inline-block;
  margin-top: var(--aeq-s4);
  font-family: var(--aeq-display);
  font-weight: var(--aeq-display-weight);
  font-size: clamp(19px, 2.4vw, 27px);
  color: var(--aeq-stock);
  text-decoration: none;
  border-bottom: 1px solid var(--aeq-seal);
  padding-bottom: var(--aeq-s1);
  transition: color var(--aeq-dur) var(--aeq-ease),
              border-color var(--aeq-dur) var(--aeq-ease);
}
.register .mail:hover { color: var(--aeq-seal); }

.register .site-line {
  margin-top: var(--aeq-s3);
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.register .site-line a { color: var(--aeq-guilloche); text-decoration: none; }
.register .site-line a:hover { color: var(--aeq-seal); }

/* Ruled tabular rows. Cell colour is set explicitly, because
   inheriting the plate's ink onto the dark side is the one
   contrast failure this layout produces. */
.register table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--aeq-mono);
  font-size: 11.5px;
}
.register th {
  text-align: left;
  font-weight: 400;
  color: var(--aeq-guilloche);
  padding-bottom: var(--aeq-s2);
  border-bottom: 1px solid rgba(169, 180, 172, .4);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.register td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(169, 180, 172, .18);
  color: var(--aeq-stock);
  vertical-align: top;
}
.register td.q,
.register td .q { color: var(--aeq-guilloche); }
.register td .q { display: block; margin-top: var(--aeq-s1); line-height: 1.5; }
.register td a { color: var(--aeq-stock); text-decoration: none; border-bottom: 1px solid rgba(168, 135, 62, .6); }
.register td a:hover { color: var(--aeq-seal); }
.register th:last-child, .register td:last-child { text-align: right; }

/* ---------- Foot of the endorsement plate ------------------- */

.foot {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--aeq-s5);
  margin-top: var(--aeq-s6);
  padding-top: var(--aeq-s4);
  border-top: 1px solid rgba(169, 180, 172, .4);
}
/* On the legal instruments the plate carries nothing above the
   columns, so the divider rule would be a stray line. */
.register .foot:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.foot-house img {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: var(--aeq-s3);
}
.foot-house p {
  color: var(--aeq-guilloche);
  font-size: 13px;
  max-width: 42ch;
  text-align: justify;
  hyphens: auto;
}
.foot h3 {
  font-family: var(--aeq-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
  color: var(--aeq-seal);
  margin-bottom: var(--aeq-s3);
}
.foot a {
  display: block;
  color: var(--aeq-stock);
  text-decoration: none;
  font-size: 13.5px;
  padding: var(--aeq-s1) 0;
  transition: color var(--aeq-dur) var(--aeq-ease);
}
.foot a:hover { color: var(--aeq-seal); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--aeq-s2) var(--aeq-s4);
  margin-top: var(--aeq-s5);
  padding-top: var(--aeq-s3);
  border-top: 1px solid rgba(169, 180, 172, .18);
  font-family: var(--aeq-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--aeq-guilloche);
}
.foot-base a { color: var(--aeq-stock); text-decoration: none; }
.foot-base a:hover { color: var(--aeq-seal); }

/* ---------- Co-funding notice ------------------------------- */

.eu {
  max-width: var(--aeq-measure);
  margin: var(--aeq-s5) auto 0;
  border-top: 1px solid var(--aeq-rule);
  padding-top: var(--aeq-s3);
}
.eu svg { width: 250px; height: auto; display: block; }
.eu .cap {
  font-family: var(--aeq-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aeq-ink-2);
  margin-bottom: var(--aeq-s2);
}

/* ---------- Legal instruments ------------------------------- */

.effective {
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aeq-ink-2);
  text-align: center;
  margin-top: var(--aeq-s3);
}

/* ---------- Not found --------------------------------------- */

.void-sheet .plate { text-align: center; }
.void-sheet .code {
  font-family: var(--aeq-mono);
  font-size: 11px;
  letter-spacing: var(--aeq-tracking-legend);
  text-transform: uppercase;
  color: var(--aeq-ink-2);
}
.void-sheet .essence { margin-top: var(--aeq-s3); }
/* Struck harder here so it reads as a stamp rather than a second button. */
.void-sheet .stamp { margin-top: var(--aeq-s5); transform: rotate(-4.5deg); letter-spacing: .22em; }
.void-sheet .back {
  display: inline-block;
  margin-top: var(--aeq-s4);
  font-family: var(--aeq-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aeq-oxblood);
  text-decoration: none;
  border: 1px solid var(--aeq-rule);
  padding: 9px 22px;
  transition: background var(--aeq-dur) var(--aeq-ease),
              color var(--aeq-dur) var(--aeq-ease),
              border-color var(--aeq-dur) var(--aeq-ease);
}
.void-sheet .back:hover {
  background: var(--aeq-oxblood);
  border-color: var(--aeq-oxblood);
  color: var(--aeq-stock);
}

/* ---------- Narrow sheets ----------------------------------- */

@media (max-width: 760px) {
  .frame { padding: var(--aeq-s3); }
  .plate { padding: var(--aeq-s5) var(--aeq-s4); }
  .clause { grid-template-columns: 1fr; gap: var(--aeq-s2); }
  .foot { grid-template-columns: 1fr; gap: var(--aeq-s4); }
  .docket { align-items: flex-start; }
  .register table { font-size: 10.5px; }
  .register th:last-child, .register td:last-child { text-align: left; }
}