/* =========================================================
   Project: Checco.co.uk | UK Domain Name Landing Page
   Author: Sunny Assist (Giada)
   Role: UI/UX Design and Front-End Development
   Technologies: HTML5, CSS3, local fonts and SVG artwork
   Last updated: 2026-11-13

   Shared styles come first. Sections follow the page order.
   Screen breakpoints are grouped at the end, widest first.
   Print layout is maintained separately in css/print.css.
   ========================================================= */

/* 01 · Local typefaces
   ========================================================= */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/checco-symbols.woff") format("woff");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+2191, U+2193, U+2197, U+2726;
}

@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/noto-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/noto-serif-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* 02 · Design tokens and base styles
   ========================================================= */

:root {
  --blue: #091b74;
  --frame-radius: .42rem;
  --frame-top: 5px;
  --blue-deep: #071347;
  --yellow: #ffdf70;
  --gold: #ffd454;
  --cream: #fff9e8;
  --paper: #fffdf5;
  --line: #cfc7a6;
  --ink: #121b3c;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Open Sans", system-ui, sans-serif;
  --body-type: "Noto Serif", var(--sans);
  --detail-copy-size: clamp(1.08rem, 1.35vw, 1.19rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.075rem/1.6 var(--body-type);
}

a {
  color: inherit;
  text-underline-offset: .19em;
}

a:focus-visible {
  outline: .19rem solid var(--focus-color, #b84100);
  outline-offset: .23rem;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, p, figure, dl, dd {
  margin: 0;
}

h3 {
  text-wrap: balance;
}

.wrap {
  width: min(100% - 4rem, 76rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  z-index: 2;
  top: .5rem;
  left: .5rem;
  padding: .5rem 1rem;
  background: var(--yellow);
  color: var(--blue);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* 03 · Shared labels and buttons
   ========================================================= */

.label {
  font: 800 var(--label-size, .72rem)/1.35 var(--sans);
  letter-spacing: var(--label-spacing, .115em);
  text-transform: uppercase;
}

.site-header, .topline {
  font-family: var(--sans);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--button-gap, .7rem);
  min-height: var(--button-height, 2.7rem);
  padding: var(--button-padding, .63rem .9rem);
  border: 1px solid var(--button-border, transparent);
  text-decoration: none;
}

.topline a, .hero-ticket, .offer-buy, .footer-top {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .025em;
}

/* 04 · Sale banner and site header
   ========================================================= */

.topline {
  background: var(--yellow);
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.topline-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.6rem;
}

.topline-inner::before {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: #091b7440;
}

.topline-motto {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: italic 700 1.05rem/1.2 var(--serif);
}

.topline-motto svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
}

.topline a {
  --topline-link-inset: .55rem;
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  justify-content: flex-end;
  /* Keep the arrow on the shared right edge, with room around it on hover. */
  margin-inline-end: calc(-1 * var(--topline-link-inset));
  padding-inline: var(--topline-link-inset);
  border-radius: .25rem;
  font-size: .92rem;
  text-align: right;
  text-decoration: none;
}

.topline-arrow {
  position: relative;
  flex: none;
  width: .7em;
  height: .7em;
  color: inherit;
}

.topline-arrow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: .42em;
  height: .42em;
  border-top: 2px solid;
  border-right: 2px solid;
}

.topline-arrow::after {
  content: "";
  position: absolute;
  width: .8em;
  height: 2px;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.topline a:is(:hover, :focus-visible) {
  background: var(--blue);
  color: var(--cream);
}

.site-header {
  background: var(--cream);
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 5.15rem;
}

.header-logo, .footer-logo {
  display: block;
  width: 8.3rem;
  text-align: center;
  text-decoration: none;
}

.header-logo span, .footer-logo span {
  display: block;
  margin-top: .18rem;
  font: 800 .55rem/1.2 var(--sans);
  letter-spacing: .19em;
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.header-nav a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .9rem;
  min-height: 2.85rem;
  text-decoration: none;
}

.header-nav a + a {
  border-left: 1px solid #091b7433;
}

.header-nav a:hover {
  background: #fff1ba;
  text-decoration: underline;
}

.header-nav a span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: var(--yellow);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}

.header-note {
  justify-self: end;
  padding-left: .75rem;
  border-left: 2px solid var(--yellow);
  font: italic 700 1rem/1.08 var(--serif);
  text-align: left;
}

/* 05 · Hero and domain highlights
   ========================================================= */

.hero {
  --focus-color: #fff;
  background: var(--blue);
  color: var(--cream);
}

.hero, .section {
  padding-block: clamp(1.55rem, 2.6vw, 2.7rem);
}

.hero-grid {
  --hero-action-height: calc(2.9rem + 2px);
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  align-items: end;
  column-gap: clamp(1.4rem, 3.2vw, 3.15rem);
}

.hero-label {
  margin-bottom: .55rem;
  text-align: right;
  color: var(--cream);
  font: 700 clamp(1.4rem, 2.55vw, 2.1rem)/1.08 var(--serif);
}

.hero-copy {
  display: grid;
  justify-items: start;
  gap: clamp(1.15rem, 1.75vw, 1.4rem);
}

.hero-brand {
  width: 100%;
}

.hero-logo {
  width: clamp(14rem, 68%, 22rem);
}

.wordmark-caption {
  color: var(--yellow);
  margin: .24rem 0 0;
  padding-left: .28rem;
  font: 800 .74rem/1.35 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 20ch;
  font: 700 clamp(2.13rem, 4vw, 3.8rem)/1.055 var(--serif);
  letter-spacing: -.018em;
  text-wrap: balance;
}

.hero-line {
  color: var(--yellow);
  font: italic 700 clamp(1.25rem, 2vw, 1.65rem)/1.19 var(--serif);
}

.hero-detail {
  max-width: 48ch;
  font-size: clamp(1.08rem, 1.65vw, 1.24rem);
  line-height: 1.3;
  letter-spacing: .012em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.hero-ticket {
  --button-gap: .9rem;
  --button-padding: 0 0 0 .95rem;
  position: relative;
  background: var(--yellow);
  color: var(--blue);
  border-radius: .38rem;
  font-size: 1rem;
}

.hero-ticket span {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  min-height: 2.9rem;
  border-left: 1px dashed currentColor;
  font-size: 1rem;
}

.hero-ticket::before, .hero-ticket::after {
  content: "";
  position: absolute;
  right: 2.55rem;
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  background: var(--blue);
}

.hero-ticket::before {
  top: -.26rem;
}

.hero-ticket::after {
  bottom: -.26rem;
}

.hero-ticket:hover {
  background: var(--cream);
}

.hero-menu-link {
  position: relative;
  isolation: isolate;
  --button-height: 2.75rem;
  --button-padding: 0;
  margin-inline-start: auto;
  color: var(--cream);
  font: italic 700 1.08rem/1.2 var(--serif);
}

.hero-menu-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 .85rem/1 var(--sans);
}

.hero-menu-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .34rem -.4rem;
  border-radius: .25rem;
}

.hero-menu-link:is(:hover, :focus-visible) {
  color: var(--blue);
}

.hero-menu-link:is(:hover, :focus-visible)::before {
  background: var(--gold);
}

.hero-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--frame-radius) var(--frame-radius) 0 0;
}

