/* HACI catalogue - silk.css */

@font-face {
  font-family: 'DM Serif Display';
  src: url('dm-serif-display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('onest.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #f4eddd;
  --shell: #fbf7ee;
  --ink: #211a14;
  --cocoa: #4a382b;
  --caramel: #a5673f;
  --caramel-dark: #8a5230;
  --blush: #e8d3c3;
  --line: #e0d5bf;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Onest', 'Segoe UI', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
}

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

a { color: var(--caramel-dark); }
a:hover { color: var(--caramel); }

[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; color: var(--ink); }
h1 { font-size: 2.3rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.2rem; }

.bodice { max-width: 1180px; margin-inline: auto; padding-inline: 22px; }

/* ---- top strip: three facts ---- */
.laceband {
  background: var(--ink);
  color: var(--cream);
  font-size: .76rem;
  letter-spacing: .04em;
}
.laceband-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: .45rem;
}
.laceband span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laceband a { color: var(--blush); text-decoration: none; }
.laceband a:hover { text-decoration: underline; }

/* ---- header: seek left, brand centre, nav right ---- */
.diadem {
  background: var(--shell);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.diadem-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  padding-block: .7rem;
}
.diadem-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  justify-self: center;
  text-align: left;
}
.diadem-brand svg { width: 38px; height: 38px; }
.diadem-brand > span {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: .14em;
  line-height: 1.05;
}
.diadem-brand em {
  font-family: var(--sans);
  font-style: normal;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caramel-dark);
}
.diadem-nav { display: flex; gap: 1.2rem; align-items: center; justify-self: end; }
.diadem-nav a {
  text-decoration: none;
  color: var(--cocoa);
  font-size: .92rem;
  font-weight: 600;
}
.diadem-nav a:hover { color: var(--caramel-dark); }
.diadem-burger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 1.3rem;
  line-height: 1;
  padding: .35rem .6rem;
  color: var(--ink);
  cursor: pointer;
}

/* search */
.diadem-seek { position: relative; }
.diadem-seek input {
  font-family: var(--sans);
  font-size: .88rem;
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  width: 190px;
}
.diadem-seek input:focus { outline: 2px solid var(--blush); border-color: var(--caramel); }
.diadem-drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(33, 26, 20, .14);
  z-index: 60;
}
.diadem-drop a {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .5rem .7rem;
  text-decoration: none;
  color: var(--ink);
  font-size: .85rem;
  border-bottom: 1px solid var(--line);
}
.diadem-drop a:last-child { border-bottom: 0; }
.diadem-drop a:hover { background: var(--shell); }
.diadem-drop img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 6px; flex: none; }
.diadem-drop .naught { padding: .7rem; font-size: .85rem; color: var(--cocoa); }

/* category bar: pill chips with counts */
.sashbar {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.sashbar-inner {
  display: flex;
  justify-content: center;
  gap: .55rem;
  overflow-x: auto;
  padding-block: .55rem;
  scrollbar-width: none;
}
.sashbar-inner::-webkit-scrollbar { display: none; }
.sashbar a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--cocoa);
  font-size: .82rem;
  letter-spacing: .02em;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .28rem .8rem;
}
.sashbar a i {
  font-style: normal;
  color: var(--caramel-dark);
  font-size: .72rem;
  margin-left: .35rem;
}
.sashbar a:hover, .sashbar a.now {
  border-color: var(--caramel);
  color: var(--ink);
  font-weight: 600;
}
.sashbar a.now { background: var(--blush); }

/* ---- hero: compact copy + product rail ---- */
.corsage {
  background: var(--shell);
  border-bottom: 1px solid var(--line);
}
.corsage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  align-items: center;
  padding-block: 2.3rem;
}
.corsage-copy .picot {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: .4rem;
}
.corsage h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.corsage p { color: var(--cocoa); margin-bottom: 1.4rem; max-width: 46ch; }
.corsage-cta { display: flex; gap: .7rem; flex-wrap: wrap; }

