/* ==========================================================
   fontrepreneur.com: type specimen
   ----------------------------------------------------------
   Canicule Display v0.4 by Kostas Bartsokas.
   Licensed to Emma Darling via Future Fonts (order 197424)
   for use on sites she owns. Not for redistribution.
   (Swap in Kostas's official CSS header once he sends it.)

   Dialogo v0.1 by Beam Type (beamtype.com).
   Licensed to Emma Darling via Future Fonts (order 197423)
   for use on one domain. Not for redistribution.
   ========================================================== */

/* 1. The font file: one variable font holds every weight, Thin (100) to Black (900). */
@font-face {
  font-family: "Canicule Display";
  src: url("fonts/CaniculeDisplay0.4VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* M6: Dialogo's variable font, ExtraLight (200) to Bold (700) */
@font-face {
  font-family: "Dialogo";
  src: url("fonts/DialogoVar.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens: the "Heat" palette, named once and reused everywhere. */
:root {
  --linen: #F4F4F2;
  --paper: #FFFFFF;
  --ink:   #0E0E0E;
  --anise: #F8E3A8;
  --glow:  #FFB27A;
  --flame: #FF5A1F; /* Dragon Fire */
  --chili: #9B1B30;
  --ember: #5A0F1C;
  --spark: #5468F0; /* supporting "cool spark": lines, shapes and generative art only. Never text, never touching Dragon Fire text (1.5 : 1) */

  --font-display: "Canicule Display", Georgia, serif;
  --font-script: "Dialogo", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 3. Page basics */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* 4. Hero: Dragon Fire on Ink, the signature look (contrast 6.2 : 1) */
.hero {
  --wght: 800; /* the "wire": script.js changes this one number, CSS does the rest */
  min-height: 100svh;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background: var(--ink);
  color: var(--linen);
  text-align: center;
}

.hero__label {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--wght);
  /* Fluid size: 22% of the screen width, never smaller than 4rem or bigger than 16rem.
     "Canicule" at weight 800 is about 3.9em wide, so it always fits on one line. */
  font-size: clamp(4rem, 22vw, 16rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--flame); /* fallback for older browsers that don't know color-mix() */
  /* "Heat up": Anise at Thin -> Glow at 500 -> Dragon Fire at Black.
     Inner mix: Anise to Glow over 100-500. Outer mix: adds Dragon Fire over 500-900.
     clamp() keeps each percentage between 0% and 100%.
     Every colour on the way passes on Ink (15.2 down to 6.2). */
  color: color-mix(in oklch,
           color-mix(in oklch, var(--anise), var(--glow) clamp(0%, (var(--wght) - 100) * 0.25%, 100%)),
           var(--flame) clamp(0%, (var(--wght) - 500) * 0.25%, 100%));
  /* Custom bezier: fast start, soft landing ("ease-out quint") */
  transition:
    font-weight 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color       240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__credit {
  margin: 0;
  font-size: 0.875rem;
  color: var(--anise);
}

/* 5. Weight slider (M3) */
.weight {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: min(100%, 32rem);
  margin: 1rem auto 0;
}

.weight__label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weight__readout {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums; /* every digit the same width, so the text doesn't wobble */
  color: var(--anise);
}

/* The slider: strip the browser's default look, then rebuild it.
   Chrome/Safari and Firefox name the parts differently, so each rule is written twice. */
.weight__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2rem;          /* a comfortable tap target */
  background: transparent;
  cursor: pointer;
}

/* The track: the Heat gradient, cool on the left, hot on the right */
.weight__slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--anise), var(--glow), var(--flame));
}
.weight__slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--anise), var(--glow), var(--flame));
}

/* The thumb: a Linen disc with an Ink ring, so it stands out on every part of the gradient */
.weight__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.5rem;   /* (track 0.5rem - thumb 1.5rem) / 2: centres the thumb on the track */
  border-radius: 50%;
  background: var(--linen);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--linen);
}
.weight__slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--linen);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--linen);
}

/* Keyboard focus: an Anise ring (15.2 : 1 on Ink), shown only for keyboard users */
.weight__slider:focus { outline: none; }
.weight__slider:focus-visible {
  outline: 2px solid var(--anise);
  outline-offset: 6px;
  border-radius: 999px;
}

/* 6. Respect "reduce motion": the weight still changes, it just doesn't glide */
@media (prefers-reduced-motion: reduce) {
  .hero__word { transition: none; }
}

/* 7. Weights row (M4): Ink on Linen, 17.5 : 1 */
.weights {
  background: var(--linen);
  color: var(--ink);
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem);
}

.weights__head,
.weights__list {
  max-width: 80rem;
  margin-inline: auto;
}

.weights__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.weights__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weights__field {
  display: grid;
  gap: 0.375rem;
  width: min(100%, 22rem);
}

