/* ==========================================================================
   String Frame — Page-level layout
   One block per template, in the order of the page list.
   ========================================================================== */

/* --- Shared: hero band ---------------------------------------------------- */

.hero {
  position: relative;
  background: var(--surface);
  border-bottom: var(--bw) solid var(--rule);
  overflow: hidden;
}
.hero .inner { position: relative; padding: var(--pt) var(--pad-x) var(--pb); }

.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr 560px; gap: 60px; }
}
/* The hero picture takes whatever slack the headline does not need.

   The binding constraint is the headline's SECOND authored line, "into string
   art." It must not wrap: breaking it would split the cobalt phrase and orphan
   "ART." on a line of its own. (The first line already wraps, and is fine doing
   so.) Measured at 82px caps, that line needs a 649px column — below which the
   headline goes from three rendered lines to four.

   649px is a floor, not a ratio, so the only way to widen the picture is to
   take the space from the gap: at 1440px the columns plus gap share 1305px, so
   a 40px gap leaves 616px for the figure against 596px at the original 60px.
   612px is that ceiling with a little margin for font-rendering variance.

   Going meaningfully wider than this means changing the headline — a smaller
   hero type size, or re-breaking it into shorter authored lines. Below 1400px
   there is no slack at all, so the figure stays at its original 560px. */
@media (min-width: 1400px) {
  .hero-grid { grid-template-columns: 1fr 612px; gap: 40px; }
}

.hero-figure {
  position: relative;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--cobalt-tint);
  height: 460px;
  overflow: hidden;
}
/* UNUSED since 12 Sep 2026: was the macro figure beside the Materials list on
   How it's made, which the client made text only. Kept as a plain height
   modifier for any future figure. */
.hero-figure--420 { height: 420px; }
/* Square bed for a square product photograph: the whole framed piece shows,
   with no crop and no letterboxing. Currently unused — the hero moved to
   --wide when it took the 2:1 Family picture. Kept for square hero artwork. */
.hero-figure--square { aspect-ratio: 1; height: auto; }
/* Wide bed, matched to the 2:1 picture it holds (115 x 57 cm). The photograph
   is the framed piece edge to edge, so a square bed would crop the frame off
   both sides — the bed takes the picture's shape instead of the reverse. */