/* hero product rail */
.garland {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  padding-top: .9rem;
}
.garland-tag {
  position: absolute;
  top: -4px;
  left: 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caramel-dark);
}
.camisole {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .55rem .65rem .6rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.camisole:hover { border-color: var(--caramel); box-shadow: 0 6px 16px rgba(33, 26, 20, .1); color: var(--ink); }
.camisole img {
  width: 100%;
  aspect-ratio: 1.25;
  object-fit: contain;
  margin-bottom: .4rem;
}
.camisole-name { font-size: .8rem; font-weight: 600; line-height: 1.35; }
.camisole-meta { font-size: .78rem; color: var(--caramel-dark); margin-top: .2rem; }

/* buttons */
.satine {
  display: inline-block;
  background: var(--caramel);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.6rem;
  cursor: pointer;
  transition: background .15s;
}
.satine:hover { background: var(--caramel-dark); color: #fff; }
.satine-ghost {
  background: transparent;
  color: var(--caramel-dark);
  border: 1.5px solid var(--caramel);
}
.satine-ghost:hover { background: var(--blush); color: var(--ink); }
.satine-mini {
  font-size: .78rem;
  padding: .42rem .9rem;
  white-space: nowrap;
}

/* ---- section heads ---- */
.chapter { padding-block: 2.6rem 0; }
.chapter-head { margin-bottom: 1.3rem; }
.chapter-head .picot {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: .3rem;
}
.chapter-head p { color: var(--cocoa); max-width: 62ch; margin-top: .4rem; }

/* ---- outfit pills ---- */
.velvetbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.velvetbar a {
  display: block;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.velvetbar a:hover { border-color: var(--caramel); transform: translateY(-2px); }
.velvetbar b { display: block; font-size: .95rem; margin-bottom: .2rem; }
.velvetbar span { font-size: .82rem; color: var(--cocoa); }

/* ---- grids and cards ---- */
.trellis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.trellis-3 { grid-template-columns: repeat(3, 1fr); }

.cami {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: box-shadow .15s, border-color .15s;
}
.cami:hover { border-color: var(--caramel); box-shadow: 0 8px 22px rgba(33, 26, 20, .09); }
.cami-pic {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  min-height: 0;
}
.cami-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.cami-body {
  padding: .85rem .95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.cami-body h3 { font-size: 1.02rem; }
.cami-body h3 a { color: var(--ink); text-decoration: none; }
.cami-body h3 a:hover { color: var(--caramel-dark); }
.cami-note { font-size: .83rem; color: var(--cocoa); }
.cami-kick {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--caramel-dark);
}
.cami-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ink);
  color: var(--cream);
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .14rem .55rem;
  letter-spacing: .03em;
}
.cami-buy {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--line);
}
.cami-price { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }

/* category card variant */
.cami-cat h3 { font-size: 1.15rem; }
.cami-cat .cami-note { min-height: 0; }
.cami-cat .cami-badge { background: var(--caramel); }

/* ---- stats band ---- */
.plume {
  background: var(--ink);
  color: var(--cream);
  border-radius: 14px;
  padding: 1.8rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  text-align: center;
}
.plume b {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--blush);
}
.plume span { font-size: .84rem; color: #d8cbb8; }

/* ---- care do/don't ---- */
.braced { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.braced > div {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
}
.braced h3 { margin-bottom: .6rem; }
.braced ul { list-style: none; }
.braced li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: .45rem;
  font-size: .92rem;
  color: var(--cocoa);
}
.braced li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--caramel);
  font-weight: 700;
}
.braced .nay li::before { content: '\00d7'; }

/* ---- reception / quotes ---- */
.tulle {
  background: var(--blush);
  border-radius: 14px;
  padding: 1.6rem 1.5rem;
}
.tulle p { color: var(--cocoa); max-width: 70ch; }
.tulle p + p { margin-top: .7rem; }

