:root{--surface-000:#080706;--surface-100:#0d0b09;--surface-200:#17120f;--surface-300:#221a16;--hairline:#3b2c24;--control-border:#80604f;--ink:#ece2d4;--ink-muted:#a89a8a;--ink-subtle:#8f8274;--rome-red:#9d210b;--rome-red-hover:#b52a12;--oxblood:#5e1407;--ember:#e8563a;--focus-ring:var(--ember);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--radius-none:0;--radius-sm:2px;--radius-md:4px;--glow-red:0 0 64px rgba(157, 33, 11, 0.35);--lift:0 12px 32px rgba(0, 0, 0, 0.55);--content-max:1200px;--nav-height:72px;--font-display:Cinzel, "Trajan Pro", Georgia, serif;--font-serif:"EB Garamond", Garamond, Georgia, serif;--font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;color-scheme:dark;background:var(--surface-100)}
body{background:var(--surface-100);margin:0}

/* Red Rome — shared component styles. Every value comes from tokens.css. */
.rr, .rr * { box-sizing: border-box; }
.rr { background: var(--surface-100); color: var(--ink); font-family: var(--font-serif); font-size: 18px; line-height: 28px; -webkit-font-smoothing: antialiased; }
.rr a { color: inherit; text-decoration: none; }
.rr :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rr img { display: block; max-width: 100%; }

/* type helpers */
.rr-eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ember); margin: 0; }
.rr-h1 { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: .04em; margin: 0; }
.rr-h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: .04em; margin: 0; }
.rr-muted { color: var(--ink-muted); }
.rr-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; color: var(--ink-muted); text-transform: uppercase; }
.rr-price { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }

/* the sword rule: hairline with a centred blade-tip diamond */
.rr-rule { display: flex; align-items: center; gap: var(--space-3); color: var(--rome-red); }
.rr-rule::before, .rr-rule::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.rr-rule svg { width: 88px; height: 16px; flex: none; }

/* buttons */
.rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .15s, box-shadow .2s, border-color .15s, color .15s; white-space: nowrap; }
.rr-btn svg { width: 16px; height: 16px; flex: none; }
.rr-btn--primary { background: var(--rome-red); color: var(--ink); }
.rr-btn--primary:hover { background: var(--rome-red-hover); box-shadow: var(--glow-red); }
.rr-btn--primary:active { background: var(--oxblood); }
.rr-btn--secondary { background: transparent; color: var(--ink); border-color: var(--control-border); }
.rr-btn--secondary:hover { border-color: var(--ember); color: var(--ember); }
.rr-btn--ghost { background: transparent; color: var(--ember); padding-left: 0; padding-right: 0; min-height: 40px; }
.rr-btn--ghost:hover { color: var(--ink); }
.rr-btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: 11px; }
.rr-btn[disabled] { background: var(--surface-300); color: var(--ink-subtle); border-color: transparent; cursor: not-allowed; box-shadow: none; }

/* nav */
.rr-nav { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 0 var(--space-8); background: rgba(13, 11, 9, .92); border-bottom: 1px solid var(--hairline); }
.rr-nav__brand { display: flex; align-items: center; gap: var(--space-3); }
.rr-nav__brand img { height: 44px; width: auto; }
.rr-nav__brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .16em; }
.rr-nav__links { display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.rr-nav__links a { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-2) 0; border-bottom: 1px solid transparent; }
.rr-nav__links a:hover, .rr-nav__links a[aria-current] { color: var(--ink); border-bottom-color: var(--ember); }
.rr-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.rr-cart svg { width: 20px; height: 20px; }
.rr-cart b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-md); background: var(--rome-red); color: var(--ink); font: 500 11px/20px var(--font-mono); text-align: center; }

/* section frame */
.rr-section { padding: var(--space-24) var(--space-8); }
.rr-section__inner { max-width: var(--content-max); margin: 0 auto; }
.rr-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-12); }
.rr-section__head .rr-eyebrow { margin-bottom: var(--space-2); }

/* hero */
.rr-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-8) var(--space-24); max-width: var(--content-max); margin: 0 auto; }
.rr-hero__art { position: relative; display: flex; justify-content: center; }
.rr-hero__art::before { content: ""; position: absolute; inset: -6% -4%; background: radial-gradient(closest-side, rgba(157, 33, 11, .32), rgba(157, 33, 11, 0)); }
.rr-hero__art img { position: relative; width: 100%; max-width: 440px; }
.rr-hero__title { font-family: var(--font-display); font-size: 88px; line-height: .95; font-weight: 600; letter-spacing: .02em; margin: var(--space-4) 0 var(--space-6); }
.rr-hero__tag { font-size: 21px; line-height: 32px; color: var(--ink-muted); max-width: 30ch; margin: 0 0 var(--space-8); }
.rr-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.rr-hero__now { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: var(--space-4); }