.hero-figure--wide { aspect-ratio: 2 / 1; height: auto; }
/* No outer box: the photograph already contains a picture frame. */
.hero-figure--bare {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hero-figure__motif {
  position: absolute;
  inset: 0;
  background: url("../svg/motif-quarter.svg") right bottom / 78% auto no-repeat;
  opacity: .5;
}
.hero-figure__motif--85 { background-size: 85% auto; opacity: .6; }
@media (max-width: 767px) {
  .hero-figure, .hero-figure--420 { height: 300px; }
  .hero-figure--square, .hero-figure--wide { height: auto; }
}

/* --- Home: configurator teaser -------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Both panes are transparent, so they sit on the page's own paper like the rest
   of this band. They used to carry a cream wall colour matched to the old
   product photography; the current pictures are framed renders on white, so the
   cream read as a band of colour the section did not otherwise have. */
/* Deliberately NOT a grid. As a grid the single row is auto-sized, so a child's
   percentage height resolves against the row's content height rather than the
   pane's 300px — the image then overflows and sits off-centre. Keeping the pane
   a plain positioned block makes 300px definite, so percentages behave. */
.compare__pane {
  position: relative;
  height: 300px;
  background-color: transparent;
}
.compare__pane--tint { background-color: var(--cobalt-tint); }

/* The preview photograph fills its half edge to edge (the default cover). Do not
   switch it to contain: the shot is square in a 314x300 bed, so contain leaves a
   background band down both sides and the frame reads as inset and off-centre.
   The framed piece is centred within the shot and cover crops only ~7px top and
   bottom, so nothing of it is lost.

   The uploaded photo is the exception — it sits on the flat wall colour, scaled
   to about the artwork inside the frame opposite so the two read as one picture
   before and after. Sized as an explicit box rather than `width: auto`, so the
   layout never depends on the image's intrinsic dimensions. */
/* Both panes letterbox their picture (the uploaded photo is sized to 80%, the
   framed result is contained), and both must letterbox onto the pane's own wall
   colour — not the grey that .img-contain carries elsewhere — or the two halves
   stop reading as one continuous scene. */
.compare__pane .img-contain,
.compare__pane .img-cover { background: transparent; }

.compare__pane--upload .img-cover {
  position: absolute;
  inset: 0;
  margin: auto;          /* centres against the pane's definite 314x300 box */
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.compare__foot {
  border-top: var(--bw) solid var(--rule);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 767px) { .compare__pane { height: 200px; } }

.numbered {
  display: grid;
  gap: 14px;
  max-width: 460px;
}
.numbered > li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  list-style: none;
  font: 400 16px/1.5 var(--font-body);
}
.numbered__n {
  font: 500 15px/1.4 var(--font-display);
  color: var(--cobalt);
  min-width: 22px;
}

/* --- Home: formats shown to scale ----------------------------------------- */

.formats {
  display: grid;
  gap: 28px;
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .formats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .formats { grid-template-columns: 1fr 1fr 1fr 2fr; } }

/* The four formats read as bare photographs at their relative sizes: no grey
   panel behind them, no outlined box around them. The stage supplies only the
   height that keeps the row aligned.

   Proof sizes are the real panel dimensions at a single scale, 2.591 px/cm, so
   the row is a true size comparison rather than four arbitrary boxes:
     57 x 42 -> 148 x 109    57 x 81 -> 148 x 210  (portrait)
     57 x 57 -> 148 x 148   115 x 57 -> 298 x 148
   Every format shares the 57 cm side, so all four proofs are 148px on that axis
   and only the other dimension changes — which is exactly what makes the row
   read as one panel turned and stretched rather than four unrelated pictures.
   The proofs sit on the bed's floor rather than centred: pictures standing on a
   shelf. The bed must clear the tallest proof, so 210px + breathing room. */
.format__bed {
  display: grid;
  place-items: end center;
  height: 230px;
}
.format__proof {
  width: 148px;
  height: 109px;
}
.format__proof--sq   { width: 148px; height: 148px; }
.format__proof--tall { width: 148px; height: 210px; }
.format__proof--lg   { width: 298px; height: 148px; }

/* Size, nail count and price sit centred under their own frame. The bed centres
   the proof horizontally in its column, so centring the body puts text and
   photograph on the same axis at every column width. Left-aligned, the text
   drifted further off-centre the wider the format got: 69px on the small,
   172px on the large. */
.formats .card__body { text-align: center; }

/* --- Home: reviews carousel ----------------------------------------------- */

.review-slide { display: none; }
.review-slide[data-active="true"] { display: block; }
.review__quote {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(30px * var(--ds-lg));
  line-height: 1.35;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.review__score {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(76px * var(--ds-xl));
  line-height: 1;
  letter-spacing: -.02em;
}
.review__name { display: block; font: 500 15px/1.2 var(--font-body); }
.review__meta { display: block; margin-top: 4px; font: 400 13px/1.2 var(--font-body); color: var(--text-caption); }
.review__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--rule);
  background: var(--cobalt-tint);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.review__avatar svg path { stroke: var(--cobalt); }
.review-counter {
  display: grid;
  place-items: center;
  padding-left: 8px;
  font: 400 15px/1 var(--font-mono);
  color: var(--text-caption);
}

/* --- Home / FAQ: grouped accordion clusters ------------------------------- */

.faq-clusters { display: grid; gap: 44px; }
.faq-cluster__title {
  font: 500 12px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 14px;
}

/* --- Configurator --------------------------------------------------------- */

.embed {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.embed__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--paper);
}
.embed__bar--top { border-bottom: var(--bw) solid var(--rule); }
.embed__bar--bottom { border-top: var(--bw) solid var(--rule); }
.embed__label {
  font: 500 13px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* The configurator itself is external — this is the container and its
   loading state only. Height is fixed here and handed to iframe-resizer
   at integration time. */
.embed__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 660px;
  background: var(--paper);
  overflow: hidden;
}
.embed__stage > iframe { width: 100%; height: 100%; border: 0; }
.embed__motif {
  position: absolute;
  width: 520px;
  height: 320px;
  background-image: url("../svg/motif-loader.svg");
  background-repeat: no-repeat;
}
.embed__motif--bl { left: 0; bottom: 0; background-position: left bottom; background-size: contain; opacity: .55; }
.embed__motif--tr { right: 0; top: 0; background-position: right top; background-size: contain; opacity: .35; transform: rotate(180deg); }
.embed__loading { position: relative; text-align: center; max-width: 420px; padding: 0 20px; }
@media (max-width: 767px) { .embed__stage { height: 480px; } }