/* ---- data tables ---- */
.wiretable-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
  background: var(--shell);
}
.wiretable {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.wiretable th, .wiretable td {
  text-align: left;
  padding: .65rem .95rem;
  vertical-align: top;
}
.wiretable thead th {
  background: var(--blush);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wiretable tbody tr { border-top: 1px solid var(--line); }
.wiretable tbody tr:hover { background: #fff; }
.wiretable td { color: var(--cocoa); }
.wiretable td a { font-weight: 600; }
.wiretable-cups th, .wiretable-cups td { text-align: center; }
.wiretable-cups th[scope="row"] { text-align: left; white-space: nowrap; }
.wiretable-cups tbody td {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
}
.chapter-cta { margin-top: 1.2rem; }

/* ---- real quotes ---- */
.lovenote {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.lovenote-card {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.lovenote-card blockquote {
  font-size: .9rem;
  color: var(--cocoa);
  margin-bottom: .9rem;
}
.lovenote-card figcaption {
  margin-top: auto;
  border-top: 1px dashed var(--line);
  padding-top: .6rem;
  font-size: .8rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.lovenote-card figcaption b { color: var(--ink); }
.lovenote-card figcaption span { color: var(--caramel); letter-spacing: .06em; }
.lovenote-card figcaption a { font-size: .78rem; }

/* ---- breadcrumbs ---- */
.slipnote {
  font-size: .8rem;
  color: var(--cocoa);
  padding-block: .9rem .2rem;
}
.slipnote a { color: var(--cocoa); text-decoration: none; }
.slipnote a:hover { color: var(--caramel-dark); text-decoration: underline; }

/* ---- product page ---- */
.piece-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  padding-block: 1.4rem 2rem;
  align-items: start;
}
.piece-pic {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  position: sticky;
  top: 90px;
}
.piece-pic img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 22px; }
.piece-info h1 { font-size: 1.85rem; margin-bottom: .6rem; }
.piece-stars { color: var(--caramel-dark); font-size: .9rem; margin-bottom: .9rem; }
.piece-lead { color: var(--cocoa); margin-bottom: 1.1rem; }

.costbar {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.costbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.costbar-sum { font-family: var(--serif); font-size: 1.9rem; }
.costbar small { display: block; font-size: .76rem; color: var(--cocoa); margin-top: .6rem; }

.demiplume { list-style: none; margin-bottom: 1.4rem; }
.demiplume li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .5rem;
  font-size: .93rem;
  color: var(--cocoa);
}
.demiplume li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--caramel);
}

.piece-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: .4rem 2.2rem; }
.piece-feats > div {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.piece-feats h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.piece-feats p { font-size: .9rem; color: var(--cocoa); }

/* swatch chips */
.swatchette { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.swatchette span {
  font-size: .78rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .7rem;
  color: var(--cocoa);
}

/* ---- bandfit calculator ---- */
.bandfit {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.6rem 1.5rem;
  max-width: 640px;
}
.bandfit label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .3rem;
  color: var(--cocoa);
}
.bandfit input {
  font-family: var(--sans);
  font-size: 1rem;
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  margin-bottom: 1rem;
}
.bandfit input:focus { outline: 2px solid var(--blush); border-color: var(--caramel); }
.bandfit-out {
  border-top: 1px dashed var(--line);
  margin-top: 1.2rem;
  padding-top: 1.2rem;
}
.bandfit-out b { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.bandfit-out p { font-size: .88rem; color: var(--cocoa); margin-top: .4rem; }

/* ---- guide pages ---- */
.pamphlet { max-width: 760px; padding-block: .6rem 2.6rem; }
.pamphlet h1 { margin-bottom: 1rem; }
.pamphlet h2 { margin: 1.8rem 0 .7rem; }
.pamphlet p { margin-bottom: .9rem; color: var(--cocoa); }
.pamphlet ul, .pamphlet ol { margin: 0 0 .9rem 1.4rem; color: var(--cocoa); }
.pamphlet li { margin-bottom: .4rem; }
.pamphlet-date { font-size: .8rem; color: var(--caramel-dark); margin-bottom: 1.2rem; }

/* ---- footer ---- */
.hem-band {
  background: var(--ink);
  color: #d8cbb8;
  margin-top: 3rem;
  padding-block: 2.2rem 1.4rem;
}
.trinket {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  text-align: center;
  padding-bottom: 1.8rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid #3a2f26;
}
.trinket b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--blush);
}
.trinket span { font-size: .8rem; color: #b3a795; }
.trinket span a { color: var(--blush); }
.hem-band-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #3a2f26;
}
.hem-crest {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  margin-bottom: .8rem;
}
.hem-crest svg { width: 30px; height: 30px; }
.hem-crest span {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: .14em;
  color: var(--cream);
}
.hem-contact { margin-top: .9rem; }
.hem-contact li { font-size: .8rem; color: #b3a795; }
.hem-band h3 { color: var(--cream); font-size: 1rem; font-family: var(--sans); font-weight: 700; margin-bottom: .7rem; }
.hem-band ul { list-style: none; }
.hem-band li { margin-bottom: .4rem; }
.hem-band li i { font-style: normal; font-size: .74rem; color: #8a7c68; }
.hem-band a { color: #d8cbb8; text-decoration: none; font-size: .86rem; }
.hem-band a:hover { color: var(--blush); text-decoration: underline; }
.hem-band .whisper { font-size: .76rem; line-height: 1.6; color: #b3a795; max-width: 44ch; }
.hem-fine { padding-block: 1.1rem 0; max-width: none !important; }
.hem-band-base {
  padding-top: 1rem;
  font-size: .78rem;
  color: #b3a795;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hem-band-base a { color: #b3a795; font-size: .78rem; }

/* to top */
.upsilk {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--caramel);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(33, 26, 20, .22);
  z-index: 50;
}
.upsilk:hover { background: var(--caramel-dark); }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .trellis { grid-template-columns: repeat(3, 1fr); }
  .trellis-3 { grid-template-columns: repeat(2, 1fr); }
  .velvetbar { grid-template-columns: repeat(2, 1fr); }
  .corsage-grid { grid-template-columns: 1fr; gap: 1.6rem; padding-block: 1.8rem; }
  .corsage h1 { font-size: 2.1rem; }
  .garland { padding-top: 1.1rem; }
  .lovenote { grid-template-columns: 1fr 1fr; }
  .piece-grid { grid-template-columns: 1fr; }
  .piece-pic { position: static; }
  .plume, .trinket { grid-template-columns: repeat(2, 1fr); }
  .hem-band-grid { grid-template-columns: 1fr 1fr; }
  .sashbar-inner { justify-content: flex-start; }
  .diadem-nav { display: none; }
  .diadem-nav.ajar {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--shell);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(33, 26, 20, .12);
  }
  .diadem-nav.ajar a { padding: .8rem 22px; border-top: 1px solid var(--line); }
  .diadem-row { grid-template-columns: auto 1fr auto; }
  .diadem-burger { display: block; grid-column: 1; grid-row: 1; }
  .diadem-brand { grid-column: 2; grid-row: 1; }
  .diadem-seek { grid-column: 3; grid-row: 1; justify-self: end; }
  .diadem-seek input { width: 150px; }
}

@media (max-width: 600px) {
  h1 { font-size: 1.8rem; }
  .corsage h1 { font-size: 1.75rem; }
  .trellis, .trellis-3 { grid-template-columns: repeat(2, 1fr); }
  .velvetbar { grid-template-columns: 1fr; }
  .braced { grid-template-columns: 1fr; }
  .piece-feats { grid-template-columns: 1fr; }
  .plume, .trinket { grid-template-columns: repeat(2, 1fr); }
  .lovenote { grid-template-columns: 1fr; }
  .hem-band-grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .cami-body h3 { font-size: .92rem; }
  .cami-price { font-size: 1rem; }
  .cami-buy { flex-direction: column; align-items: stretch; gap: .4rem; }
  .cami-buy .satine-mini { text-align: center; }
  .laceband-inner { justify-content: center; }
  .laceband span:first-child, .laceband span:last-child { display: none; }
  .diadem-row { grid-template-columns: 44px 1fr 44px; }
  .diadem-seek { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .diadem-seek input { width: 100%; }
  .diadem-drop { width: 100%; }
}