.hero-figure figcaption, .table-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.hero-figure figcaption {
  gap: .15rem 1rem;
  min-height: var(--hero-action-height);
  padding: .15rem .75rem;
  background: var(--blue-deep);
  border-radius: 0 0 var(--frame-radius) var(--frame-radius);
  color: var(--cream);
}

.storefront-caption {
  padding-inline-start: .55rem;
  border-inline-start: 2px solid var(--yellow);
  font: 400 .95rem/1.3 var(--body-type);
}

.ribbon {
  background: var(--gold);
  color: var(--blue);
  border-bottom: 1px solid var(--line);
}

.ribbon-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 0;
  padding: .9rem 0;
  list-style: none;
}

.ribbon-inner li {
  display: grid;
  align-content: start;
  gap: .36rem;
  padding: .32rem clamp(.75rem, 1.7vw, 1.55rem);
  text-align: left;
}

.ribbon-inner li + li {
  box-shadow: inset 1px 0 #091b7466;
}

.ribbon-inner strong {
  font: 700 clamp(1.28rem, 2.2vw, 2.05rem)/1.08 var(--serif);
}

.ribbon-inner span {
  font-size: 1rem;
  line-height: 1.45;
}

/* 06 · Shared section layouts and typography
   ========================================================= */

.section-intro {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  gap: 1.35rem var(--section-intro-column-gap, clamp(2rem, 8vw, 7rem));
  margin-bottom: 1.7rem;
}