/* Pricing-by-size table */
@media (min-width: 900px) {
  .dtable--pricing .dtable__head,
  .dtable--pricing .dtable__row { grid-template-columns: 1.2fr 1fr 1fr 1fr .9fr; }
  .dtable--pricing .dtable__row > * { padding: 20px; }
}

/* Shipping rates table */
@media (min-width: 900px) {
  .dtable--rates .dtable__head,
  .dtable--rates .dtable__row { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Stacked table rows below the grid breakpoint. */
@media (max-width: 899px) {
  .dtable--pricing .dtable__head,
  .dtable--rates .dtable__head { display: none; }
  .dtable--pricing .dtable__row,
  .dtable--rates .dtable__row { display: block; padding: 6px 0; }
  .dtable--pricing .dtable__row > *,
  .dtable--rates .dtable__row > * {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    text-align: left;
  }
  .dtable--pricing .dtable__row > *[data-label]::before,
  .dtable--rates .dtable__row > *[data-label]::before {
    content: attr(data-label);
    font: 500 12px/1.6 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-caption);
  }
  .dtable--pricing .num, .dtable--rates .num { text-align: left; }
}

/* --- Shop ----------------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-group__label {
  font: 500 12px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-caption);
}
.filter-sets {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.pagination {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pagination__count { font: 400 14px/1 var(--font-mono); color: var(--text-caption); }

/* --- Product detail ------------------------------------------------------- */

.gallery__main {
  position: relative;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--cobalt-tint);
  height: 620px;
  overflow: hidden;
}
.gallery__main-motif {
  position: absolute;
  inset: 0;
  background: url("../svg/motif-poster.svg") center / cover no-repeat;
  opacity: .65;
}
.gallery__thumbs {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery__thumb {
  height: 119px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background-color: var(--surface);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.gallery__thumb:hover { border-color: var(--cobalt); }
/* The selected thumb reads as selected, not merely hovered. */
.gallery__thumb[aria-current="true"] {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px var(--cobalt-tint);
}
.gallery__thumb--ink  { background-color: var(--ink); }
.gallery__thumb--tint { background-color: var(--cobalt-tint); }
@media (max-width: 767px) {
  .gallery__main { height: 380px; }
  .gallery__thumb { height: 84px; }
}

.buybar {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.buybar .btn { flex: 1; }

.timelapse-note {
  display: flex;
  align-items: center;
  gap: 18px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 22px;
}
.timelapse-note__title { display: block; font: 500 17px/1.2 var(--font-display); }
.timelapse-note__text {
  display: block;
  margin-top: 5px;
  font: 400 14px/1.45 var(--font-body);
  color: var(--text-on-ink-muted);
}
.timelapse-note__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--cobalt);
  display: grid;
  place-items: center;
}

.option-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Cart ----------------------------------------------------------------- */

@media (min-width: 900px) {
  .cart-table .dtable__head,
  .cart-line { display: grid; grid-template-columns: 1fr 140px 130px 120px; align-items: center; }
  .cart-line > * { padding: 20px; }
}
.cart-line { border-bottom: var(--bw) solid var(--rule-soft); }
.cart-line:last-of-type { border-bottom: 0; }
.cart-line__product {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
}
.cart-line__thumb {
  width: 88px;
  height: 66px;
  flex: 0 0 auto;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}
.cart-line__price,
.cart-line__total { font: 500 18px/1 var(--font-display); }
.cart-line__total { text-align: right; }
.cart-voucher {
  border-top: var(--bw) solid var(--rule);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--paper);
}
.cart-voucher .input { flex: 1; min-width: 200px; max-width: 320px; padding: 13px 14px; font-size: 15px; }

