@layer ys-reset, ys-base, ys-blocks, ys-tight;

@layer ys-reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button, select, input { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer ys-base {
  :root {
    --ys-ink: #141414; --ys-ink-2: #2c2a28; --ys-mute: #5d5a56; --ys-paper: #ffffff; --ys-mist: #f3f3f1; --ys-tile: #eeeeeb;
    --ys-line: #e0dfdb; --ys-orange: #f26b1d; --ys-ember: #b4470b; --ys-edge: #963a08; --ys-night: #1b1714;
    --ys-shell: 1180px; --ys-gap: clamp(16px, 2.4vw, 28px); --ys-r: 6px;
    --ys-head: "Barlow", "Arial Narrow", Arial, sans-serif; --ys-body: "Figtree", "Segoe UI", Arial, sans-serif;
  }
  body { font-family: var(--ys-body); font-size: 16px; line-height: 1.6; color: var(--ys-ink); background: var(--ys-paper); overflow-x: hidden; }
  h1, h2, h3 { font-family: var(--ys-head); line-height: 1.15; letter-spacing: 0; }
  h1 { font-weight: 800; font-size: clamp(30px, 4vw, 46px); }
  h2 { font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); }
  h3 { font-weight: 700; font-size: 19px; }
  a { color: var(--ys-ember); text-underline-offset: 2px; }
  a:hover { color: var(--ys-ink); }
  .ys-wrap { inline-size: min(100% - 32px, var(--ys-shell)); margin-inline: auto; }
  .ys-skip { position: absolute; inset-inline-start: -999px; }
  .ys-skip:focus { inset-inline-start: 8px; inset-block-start: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
  :focus-visible { outline: 3px solid var(--ys-orange); outline-offset: 2px; }
}

@layer ys-blocks {
  /* stamp */
  .ys-stamp { display: inline-block; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; inline-size: min(300px, 100%); transition: transform .15s; }
  .ys-stamp img { inline-size: 100%; }
  .ys-stamp:hover { transform: translateY(-2px); }
  .ys-stamp--small { inline-size: 196px; }
  .ys-stamp--fill { inline-size: 100%; margin-block-start: auto; }
  .ys-gone { font-size: 14px; background: var(--ys-paper); border: 1px dashed var(--ys-line); padding: 10px 12px; border-radius: var(--ys-r); margin-block-start: auto; }

  /* header */
  .ys-porch { background: var(--ys-paper); position: sticky; inset-block-start: 0; z-index: 20; border-block-end: 1px solid var(--ys-line); }
  .ys-porch__bar { display: flex; align-items: center; gap: 18px; min-block-size: 68px; }
  .ys-porch__mark img { inline-size: 168px; }
  .ys-porch__cta { margin-inline-start: auto; }
  .ys-porch__burger { display: none; border: 1px solid var(--ys-line); background: var(--ys-paper); border-radius: var(--ys-r); padding: 8px 10px; cursor: pointer; align-items: center; gap: 4px; flex-direction: column; }
  .ys-porch__burger span { display: block; inline-size: 20px; block-size: 2px; background: var(--ys-ink); }
  .ys-porch__burger b { font-size: 10px; text-transform: uppercase; font-weight: 600; }
  .ys-lane { background: var(--ys-orange); }
  .ys-lane ul { display: flex; flex-wrap: wrap; gap: 2px 22px; padding-block: 9px; }
  .ys-lane a { color: var(--ys-ink); text-decoration: none; font-weight: 600; font-size: 15px; display: inline-block; padding-block: 4px; }
  .ys-lane a:hover, .ys-lane a[aria-current] { color: #fff; }

  /* hero */
  .ys-open { background: var(--ys-mist); padding-block: clamp(32px, 6vw, 72px); }
  .ys-open__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
  .ys-open h1 { font-size: clamp(32px, 4.2vw, 50px); }
  .ys-open__lede { margin-block: 18px 26px; font-size: 18px; color: var(--ys-ink-2); max-inline-size: 36em; }
  .ys-open__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
  .ys-open__cta .ys-stamp { inline-size: 320px; }
  .ys-open__more { font-weight: 600; }
  .ys-open__note { margin-block-start: 12px; font-size: 14px; color: var(--ys-mute); }
  .ys-open__card { display: block; background: #fff; border-radius: var(--ys-r); border: 1px solid var(--ys-line); padding: 10px; }

  /* trust strip */
  .ys-trust { background: var(--ys-orange); color: var(--ys-ink); }
  .ys-trust ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; padding-block: 16px; }
  .ys-trust li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; }
  .ys-trust b { display: block; font-family: var(--ys-head); font-size: 17px; }

  .ys-h2c { text-align: center; margin-block-end: 8px; }
  .ys-subc { text-align: center; color: var(--ys-mute); max-inline-size: 44em; margin-inline: auto; }

  /* categories */
  .ys-cats { background: var(--ys-mist); padding-block: clamp(40px, 6vw, 72px); }
  .ys-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-block-start: 28px; }
  .ys-cat { background: #fff; border-radius: var(--ys-r); border: 1px solid var(--ys-line); text-decoration: none; overflow: hidden; display: flex; flex-direction: column; }
  .ys-cat img { aspect-ratio: 4 / 3; object-fit: contain; inline-size: 100%; background: #fff; padding: 8px; }
  .ys-cat__n { color: var(--ys-ember); font-family: var(--ys-head); font-weight: 700; font-size: 19px; padding: 10px 16px 0; }
  .ys-cat__c { color: var(--ys-mute); font-size: 14px; padding: 0 16px 14px; }

  /* panels */
  .ys-panels { padding-block: clamp(40px, 6vw, 72px); }
  .ys-panels__row { display: flex; gap: 14px; block-size: 440px; margin-block-start: 28px; }
  .ys-panel { position: relative; flex: 1 1 0; border-radius: var(--ys-r); overflow: hidden; text-decoration: none; color: #fff; transition: flex-grow .35s; min-inline-size: 0; }
  .ys-panel--lead { flex-grow: 2.6; }
  .ys-panels__row:hover .ys-panel { flex-grow: 1; }
  .ys-panels__row .ys-panel:hover { flex-grow: 2.6; }
  .ys-panel img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ys-panel__txt { position: absolute; inset-inline: 0; inset-block-end: 0; background: rgba(20, 18, 16, .72); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
  .ys-panel__txt b { font-family: var(--ys-head); font-size: 24px; }
  .ys-panel__txt span { font-size: 14px; }
  .ys-panel__txt em { font-style: normal; color: var(--ys-orange); font-weight: 600; font-size: 14px; }

  /* featured */
  .ys-feat { padding-block: clamp(40px, 6vw, 72px); border-block-start: 1px solid var(--ys-line); }
  .ys-feat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block-start: 28px; }
  .ys-show { border: 1px solid var(--ys-line); border-radius: var(--ys-r); padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
  .ys-show__pic img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; }
  .ys-show h3 a { color: var(--ys-ember); text-decoration: none; }
  .ys-show__line { font-size: 14px; color: var(--ys-mute); }

  /* app slab */
  .ys-app { background: var(--ys-night); color: #f4f2ef; padding-block: clamp(40px, 6vw, 64px); }
  .ys-app__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; }
  .ys-app__kick { color: var(--ys-orange); font-weight: 600; font-size: 14px; }
  .ys-app h2 { margin-block: 6px 14px; font-size: clamp(28px, 3.2vw, 40px); }
  .ys-app__go { display: inline-block; margin-block-start: 18px; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 9px 16px; text-decoration: none; font-weight: 600; }
  .ys-app__go:hover { background: #fff; color: var(--ys-ink); }
  .ys-app img { border-radius: var(--ys-r); }

  /* reviews */
  .ys-voices { background: var(--ys-mist); padding-block: clamp(40px, 6vw, 72px); }
  .ys-voices__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-block-start: 28px; }
  .ys-voice { background: #fff; border-radius: var(--ys-r); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
  .ys-voice__stars { color: var(--ys-orange); letter-spacing: 2px; }
  .ys-voice__t { font-weight: 700; font-family: var(--ys-head); font-size: 18px; margin-block-end: 4px; }
  .ys-voice blockquote { margin: 0; }
  .ys-voice figcaption { font-size: 14px; color: var(--ys-mute); margin-block-start: auto; }

  /* prose (about + why) */
  .ys-prose { padding-block: clamp(40px, 6vw, 72px); }
  .ys-prose__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
  .ys-prose h2 { font-size: clamp(28px, 3.2vw, 38px); margin-block-end: 14px; }
  .ys-prose h3 { margin-block: 22px 6px; }
  .ys-prose p { color: var(--ys-ink-2); }
  .ys-prose figure { display: grid; gap: 16px; }
  .ys-prose figure img { border-radius: var(--ys-r); }

  /* notes */
  .ys-notes { background: var(--ys-mist); padding-block: clamp(40px, 6vw, 64px); }
  .ys-notes__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; margin-block-start: 22px; }
  .ys-notes__big { position: relative; display: block; border-radius: var(--ys-r); overflow: hidden; color: #fff; text-decoration: none; }
  .ys-notes__big img { inline-size: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
  .ys-notes__big span { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 14px 18px; background: rgba(20, 18, 16, .72); font-family: var(--ys-head); font-weight: 700; font-size: 22px; }
  .ys-notes__list { display: grid; gap: 14px; align-content: start; }
  .ys-notes__list a { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--ys-ink); font-weight: 700; font-family: var(--ys-head); font-size: 18px; line-height: 1.25; }
  .ys-notes__list img { border-radius: 4px; aspect-ratio: 3 / 2; object-fit: cover; }
  .ys-notes__list em { display: block; font-style: normal; font-family: var(--ys-body); font-weight: 500; font-size: 13px; color: var(--ys-mute); }

  /* FAQ */
  .ys-asks { padding-block: clamp(40px, 6vw, 72px); }
  .ys-asks--grey { background: var(--ys-mist); }
  .ys-asks__in { max-inline-size: 820px; }
  .ys-asks h2 { text-align: center; margin-block-end: 20px; }
  .ys-ask { border-block-end: 1px solid var(--ys-line); padding-block: 14px; }
  .ys-ask summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 10px; }
  .ys-ask summary::-webkit-details-marker { display: none; }
  .ys-ask summary::before { content: "▶"; font-size: 11px; line-height: 2.3; transition: transform .2s; }
  .ys-ask[open] summary::before { transform: rotate(90deg); }
  .ys-ask p { padding: 8px 0 2px 21px; color: var(--ys-ink-2); }

  /* closing banner */
  .ys-close { background: var(--ys-night); color: #fff; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; }
  .ys-close > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ys-close__in { padding: 36px clamp(20px, 4vw, 56px); }
  .ys-close__in p { margin-block: 10px 18px; }
  .ys-close__sub { font-size: 14px; color: #d8d4cf; margin-block-end: 0 !important; }

  /* footer */
  .ys-cellar { background: var(--ys-night); color: #e9e5e0; padding-block: 48px 24px; }
  .ys-cellar__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 28px; }
  .ys-cellar h2 { font-size: 17px; color: #fff; margin-block-end: 10px; }
  .ys-cellar ul { display: grid; gap: 4px; list-style: none; padding: 0; margin: 0; }
  .ys-cellar a { color: #e9e5e0; text-decoration: none; display: inline-block; padding-block: 3px; }
  .ys-cellar a:hover { color: var(--ys-orange); }
  .ys-cellar__brand p { margin-block-start: 14px; font-size: 15px; }
  .ys-cellar__slogan { color: var(--ys-orange); font-family: var(--ys-head); font-weight: 700; font-size: 18px; }
  .ys-cellar address { font-style: normal; margin-block-start: 14px; font-size: 14px; line-height: 1.55; }
  .ys-cellar__fine { border-block-start: 1px solid #3a342f; margin-block-start: 30px; padding-block-start: 16px; font-size: 13px; color: #b8b2ab; }

  /* dock (mobile buy bar) */
  .ys-dock { display: none; }

  /* breadcrumbs */
  .ys-trail { background: var(--ys-mist); border-block-end: 1px solid var(--ys-line); font-size: 14px; }
  .ys-trail .ys-wrap { padding-block: 10px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
  .ys-trail a { display: inline-block; padding-block: 4px; }
  .ys-trail i { font-style: normal; color: var(--ys-mute); }

  /* category band + shelf */
  .ys-band { background: var(--ys-mist); }
  .ys-band__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: center; padding-block: 26px; }
  .ys-band__sub { color: var(--ys-mute); font-size: 18px; margin-block-start: 6px; }
  .ys-band img { border-radius: var(--ys-r); max-block-size: 320px; object-fit: cover; inline-size: 100%; }
  .ys-shelf { display: grid; grid-template-columns: 230px 1fr; gap: 36px; padding-block: 32px 48px; }
  .ys-sift__h { font-weight: 700; margin-block-end: 8px; }
  .ys-sift fieldset { border: 0; border-block-start: 1px solid var(--ys-line); padding: 14px 0; margin: 0; }
  .ys-sift legend { font-weight: 700; font-family: var(--ys-head); font-size: 17px; padding: 0; }
  .ys-sift label { display: flex; gap: 8px; align-items: center; padding-block: 5px; font-size: 15px; cursor: pointer; }
  .ys-sift label span, .ys-sift li span { color: var(--ys-mute); font-size: 13px; }
  .ys-sift ul { list-style: none; padding: 0; display: grid; gap: 2px; margin-block-start: 6px; }
  .ys-sift li a { display: inline-block; padding-block: 4px; }
  .ys-shelf__lede { font-size: 17px; color: var(--ys-ink-2); margin-block-end: 18px; }
  .ys-shelf__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; color: var(--ys-mute); font-size: 15px; margin-block-end: 16px; }
  .ys-shelf__top select { border: 1px solid var(--ys-line); border-radius: 4px; padding: 6px 8px; background: #fff; }
  .ys-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .ys-rack--3 { margin-block-start: 22px; }
  .ys-tile { background: var(--ys-tile); border-radius: var(--ys-r); padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .ys-tile[hidden] { display: none; }
  .ys-tile__pic img { aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  .ys-tile__name { font-size: 18px; line-height: 1.2; }
  .ys-tile__name a { color: var(--ys-ink); text-decoration: none; }
  .ys-tile__sub { font-size: 14px; color: var(--ys-mute); line-height: 1.4; }
  .ys-tile__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; align-items: center; font-size: 13px; }
  .ys-tile__opt { color: var(--ys-mute); }
  .ys-tile__usd { font-weight: 700; font-size: 20px; font-family: var(--ys-head); }
  .ys-score { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .ys-score__bar { position: relative; display: inline-block; font-size: 15px; line-height: 1; color: #cfcdc8; letter-spacing: 1px; }
  .ys-score__bar::before { content: "★★★★★"; }
  .ys-score__bar::after { content: "★★★★★"; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: var(--ys-fill); overflow: hidden; color: var(--ys-orange); white-space: nowrap; }
  .ys-score__n { color: var(--ys-mute); }
  .ys-essay { margin-block-start: 44px; border-block-start: 1px solid var(--ys-line); padding-block-start: 30px; }
  .ys-essay h3 { margin-block: 18px 4px; }
  .ys-essay p { color: var(--ys-ink-2); }
  .ys-essay__more { margin-block-start: 18px; font-weight: 600; }

  /* PDP */
  .ys-unit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); padding-block: 30px 40px; align-items: start; }
  .ys-frames__stage { background: #fff; border: 1px solid var(--ys-line); border-radius: var(--ys-r); padding: 10px; }
  .ys-frames__row { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }
  .ys-frames__pick { padding: 2px; border: 1px solid var(--ys-line); background: #fff; border-radius: 4px; cursor: pointer; inline-size: 70px; }
  .ys-frames__pick--now { border-color: var(--ys-orange); box-shadow: 0 0 0 1px var(--ys-orange); }
  .ys-buy__kick a { font-weight: 600; font-size: 14px; text-decoration: none; }
  .ys-buy h1 { font-size: clamp(28px, 3.2vw, 40px); margin-block: 4px 10px; }
  .ys-buy__score { font-size: 15px; }
  .ys-buy__line { font-size: 18px; margin-block: 12px; color: var(--ys-ink-2); }
  .ys-buy__usd { font-family: var(--ys-head); font-weight: 800; font-size: 30px; }
  .ys-buy__stock { color: #2f7a3b; font-size: 14px; font-weight: 600; }
  .ys-pick { display: grid; gap: 4px; margin-block: 14px 4px; font-weight: 600; font-size: 14px; }
  .ys-pick select { border: 1px solid var(--ys-line); border-radius: 4px; padding: 9px 10px; background: #fff; font-weight: 500; max-inline-size: 100%; }
  .ys-buy__cta { margin-block: 16px 6px; }
  .ys-buy__cta .ys-stamp { inline-size: 340px; }
  .ys-buy__note { font-size: 13px; color: var(--ys-mute); }
  .ys-buy__h { font-size: 21px; color: var(--ys-ember); margin-block: 24px 8px; }
  .ys-buy__list { display: grid; gap: 7px; }
  .ys-buy__list li { position: relative; padding-inline-start: 20px; }
  .ys-buy__list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .62em; inline-size: 8px; block-size: 8px; background: var(--ys-orange); }
  .ys-buy__about { color: var(--ys-ink-2); }
  .ys-sheet { background: var(--ys-mist); padding-block: 40px; }
  .ys-sheet__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; }
  .ys-sheet h2 { margin-block-end: 14px; font-size: 26px; }
  .ys-sheet__t { inline-size: 100%; background: #fff; border: 1px solid var(--ys-ink); }
  .ys-sheet__t th { background: var(--ys-night); color: #fff; text-align: start; padding: 10px 12px; inline-size: 38%; font-weight: 600; border-block-end: 1px solid #3a342f; vertical-align: top; }
  .ys-sheet__t td { padding: 10px 12px; border-block-end: 1px solid var(--ys-line); }
  .ys-sheet__who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
  .ys-sheet__who h3 { margin-block-end: 8px; }
  .ys-yes, .ys-no { display: grid; gap: 8px; }
  .ys-yes li, .ys-no li { position: relative; padding-inline-start: 24px; font-size: 15px; }
  .ys-yes li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #2f7a3b; font-weight: 700; }
  .ys-no li::before { content: "✕"; position: absolute; inset-inline-start: 0; color: var(--ys-ember); font-weight: 700; }
  .ys-deep { padding-block: 40px 8px; }
  .ys-deep__in { max-inline-size: 860px; }
  .ys-deep h2 { font-size: 24px; margin-block: 22px 6px; }
  .ys-deep p { color: var(--ys-ink-2); }
  .ys-voices--pdp { background: var(--ys-paper); }
  .ys-voices--pdp .ys-voice { border: 1px solid var(--ys-line); }
  .ys-also { padding-block: 40px; border-block-start: 1px solid var(--ys-line); }
  .ys-last { background: var(--ys-night); color: #fff; }
  .ys-last__in { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; padding-block: 22px; font-family: var(--ys-head); font-weight: 700; font-size: 20px; text-align: center; }

  /* guides */
  .ys-note { padding-block: 28px 56px; }
  .ys-note__kick { color: var(--ys-ember); font-weight: 600; }
  .ys-note__intro { font-size: 19px; color: var(--ys-ink-2); max-inline-size: 46em; margin-block: 12px 22px; }
  .ys-note__hero img { border-radius: var(--ys-r); inline-size: 100%; max-block-size: 460px; object-fit: cover; }
  .ys-note__pick { max-inline-size: 360px; margin-block: 24px; }
  .ys-note__grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
  .ys-note__toc { position: sticky; inset-block-start: 130px; align-self: start; font-size: 15px; }
  .ys-note__toc p { font-weight: 700; margin-block-end: 6px; }
  .ys-note__toc ol { padding-inline-start: 18px; display: grid; gap: 6px; }
  .ys-note__body section { margin-block-end: 34px; }
  .ys-note__body h2 { margin-block-end: 8px; }

  /* service */
  .ys-room { max-inline-size: 780px; padding-block: 34px 60px; }
  .ys-room h1 { margin-block-end: 18px; }
  .ys-room h2 { margin-block: 28px 8px; font-size: 24px; }
  .ys-room p { margin-block-end: 12px; }
  .ys-room ol { display: grid; gap: 6px; padding-inline-start: 22px; }
  .ys-room__pic { margin-block: 20px; }
  .ys-room__pic img { border-radius: var(--ys-r); }
  .ys-room__links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-inline-start: 20px; }
  .ys-card { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--ys-mist); padding: 20px; border-radius: var(--ys-r); margin-block: 18px; }
}

@layer ys-tight {
  @media (max-width: 1060px) {
    .ys-dock { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; background: var(--ys-night); color: #fff; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .ys-dock__t { display: grid; font-size: 13px; line-height: 1.3; min-inline-size: 0; }
    .ys-dock__t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ys-dock .ys-stamp { inline-size: 180px; flex: none; }
    .ys-dock .ys-gone { color: var(--ys-ink); font-size: 12px; padding: 6px 8px; }
    body:has(.ys-dock) { padding-block-end: 78px; }
    .ys-cellar__cols { grid-template-columns: 1fr 1fr; }
    .ys-trust ul { grid-template-columns: repeat(2, 1fr); }
    .ys-cats__grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) {
    .ys-porch__burger { display: flex; }
    .ys-porch__cta .ys-stamp { inline-size: 172px; }
    .ys-lane { display: none; }
    .ys-lane.ys-lane--shown { display: block; }
    .ys-lane ul { flex-direction: column; gap: 0; }
    .ys-lane a { padding-block: 9px; display: block; }
    .ys-close, .ys-open__grid, .ys-app__grid, .ys-prose__grid, .ys-notes__grid, .ys-band__grid, .ys-unit, .ys-sheet__grid { grid-template-columns: 1fr; }
    .ys-open__card { order: -1; max-inline-size: 420px; }
    .ys-feat__grid { grid-template-columns: repeat(2, 1fr); }
    .ys-panels__row { flex-direction: column; block-size: auto; }
    .ys-panel, .ys-panel--lead { flex: none; block-size: 240px; }
    .ys-shelf { grid-template-columns: 1fr; gap: 10px; }
    .ys-sift { display: flex; flex-wrap: wrap; gap: 0 24px; }
    .ys-sift__h { inline-size: 100%; }
    .ys-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ys-note__grid { grid-template-columns: 1fr; gap: 10px; }
    .ys-note__toc { position: static; }
  }
  @media (max-width: 560px) {
    .ys-porch__bar { gap: 10px; min-block-size: 60px; }
    .ys-porch__mark img { inline-size: 112px; }
    .ys-porch__cta .ys-stamp { inline-size: 160px; }
    .ys-porch__burger b { display: none; }
    .ys-trust ul { grid-template-columns: 1fr; gap: 10px; }
    .ys-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ys-cat__n { font-size: 16px; padding: 8px 10px 0; }
    .ys-cat__c { padding: 0 10px 10px; }
    .ys-feat__grid, .ys-voices__grid { grid-template-columns: 1fr; }
    .ys-sift fieldset:last-of-type { display: none; }
    .ys-tile { padding: 10px; }
    .ys-tile__sub { display: none; }
    .ys-tile__name { font-size: 15px; }
    .ys-tile__usd { font-size: 17px; }
    .ys-sheet__who { grid-template-columns: 1fr; }
    .ys-sheet__t, .ys-sheet__t tbody, .ys-sheet__t tr, .ys-sheet__t th, .ys-sheet__t td { display: block; inline-size: 100%; }
    .ys-card { grid-template-columns: 1fr; }
    .ys-open__cta .ys-stamp, .ys-buy__cta .ys-stamp { inline-size: 100%; max-inline-size: 340px; }
    .ys-cellar__cols { grid-template-columns: 1fr; }
    .ys-close__in { text-align: center; }
    .ys-notes__list a { grid-template-columns: 96px 1fr; font-size: 16px; }
  }
}