.weights__label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weights__input {
  font: inherit;
  font-size: 1rem;          /* 16px or more stops iPhones zooming in when you tap the box */
  padding: 0.625rem 0.75rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0.25rem;
}
.weights__input:focus { outline: none; }
.weights__input:focus-visible {
  outline: 2px solid var(--chili); /* Chili on Linen 7.4 : 1, easy to see */
  outline-offset: 2px;
}

.weights__list {
  list-style: none;
  padding: 0;
  margin-block: 0;
  border-bottom: 1px solid rgba(14, 14, 14, 0.15);
}

/* Each row: a small label column, then the sample filling the rest */
.weights__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.5rem;
  border-top: 1px solid rgba(14, 14, 14, 0.15); /* hairline rule */
}

.weights__name {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--chili); /* Chili on Linen, 7.4 : 1 */
}

.weights__sample {
  min-width: 0;             /* lets the grid column shrink, so overflow can clip */
  font-family: var(--font-display);
  font-weight: var(--w);    /* each row's own wire, set in the HTML */
  font-size: clamp(1.75rem, 6vw, 4.5rem);
  line-height: 1.2;
  white-space: nowrap;      /* one line each, whatever the screen */
  overflow: hidden;
  /* Fade the last 3rem to transparent, so a long line melts away instead of being chopped */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

/* Phones: the label moves above its line */
@media (max-width: 40rem) {
  .weights__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* 8. Character set (M5): Paper tiles on Linen, a loupe in the signature Dragon Fire on Ink */
.charset {
  background: var(--linen);
  color: var(--ink);
  padding: 0 clamp(1rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem);
}

.charset__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid rgba(14, 14, 14, 0.15);
}

.charset__title {
  margin: 0 0 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Two columns on wide screens: the loupe on the left, the tiles on the right */
.charset__layout {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* The loupe: a jeweller's eyeglass for one character */
.loupe {
  position: sticky;      /* stays in view while you scroll through the tiles */
  top: 1.5rem;
  margin: 0;
  padding: 1.5rem;
  background: var(--ink);
  border-radius: 0.5rem;
  text-align: center;
}

.loupe__glyph {
  display: grid;
  place-items: center;
  aspect-ratio: 1;       /* always a square, whatever the character */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(7rem, 16vw, 13rem);
  line-height: 1;
  color: var(--flame);   /* Dragon Fire on Ink, 6.2 : 1 */
}

.loupe__caption {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--anise);   /* 15.2 : 1 on Ink */
}

.charset__group-title {
  margin: 2rem 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chili);
}
.charset__group-title:first-child { margin-top: 0; }

/* auto-fill: as many 3.5rem columns as fit, so the grid reflows by itself on any screen */
.charset__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: 0.375rem;
}

.tile {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(14, 14, 14, 0.12);
  border-radius: 0.25rem;
  cursor: pointer;
  transition:
    transform  200ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tile--alt { font-feature-settings: "ss01" 1; }   /* the alternate R */

.tile:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* The chosen tile: Ember on Anise, a house pairing (10.9 : 1) */
.tile[aria-pressed="true"] {
  background: var(--anise);
  color: var(--ember);
  border-color: var(--ember);
}

.tile:focus { outline: none; }
.tile:focus-visible {
  outline: 2px solid var(--chili);
  outline-offset: 2px;
}

/* Phones and small tablets: the loupe becomes a slim bar above the tiles that stays
   pinned to the top while you scroll, so a tapped tile always shows up in view */
@media (max-width: 48rem) {
  .charset__layout { grid-template-columns: 1fr; }
  .loupe {
    top: 0.5rem;
    z-index: 1;            /* sits above the tiles as they scroll underneath */
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .loupe__glyph { width: 7rem; font-size: 5.5rem; }
  .loupe__caption { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover { transform: none; }
}

/* 9. Dialogo (M6): a conversation on Ink. Canicule asks in Dragon Fire (6.2 : 1),
      Dialogo answers in Anise (15.2 : 1). */
.dialogo {
  background: var(--ink);
  color: var(--linen);
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem);
}

.dialogo__inner {
  max-width: 80rem;
  margin-inline: auto;
}

.dialogo__title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dialogo__credit {
  margin: 0 0 clamp(2rem, 6vw, 4rem);
  font-size: 0.875rem;
}

/* Every Dialogo word in the section. Its r follows the section's data-r (the "wire").
   line-height stays at 1.1 or more: a script's swashes reach up and down,
   and tighter lines make them collide (the typography skill's floor, too). */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  line-height: 1.1;
}

.dialogo[data-r="ss02"] .script { font-feature-settings: "ss02" 1; }  /* Cursive r */
.dialogo[data-r="ss03"] .script { font-feature-settings: "ss03" 1; }  /* Zhenya's r */
.dialogo[data-r="ss04"] .script { font-feature-settings: "ss04" 1; }  /* Felix's r */
/* data-r="normal" matches none of these, so the default r shows */

/* The conversation: the question sits left, the answer sits right, like a chat */
.chat {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: clamp(2rem, 6vw, 4rem);
}

.chat__line { margin: 0; }

.chat__who {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat__line--q {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 6rem);
  line-height: 1;
  text-transform: uppercase;   /* written "Who are you?" so screen readers don't spell it out */
  color: var(--flame);
}

.chat__line--a {
  justify-self: end;
  text-align: right;
  font-size: clamp(2.75rem, 9.5vw, 7rem);
  color: var(--anise);
}

/* The r picker: Linen outlines on Ink; the chosen one fills with Anise */
.rpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
}