@media (max-width: 899px) {
  .cart-table .dtable__head { display: none; }
  .cart-line { display: block; padding-bottom: 12px; }
  .cart-line > * { padding: 0 20px 12px; }
  .cart-line__product { padding: 20px 20px 12px; }
  .cart-line__price::before,
  .cart-line__total::before {
    content: attr(data-label) " ";
    font: 500 12px/1.6 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-caption);
  }
  .cart-line__total { text-align: left; }
}

/* --- Checkout ------------------------------------------------------------- */

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/1 var(--font-body);
  color: var(--text-caption);
  flex-wrap: wrap;
}
.checkout-steps__sep { color: var(--disabled-border); }
.checkout-steps__now { color: var(--cobalt); }

.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid--20 { gap: 20px; }
.form-grid__full { grid-column: 1 / -1; }

.address { font-style: normal; line-height: 1.6; }

.order-line {
  display: flex;
  gap: 14px;
  align-items: center;
}
.order-line__thumb {
  width: 64px;
  height: 48px;
  flex: 0 0 auto;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}

.order-line__body { flex: 1; }
.order-line__name { display: block; font: 500 15px/1.3 var(--font-body); }
.order-line__meta { display: block; margin-top: 3px; font: 400 13px/1.3 var(--font-body); color: var(--text-caption); }

.deflist--ruled {
  padding-top: 20px;
  border-top: var(--bw) solid var(--rule-soft);
}

.summary__notes {
  margin-top: 20px;
  padding-top: 18px;
  border-top: var(--bw) solid var(--rule-soft);
  display: grid;
  gap: 10px;
  font: 400 14px/1.4 var(--font-body);
  color: var(--text-muted);
}

.summary__total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--bw) solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.summary__total-value {
  font: 500 32px/1 var(--font-display);
  color: var(--cobalt);
}

/* --- How it's made: process rows ------------------------------------------ */

/* Text only, one column. Each row used to pair a 300px photograph with its copy
   (`.process-row__media`, a 2-column grid above 800px); the photographs were
   dropped on 12 September 2026 and the step is now the number, the heading and
   the paragraph. The rows keep their card border so the four steps still read
   as four blocks rather than one run of prose. */
.process-row { overflow: hidden; }
.process-row__body { padding: 30px 24px; }
@media (min-width: 800px) { .process-row__body { padding: 30px 34px; } }

/* --- Gift voucher --------------------------------------------------------- */

.voucher {
  position: relative;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--text-on-ink);
  overflow: hidden;
  padding: 40px 28px 32px;
}
@media (min-width: 800px) { .voucher { padding: 56px 48px 48px; } }
.voucher__amount {
  margin-top: 48px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(96px * var(--ds-xl));
  line-height: .92;
  letter-spacing: -.02em;
}
@media (min-width: 800px) { .voucher__amount { margin-top: 72px; } }
.voucher__code {
  font: 400 13px/1.6 var(--font-mono);
  color: var(--text-on-ink-cap);
}
.voucher__code strong {
  display: block;
  color: var(--text-on-ink);
  font-size: 16px;
  font-weight: 400;
}
.voucher__motif {
  width: 220px;
  height: 72px;
  background: url("../svg/motif-band.svg") right bottom / contain no-repeat;
}

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