/* tracks */
.rr-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.rr-track { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--hairline); }
.rr-track:hover { background: var(--surface-200); }
.rr-play { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--control-border); background: transparent; color: var(--ink); cursor: pointer; }
.rr-play svg { width: 16px; height: 16px; }
.rr-track[data-playing] .rr-play, .rr-play:hover { background: var(--rome-red); border-color: var(--rome-red); }
.rr-track__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.rr-track[data-playing] .rr-track__title { color: var(--ember); }
.rr-listen { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* cards */
.rr-grid { display: grid; gap: var(--space-6); }
.rr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-card { background: var(--surface-200); border: 1px solid var(--hairline); border-radius: var(--radius-none); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.rr-card:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--control-border); }
.rr-card__well { position: relative; aspect-ratio: 1 / 1; background: var(--surface-300); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rr-card__well svg.garment { width: 78%; height: auto; }
.rr-card__tag { position: absolute; top: var(--space-4); left: var(--space-4); padding: var(--space-1) var(--space-2); background: var(--oxblood); color: var(--ink); font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.rr-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.rr-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: auto; padding-top: var(--space-4); }

/* plugin card */
.rr-plugin { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-200); border: 1px solid var(--hairline); }
.rr-plugin__ui { background: var(--surface-000); border-right: 1px solid var(--hairline); padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); min-height: 320px; }
.rr-plugin__body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.rr-plugin__body p { margin: 0; color: var(--ink-muted); }
.rr-knobs { display: flex; justify-content: space-between; }
.rr-knob { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.rr-knob svg { width: 64px; height: 64px; }
.rr-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rr-chip { padding: var(--space-1) var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-sm); font: 500 12px/18px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); }

/* socials */
.rr-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.rr-social { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); transition: background .15s; }
.rr-social:hover { background: var(--oxblood); }
.rr-social:hover .rr-label, .rr-social:hover svg { color: var(--ink); }
.rr-social__name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: .08em; }
.rr-social svg { width: 20px; height: 20px; color: var(--ember); flex: none; }

/* footer */
.rr-footer { background: var(--surface-000); border-top: 1px solid var(--hairline); padding: var(--space-16) var(--space-8) var(--space-8); }
.rr-footer__inner { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--space-8); }
.rr-footer h4 { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-4); }
.rr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rr-footer ul a:hover { color: var(--ember); }
.rr-field { display: flex; gap: var(--space-2); }
.rr-input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-4); background: var(--surface-300); border: 1px solid var(--control-border); border-radius: var(--radius-sm); color: var(--ink); font: 400 17px var(--font-serif); }
.rr-input::placeholder { color: var(--ink-muted); }
.rr-footer__base { max-width: var(--content-max); margin: var(--space-12) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; font-size: 15px; font-style: italic; color: var(--ink-subtle); }

@media (max-width: 860px) {
  .rr-nav { padding: 0 var(--space-4); }
  .rr-nav__links { display: none; }
  .rr-hero { grid-template-columns: 1fr; padding: var(--space-8) var(--space-4) var(--space-16); text-align: center; }
  .rr-hero__art img { max-width: 280px; }
  .rr-hero__title { font-size: 56px; }
  .rr-hero__tag { margin-left: auto; margin-right: auto; }
  .rr-hero__ctas, .rr-hero__now { justify-content: center; }
  .rr-section { padding: var(--space-16) var(--space-4); }
  .rr-section__head { flex-direction: column; align-items: flex-start; }
  .rr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-grid--2, .rr-plugin, .rr-socials, .rr-footer__inner { grid-template-columns: 1fr; }
  .rr-plugin__ui { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .rr-track { grid-template-columns: 44px 1fr auto; }
  .rr-track > .rr-label:last-child { display: none; }
  .rr-hero__art { order: -1; }
}


.rr-navwrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;backdrop-filter:blur(8px)}
.rr-spin{animation:rr-spin .8s linear infinite}
@keyframes rr-spin{to{transform:rotate(360deg)}}
.rr-player{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface-000);border-top:1px solid var(--hairline);padding:var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom,0px))}
.rr-player[hidden]{display:none}
.rr-player__inner{max-width:var(--content-max);margin:0 auto;display:flex;gap:var(--space-3);align-items:center}
.rr-player iframe{flex:1;min-width:0;height:120px;border:0}
.rr-knob{cursor:ns-resize;touch-action:none;user-select:none;border-radius:var(--radius-sm)}
.rr-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--surface-200);border-left:1px solid var(--hairline);z-index:40;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;padding:calc(var(--space-6) + env(safe-area-inset-top,0px)) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom,0px))}
.rr-drawer[data-open]{transform:none}
.rr-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30}
.rr-drawer ul{list-style:none;margin:var(--space-6) 0;padding:0;flex:1;overflow:auto}
.rr-drawer li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--hairline)}
.rr-x{background:none;border:0;color:var(--ink-muted);font:500 12px var(--font-mono);cursor:pointer;padding:var(--space-2)}
.rr-x:hover{color:var(--ember)}
.rr-toast{position:fixed;left:50%;bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--oxblood);color:var(--ink);padding:var(--space-3) var(--space-6);font:500 13px var(--font-mono);letter-spacing:.06em;z-index:50;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 32px)}
.rr-toast[data-show]{opacity:1;transform:translate(-50%,0)}
.rr-note{background:var(--oxblood);color:var(--ink);text-align:center;font:500 12px/16px var(--font-mono);letter-spacing:.06em;padding:var(--space-2) var(--space-4)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
.rr-track__title:hover{color:var(--ember)}
[hidden]{display:none!important}
.rr-track{grid-template-columns:48px 1fr auto}