.section h2 {
  color: var(--section-heading-color, var(--blue));
  font: 700 clamp(2.2rem, 4.3vw, 4.25rem)/1.01 var(--serif);
  letter-spacing: -.045em;
}

/* 07 · The café concept
   ========================================================= */

.translation {
  color: var(--blue);
  margin-top: .35rem;
  font: italic 1.18rem/1.35 var(--serif);
}

.story-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
  padding: .22rem .75rem .22rem .25rem;
  border: 1px solid var(--blue);
  border-radius: 1.5rem;
  background: var(--yellow);
  color: var(--blue);
  --label-size: .91rem;
  --label-spacing: .07em;
}

.story-kicker > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
  font-size: .72rem;
}

.story-note {
  max-width: 54ch;
  padding: 1.05rem clamp(1rem, 2vw, 1.45rem) 1.15rem;
  border: 1px solid var(--blue);
  border-top-width: var(--frame-top);
  border-radius: var(--frame-radius);
  background: #fff6d7;
  color: var(--blue);
}

.story-lead {
  color: var(--blue);
  font: 700 clamp(1.35rem, 2vw, 1.78rem)/1.15 var(--serif);
  text-wrap: balance;
}

.story-lead::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-top: .7rem;
  background: var(--gold);
}

.story-note p + p {
  margin-top: .65rem;
}

.table-figure {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--cream);
}

.table-figure img {
  width: 100%;
}

.table-figure figcaption {
  gap: .4rem 1.15rem;
  padding: .75rem .9rem;
  font: 800 .95rem/1.65 var(--sans);
  letter-spacing: .02em;
}

.table-caption-title {
  color: var(--gold);
  font: 700 clamp(1.15rem, 1.8vw, 1.46rem)/1.1 var(--serif);
}

.table-figure mark {
  padding: .1em .3em;
  border-radius: .2em;
  background: var(--gold);
  color: var(--blue);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.1rem;
}

.day-grid article {
  padding: .8rem 1rem 1rem;
  border: 1px solid var(--blue);
  border-top-width: 5px;
  border-radius: .65rem;
  background: var(--cream);
  color: var(--blue);
}

.day-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
}

.day-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  margin-inline-start: auto;
  border-radius: .55rem;
  background: var(--blue);
  color: var(--cream);
}

.day-card-icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.day-grid .label {
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: .2rem;
  background: var(--gold);
  color: var(--blue);
  --label-size: .82rem;
  --label-spacing: .065em;
}

.day-grid h3 {
  font: 700 1.65rem/1.15 var(--serif);
  color: var(--blue);
  margin-block: .65rem .45rem;
}

.day-grid h3 + p {
  text-wrap: balance;
  border-top: 1px solid #091b7433;
  padding-top: .5rem;
}

/* 08 · The visual identity
   ========================================================= */

.identity {
  background: #fff1ba;
}

#identity-title > span:not(.identity-title-last) {
  display: inline-block;
}

#identity-title > .identity-title-last {
  display: block;
  text-wrap: balance;
}

.logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.logo-grid figure {
  border: 1px solid var(--blue);
  background: var(--paper);
  color: var(--blue);
}

.logo-grid img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.logo-grid figcaption {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  font: 700 clamp(1rem, 1.6vw, 1.25rem)/1.2 var(--serif);
}

.logo-index {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.85em;
  min-height: 1.85em;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.palette {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.2rem;
  margin-top: .85rem;
  color: var(--blue);
}

.palette > span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.1rem;
}

.palette b {
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.swatch {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--blue);
}