.toc { display: flex; flex-direction: column; border-left: var(--bw) solid var(--rule-soft); }
.toc a {
  padding: 10px 16px;
  font: 400 15px/1.4 var(--font-body);
  color: var(--text-muted);
}
.toc a:hover { color: var(--cobalt); }
.toc a[aria-current="true"] {
  font-weight: 500;
  color: var(--cobalt);
  border-left: var(--bw) solid var(--cobalt);
  margin-left: calc(-1 * var(--bw));
}
@media (min-width: 1000px) { .legal-aside { position: sticky; top: 24px; } }

.legal-body { max-width: 760px; }
.legal-body h2 {
  margin: 44px 0 0;
  font: 500 30px/1.15 var(--font-display);
  letter-spacing: -.005em;
}
.legal-body h2:first-of-type { margin-top: 48px; }
.legal-body p {
  margin: 16px 0 0;
  font: 400 17px/1.75 var(--font-body);
  color: var(--text-muted);
}
.legal-body p.intro { color: var(--text); font-size: 18px; line-height: 1.7; margin: 0; }
.legal-body ul {
  margin: 16px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  font: 400 17px/1.7 var(--font-body);
  color: var(--text-muted);
}
.legal-version {
  margin-top: 48px;
  padding-top: 24px;
  border-top: var(--bw) solid var(--rule);
  font: 400 15px/1.6 var(--font-body);
  color: var(--text-caption);
}
.callout {
  margin-top: 24px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px;
}

/* --- Contact -------------------------------------------------------------- */

.map-embed {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  height: 220px;
  position: relative;
  overflow: hidden;
}

/* --- 404 ------------------------------------------------------------------ */

.error-hero { min-height: 660px; }
@media (max-width: 767px) { .error-hero { min-height: 0; } }

/* --- Style guide ---------------------------------------------------------- */

.sg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 40px var(--pad-x) 28px;
  border-bottom: var(--bw) solid var(--rule);
}
.sg-section { padding: 40px var(--pad-x) 48px; border-bottom: var(--bw) solid var(--rule); }
@media (min-width: 1200px) {
  .sg-header  { padding-block: 56px 28px; }
  .sg-section { padding-block: 48px 56px; }
}

.sg-section__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: baseline;
  margin-bottom: 28px;
}

.swatches { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .swatches { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .swatches { grid-template-columns: repeat(5, 1fr); } }
.swatch__chip { height: 92px; }
.swatch__body { border-top: var(--bw) solid var(--rule); padding: 12px 14px; }
.swatch__name { font: 500 14px/1.2 var(--font-body); }
.swatch__value { margin-top: 4px; font: 400 12px/1.2 var(--font-mono); color: var(--text-caption); }

.specimens { display: grid; gap: 0 32px; grid-template-columns: 1fr; align-items: baseline; }
@media (min-width: 900px) { .specimens { grid-template-columns: 168px 1fr; } }
.specimens__label {
  font: 400 12px/2.2 var(--font-mono);
  color: var(--text-caption);
  padding-top: 14px;
}
.specimens__value { padding: 14px 0; border-bottom: 1px solid var(--rule-hair); }
.specimens > .specimens__value:last-child { border-bottom: 0; }

.sg-btn-grid {
  display: grid;
  gap: 20px 32px;
  grid-template-columns: repeat(2, max-content);
  align-items: start;
}
@media (min-width: 1000px) { .sg-btn-grid { grid-template-columns: repeat(4, max-content); gap: 28px 40px; } }
.sg-btn-grid__label { font: 400 12px/1 var(--font-mono); color: var(--text-caption); }

.sg-cards { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .sg-cards { grid-template-columns: 300px 300px 1fr; } }

.sg-motifs { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .sg-motifs { grid-template-columns: 1fr 320px 320px; } }
.sg-motif {
  height: 240px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.sg-nav-demo { border: var(--bw) solid var(--rule); border-radius: var(--radius); overflow: hidden; }