/* ==========================================================================
   GILDED — one page. Loaded on a/gilded.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One centre axis. A monogram device in fine gold linework on deep black,
   the name in letterspaced Italiana, one slow highlight crossing the metal
   (CSS; still under reduced motion). Then the record: double-hairline
   frames with a lozenge at head and foot, lozenge rules between sections,
   every line centred. The shell (rail, top bar, action cluster, community
   drawer) is never restyled: every rule here is scoped to .gl-hero or
   .gl-rec, and the ground is set on main alone.

   Colour: one metal on one ground, no third hue. Contrast on #0B0A08:
     --gl-gold    #C8A24B   8.2:1  labels, headings in the metal
     --gl-pale    #E8D9A8  14.1:1  reading text
     --gl-cream   #F0E4BC  15.4:1  headings, links, the highlight
     --gl-bronze  #8A7440   4.4:1  hairlines and ornament, NEVER text
     --gl-deep    #070606          the ground under the frames
   ========================================================================== */
@font-face {
  font-family: "Gl Italiana";
  src: url("fonts/italiana.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Gl Spectral";
  src: url("fonts/spectral-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gl Spectral";
  src: url("fonts/spectral-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

.gl-page {
  --gl-bk: #0B0A08;
  --gl-gold: #C8A24B;
  --gl-pale: #E8D9A8;
  --gl-cream: #F0E4BC;
  --gl-bronze: #8A7440;
  --gl-deep: #070606;
  --gl-hair: rgba(138, 116, 64, 0.4);
  --gl-display: "Gl Italiana", "Didot", "Bodoni MT", "Times New Roman", serif;
  --gl-body: "Gl Spectral", Georgia, "Times New Roman", serif;
  background: var(--paper); /* shell mat; the metal and ground live on main */
}
.gl-page main { background: var(--gl-bk); color: var(--gl-pale); overflow-x: hidden; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.gl-hero, .gl-rec {
  font: 300 18px/1.75 var(--gl-body);
  color: var(--gl-pale);
  text-align: center;
}
.gl-hero a, .gl-rec a { color: var(--gl-cream); text-decoration-color: var(--gl-bronze); text-underline-offset: 4px; }
.gl-hero a:hover, .gl-rec a:hover { color: var(--gl-gold); }
.gl-hero :focus-visible, .gl-rec :focus-visible { outline: 2px solid var(--gl-gold); outline-offset: 4px; }
.gl-rec b { font-weight: 400; }
.gl-rec em { font-style: italic; }

/* The lozenge rule between sections. */
.gl-orn { display: block; width: min(420px, 80%); height: 18px; margin: 34px auto; stroke: var(--gl-gold); stroke-width: 0.8; }
.gl-orn__dot { fill: var(--gl-gold); stroke: none; }

/* ---- the hero: the device, the name, the line --------------------------- */
.gl-hero {
  padding: clamp(50px, 9vw, 110px) 16px 10px;
}
.gl-mono { position: relative; width: min(300px, 64vw); margin: 0 auto; }
.gl-dev { display: block; width: 100%; height: auto; }
.gl-dev__l { font: 400 96px var(--gl-display); letter-spacing: -4px; }
.gl-st1 { stop-color: var(--gl-bronze); }
.gl-st2 { stop-color: var(--gl-gold); }
.gl-st3 { stop-color: var(--gl-cream); }
/* The travelling highlight: the same linework in the palest metal, seen
   only through a narrow band of mask that crosses once, then rests. */
.gl-dev--hi {
  position: absolute; inset: 0;
  color: var(--gl-cream);
  -webkit-mask-image: linear-gradient(100deg, transparent 44%, black 50%, transparent 56%);
  mask-image: linear-gradient(100deg, transparent 44%, black 50%, transparent 56%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: gl-sheen 9s linear infinite;
}
@keyframes gl-sheen {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  70%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.gl-h1 {
  margin: 26px 0 0;
  font: 400 clamp(44px, 8vw, 96px)/1 var(--gl-display);
  letter-spacing: 0.34em;
  padding-left: 0.34em; /* optical: recentres the tracked run */
  text-transform: uppercase;
  color: var(--gl-cream);
}
.gl-lead { margin: 18px auto 0; max-width: 34ch; font-style: italic; }

/* ---- the record ---------------------------------------------------------- */
.gl-w { max-width: 820px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }
.gl-s { margin: clamp(80px, 10vw, 120px) 0; }
.gl-s--first { margin-top: clamp(40px, 6vw, 60px); }
.gl-rec h2 {
  margin: 0 0 22px;
  font: 400 clamp(26px, 4vw, 40px)/1.2 var(--gl-display);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gl-cream);
  overflow-wrap: break-word;
}
.gl-rec p { margin: 0 auto 1em; max-width: 60ch; }
.gl-sub { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gl-gold); margin: -12px auto 22px !important; }
.gl-lab {
  display: block;
  margin-bottom: 6px;
  font: 400 13px/1.5 var(--gl-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gl-gold);
}

/* The frame: a double hairline, a lozenge at head and foot. */
.gl-frame {
  position: relative;
  padding: clamp(34px, 6vw, 60px) clamp(18px, 5vw, 56px);
  border: 1px solid var(--gl-bronze);
  outline: 1px solid var(--gl-bronze);
  outline-offset: -8px;
}
.gl-frame::before, .gl-frame::after {
  content: "";
  position: absolute; left: 50%;
  width: 8px; height: 8px;
  background: var(--gl-gold);
  box-shadow: 0 0 0 7px var(--gl-bk);
  transform: translateX(-50%) rotate(45deg);
}
.gl-frame::before { top: -4.5px; }
.gl-frame::after { bottom: -4.5px; }

/* The catalogue entry. */
.gl-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; margin: 0; }
.gl-meta dt { font: 400 12px/1.5 var(--gl-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gl-gold); }
.gl-meta dd { margin: 4px 0 0; }

/* The argument. */
.gl-big { font: italic 300 clamp(26px, 3.8vw, 40px)/1.3 var(--gl-body); color: var(--gl-cream); margin: 0 auto 20px !important; max-width: 22ch !important; }
.gl-big--s { font-size: clamp(20px, 2.6vw, 26px); max-width: 40ch !important; }
.gl-refuse { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--gl-bronze); }

/* What carries the look. */
.gl-tw { overflow-x: auto; }
.gl-ct { width: 100%; border-collapse: collapse; text-align: center; }
.gl-ct th, .gl-ct td { padding: 10px 8px; border-bottom: 1px solid var(--gl-hair); }
.gl-ct th { font-weight: 400; }
.gl-ct th a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 15px/1.2 var(--gl-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.gl-ct small { display: block; font-size: 12px; font-style: italic; color: var(--gl-gold); }
.gl-nl { font-style: italic; opacity: 0.75; }
.gl-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0 0 8px !important; }
.gl-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.gl-swatch { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gl-swatch span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--gl-bronze); }
.gl-asb { margin: 6px auto 0 !important; font-style: italic; }

/* Rules, by area. */
.gl-rules article { padding: 22px 0; border-bottom: 1px solid var(--gl-hair); }
.gl-rules h3 { margin: 0; font: 400 20px/1.4 var(--gl-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gl-cream); }
.gl-rl + .gl-rl { margin-top: 14px; }
.gl-k { display: block; font-style: italic; color: var(--gl-gold); font-size: 15px; }
.gl-rl p { margin: 6px auto 0; max-width: 52ch; }
.gl-rl small { display: block; font-style: italic; opacity: 0.75; font-size: 14px; }

/* What stands behind it. */
.gl-firm { font-style: italic; }
.gl-rt { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 16px; margin-top: 20px; }
.gl-rt th, .gl-rt td { padding: 7px 8px; border-bottom: 1px solid var(--gl-hair); font-weight: 300; }
.gl-rt thead th { font: 400 12px/1.4 var(--gl-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gl-gold); }

/* Often confused with. */
.gl-conf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gl-conf > * { display: block; padding: 18px; border: 1px solid rgba(138, 116, 64, 0.6); text-decoration: none; }
.gl-conf a:hover { border-color: var(--gl-gold); }
.gl-conf b { display: block; font: 400 17px/1.4 var(--gl-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gl-cream); }
.gl-conf i { display: block; font-size: 13px; color: var(--gl-gold); }
.gl-conf > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }

/* Use it. */
.gl-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gl-use a { display: block; padding: 24px 18px; border: 1px solid var(--gl-gold); outline: 1px solid var(--gl-bronze); outline-offset: 4px; text-decoration: none; }
.gl-use a:focus-visible { outline: 2px solid var(--gl-gold); outline-offset: 4px; }
.gl-use b { display: block; margin-bottom: 6px; font: 400 18px/1.4 var(--gl-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gl-gold); }
.gl-use > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
.gl-mach { margin-top: 28px !important; }
.gl-mach a, .gl-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.gl-foot { font-size: 15px; }

@media (max-width: 720px) {
  .gl-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gl-conf, .gl-use { grid-template-columns: minmax(0, 1fr); }
  .gl-conf > :last-child:nth-child(odd), .gl-use > :last-child:nth-child(odd):not(:first-child) { max-width: none; }
}
@media (max-width: 560px) {
  .gl-ct, .gl-ct tbody, .gl-ct tr, .gl-ct th, .gl-ct td { display: block; }
  .gl-ct th { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 420px) {
  .gl-rec h2 { letter-spacing: 0.16em; }
  .gl-frame { outline-offset: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-dev--hi { animation: none; display: none; }
}