.swatch-blue {
  background: var(--blue);
}

.swatch-yellow {
  background: var(--yellow);
}

.detail-heading {
  margin-block: clamp(2.45rem, 4.8vw, 4rem) .95rem;
  color: var(--blue);
  font: 700 clamp(1.45rem, 2.2vw, 2.05rem)/1.05 var(--serif);
  letter-spacing: -.025em;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.details-grid figure {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--blue);
  border-radius: var(--frame-radius);
  background: var(--blue);
}

.details-grid img {
  width: 100%;
  aspect-ratio: 1.4;
  object-fit: cover;
}

.details-grid figcaption {
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: .9rem;
  color: var(--cream);
  font: 400 var(--detail-copy-size)/1.5 var(--body-type);
}

.details-grid strong {
  color: var(--yellow);
  font: 700 1.25rem/1.15 var(--serif);
}

/* 09 · The domain offer
   ========================================================= */

.sale {
  --section-heading-color: var(--yellow);
  background: var(--blue);
  color: var(--cream);
}

.sale-grid {
  display: grid;
  grid-template-columns: 1fr minmax(21rem, .75fr);
  align-items: stretch;
  gap: 1.65rem clamp(2rem, 7vw, 7rem);
}

.sale-lead {
  max-width: 34ch;
  margin-top: .75rem;
  color: #fff;
  font: italic 700 clamp(1.25rem, 2vw, 1.65rem)/1.2 var(--serif);
}

.sale-scope {
  max-width: 48ch;
  margin-top: 1.15rem;
  padding: .55rem 0 .55rem .85rem;
  border-inline-start: 2px solid var(--yellow);
  font: 400 var(--detail-copy-size)/1.5 var(--body-type);
}

.sale-scope strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--yellow);
  font: 700 1.25rem/1.15 var(--serif);
}

.offer-card {
  display: flex;
  flex-direction: column;
  background: var(--yellow);
  color: var(--blue);
  padding: clamp(1.15rem, 3vw, 2.3rem);
  outline: 1px solid var(--blue);
  outline-offset: -.45rem;
}

.offer-card .label {
  --label-size: .88rem;
  --label-spacing: .07em;
}

.offer-card h3 {
  font: 700 clamp(1.9rem, 3.4vw, 3.55rem)/1.1 var(--serif);
  letter-spacing: -.045em;
  margin-top: .4rem;
  overflow-wrap: anywhere;
}

.offer-card dl {
  display: grid;
  flex: 1;
  grid-template-rows: 1fr 1fr 1.25fr;
  margin: 1rem 0 1.1rem;
  border-top: 1px solid var(--blue);
  font-size: .94rem;
}

.offer-card dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding-block: .5rem;
  border-bottom: 1px solid #091b744d;
}

.offer-card dl div:not(.offer-price) dd {
  font-weight: 750;
}

.offer-price dd {
  font: 700 clamp(1.25rem, 2.5vw, 2rem)/1.1 var(--serif);
}

.offer-buy {
  --button-height: 3rem;
  background: var(--blue);
  color: var(--cream);
  border-radius: .38rem;
  font-size: 1rem;
}

.offer-buy span {
  font-size: 1.15em;
}

.offer-buy:is(:hover, :focus-visible) {
  background: var(--cream);
  color: var(--blue);
  border-color: var(--blue);
}

/* 10 · Concept Harbour
   ========================================================= */

.collection {
  --section-intro-column-gap: clamp(2rem, 5vw, 5rem);
  background: var(--cream);
}

#collection-title > span {
  display: block;
  text-wrap: balance;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.collection-grid > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  text-decoration: none;
  color: var(--blue);
  padding: clamp(.95rem, 1.8vw, 1.25rem);
  border: 1px solid var(--blue);
  background: var(--paper);
}

.collection-grid > a:is(:hover, :focus-visible) {
  background: var(--yellow);
}

.collection-tag {
  display: flex;
  align-items: center;
  gap: .5rem;
  --label-size: .85rem;
  --label-spacing: .065em;
}

.collection-index {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: var(--yellow);
  letter-spacing: 0;
}