.rpick__label { font-size: 0.875rem; }

.rpick__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rpick__btn {
  min-height: 2.75rem;          /* 44px: a comfortable tap target */
  padding: 0.5rem 1.125rem;
  font: 500 1rem/1.2 var(--font-body);
  color: var(--linen);
  background: transparent;
  border: 1.5px solid rgba(244, 244, 242, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background   200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color        200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rpick__btn:hover { border-color: var(--linen); }

.rpick__btn[aria-pressed="true"] {
  background: var(--anise);     /* Ink on Anise, 15.2 : 1 */
  border-color: var(--anise);
  color: var(--ink);
}

.rpick__btn:focus { outline: none; }
.rpick__btn:focus-visible {
  outline: 2px solid var(--anise);
  outline-offset: 3px;
}

/* In use: four square cards, each a house pairing */
.inuse__title {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inuse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.card {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border-radius: 0.5rem;
}

.card__tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card__text {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  line-height: 1.1;
}

.card__can {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3em;
  line-height: 1;
  text-transform: uppercase;
}

.card--linen { background: var(--linen); color: var(--chili); }   /* 7.4 : 1, Emma's favourite for Dialogo */
.card--chili { background: var(--chili); color: var(--linen); }   /* 7.4 : 1 */
.card--anise,
.card--flame { border: 1px solid rgba(244, 244, 242, 0.2); }
.card--anise { color: var(--anise); }                             /* 15.2 : 1 on Ink */
.card--flame { color: var(--flame); }                             /* 6.2 : 1 on Ink */

/* Phones: the four r buttons sit in a neat 2 x 2 block, and the cards turn landscape
   so a square card isn't mostly empty space */
@media (max-width: 40rem) {
  .rpick__btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .card { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .rpick__btn { transition: none; }
}

/* 10. Sign-off (M7): the ghost sign on Ink. Settings chosen in the footer playground:
       ghost weight 190; Dialogo 520 in Glow (10.9 : 1 on Ink) at 11vw, tucked up under the ghost. */
.signoff {
  background: var(--ink);
  color: var(--linen);
  /* small top padding: the Dialogo section above is Ink too and already ends with plenty of space */
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 5vw, 4rem) 2.5rem;
  text-align: center;
}

.signoff__inner {
  max-width: 80rem;
  margin-inline: auto;
}

/* Ghost text: Ink letters on Ink, shown only by a hairline Linen edge. Decoration only,
   so the HTML hides it from screen readers (aria-hidden). */
.signoff__ghost {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 190;
  font-size: clamp(1.75rem, 10.6vw, 12rem);   /* min lowered so it fits a 320px screen (accessibility review) */
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: -1.5px 0 0 var(--linen);
}

/* Emma's nudge of -23% in the playground moved the word up by about a quarter of its own height.
   Here that becomes a negative top margin in em, so the line below moves up with it
   (a transform only moves how it looks; a margin moves the real box). */
.signoff__soon {
  margin: -0.35em 0 0;
  font-family: var(--font-script);
  font-weight: 520;
  font-size: clamp(2.75rem, 11vw, 12.5rem);
  line-height: 1.1;
  color: var(--glow);
}

.signoff__line {
  margin: 1.25rem auto clamp(2.5rem, 6vw, 4rem);
  max-width: 46rem;                /* one line on a laptop, as in the playground */
  text-wrap: balance;              /* when it does wrap (phones), the two lines come out even */
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
  color: var(--anise);             /* 15.2 : 1 on Ink */
}

.credits {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 244, 242, 0.2);
  display: grid;
  gap: 0.5rem;
}

.credits__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  font-size: 0.875rem;
}

.credits a {
  color: var(--anise);
  text-underline-offset: 3px;
}

.credits a:hover { color: var(--glow); }

.credits a:focus { outline: none; }
.credits a:focus-visible {
  outline: 2px solid var(--anise);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Phones: one credit per line, like the playground's phone view */
@media (max-width: 40rem) {
  .credits__row { flex-direction: column; gap: 0.5rem; }
}