.collection-grid strong {
  font: 700 clamp(1.75rem, 2.45vw, 2.2rem)/1.1 var(--serif);
}

.collection-link {
  padding-top: .45rem;
  margin-top: auto;
  font-size: .87rem;
  font-weight: 750;
  text-decoration: underline;
}

/* 11 · Site footer
   ========================================================= */

.footer {
  --focus-color: #fff;
  background: var(--blue-deep);
  color: var(--cream);
  padding-block: clamp(1.5rem, 2.5vw, 2.3rem);
  border-top: 4px solid var(--yellow);
  font: 400 .94rem/1.5 var(--sans);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #ffffff49;
}

.footer-logo {
  color: var(--yellow);
}

.footer-summary {
  text-align: center;
}

.footer-summary strong {
  display: block;
  margin-bottom: .15rem;
  color: var(--yellow);
  font-size: .92rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.footer-top {
  --button-border: #fff9e89e;
  justify-self: end;
  border-radius: .38rem;
  font-size: 1rem;
}

.footer-top:hover {
  background: var(--cream);
  color: var(--blue);
}

.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1.25rem;
  margin-top: 1rem;
  text-align: center;
}

.footer-credit a {
  color: var(--yellow);
}

.footer-credit a:is(:hover, :focus-visible) {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.footer-crafted {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
}

.footer-crafted svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.footer-notes {
  max-width: 120ch;
  margin: .95rem auto 0;
  font-size: .88rem;
  line-height: 1.6;
  text-align: center;
}

.footer-notes p + p {
  margin-top: .45rem;
}

.footer-notes p:nth-child(3) {
  margin-top: .75rem;
}

/* 12 · Screen breakpoints and reduced motion
   ========================================================= */

@media (max-width: 980px) {
  .wrap {
    width: calc(100% - 3rem);
  }
}

@media (max-width: 740px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-grid {
    grid-template-columns: 1fr;
    gap: .58rem;
  }

  .ribbon-inner {
    grid-template-columns: 1fr;
    padding-block: .25rem;
  }

  .ribbon-inner li {
    padding: .65rem 0;
  }

  .ribbon-inner li + li {
    box-shadow: inset 0 1px #091b7466;
  }

  .wrap {
    width: calc(100% - 2rem);
  }

  .hero-grid, .section-intro, .sale-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 1.65rem;
  }

  .section-intro {
    gap: .85rem;
  }

  .details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .header-note {
    display: none;
  }

  .header-nav {
    font-size: .92rem;
  }

  .header-nav a {
    padding-inline: .6rem;
  }

  .header-logo, .footer-logo {
    width: 7.2rem;
  }
}

@media (max-width: 540px) {
  .footer-main {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .75rem;
  }

  .footer-top {
    justify-self: center;
  }

  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding-block: .65rem .35rem;
  }

  .header-nav {
    align-self: stretch;
    justify-content: space-between;
    font-size: .8rem;
  }

  .header-nav a {
    gap: .3rem;
    padding: .25rem .38rem;
  }

  .header-nav a:first-child {
    padding-left: 0;
  }

  .header-nav a span {
    width: 1.3rem;
    height: 1.3rem;
    font-size: .62rem;
  }
}

@media (max-width: 500px) {
  .topline-inner {
    gap: .5rem;
    min-height: 2.35rem;
  }

  .topline-inner::before {
    display: none;
  }

  .topline-motto {
    font-size: .85rem;
    gap: .26rem;
  }

  .topline-motto svg {
    width: 1rem;
    height: 1rem;
  }

  .topline a {
    font-size: .8rem;
    gap: .25rem;
  }

  .hero-figure figcaption {
    column-gap: .55rem;
  }

  .collection-grid {
    grid-template-columns: 1fr;
    gap: .58rem;
  }

  .logo-grid {
    gap: .6rem;
  }

  .logo-grid figcaption {
    padding: .55rem;
    gap: .35rem;
  }

  .logo-grid img {
    aspect-ratio: auto;
  }

  .details-grid figcaption {
    padding: .7rem;
  }
}

@media (max-width: 430px) {
  .details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .logo-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}