/* intergalacticstardatabase.co.uk — built around the oval logo: deep space black, chrome silver, white lettering
   and the warm glow of the logo's star. Two fonts (brand guide section 4): Michroma, the logo lettering, for labels; Jost for everything else;
   text: Jost.
   SPACING: every gap is on one scale — 8 / 16 / 24 / 32 / 48 / 64 px (phones: 8 / 16 / 24 / 32 / 48).
   Two content widths only: --narrow (720) for single cards and headings, --wide (1064) for grids. */
:root {
  --space: #07060a; --panel: rgba(255,255,255,.035); --line: rgba(214,218,226,.16);
  --ink: #f3f0ec; --soft: #b9b4bd; --mute: #8b8692; --silver: #d6d9e0; --glow: #f3cfb2;
  --chrome: linear-gradient(90deg, rgba(214,218,226,0), rgba(214,218,226,.55) 50%, rgba(214,218,226,0));
  --serif: Jost, Futura, Arial, sans-serif; --label: Michroma, "Eurostile Extended", sans-serif; --sans: Jost, Futura, Arial, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --narrow: 720px; --gutter: 28px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--space); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--glow); }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
/* line-height 1 so a label adds no hidden space above or below itself */
.label { display: inline-block; font-family: var(--label); font-size: 10.5px; line-height: 1; letter-spacing: .32em; text-transform: uppercase; color: var(--silver); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; font-variant-numeric: lining-nums; text-wrap: balance; }
.lead, .head p, .welcome-note p { text-wrap: balance; }
.fact .v { font-variant-numeric: lining-nums; }

/* header: menu centred; the buy button on the right; on star pages a small logo on the left (the way home) */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
       background: linear-gradient(180deg, rgba(7,6,10,.88), rgba(7,6,10,.55)); border-bottom: 1px solid rgba(214,218,226,.08); }
/* top strip: three messages that take turns, fading one into the next (15s cycle, 5s each) */
.promo { position: relative; height: 34px; overflow: hidden; text-align: center; border-bottom: 1px solid var(--line);
         background: linear-gradient(90deg, rgba(214,218,226,.05), rgba(214,218,226,.13) 50%, rgba(214,218,226,.05)); }
.promo span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--s2);
              font-family: var(--label); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
              white-space: nowrap; opacity: 0; animation: promo 15s infinite; }
.promo span:nth-child(2) { animation-delay: 5s; }
.promo span:nth-child(3) { animation-delay: 10s; }
@keyframes promo { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .promo span { animation: none; } .promo span:first-child { opacity: 1; } }

/* header: menu on the left (after the small logo on inner pages), the buy button on the right */
.top .wrap { display: flex; align-items: center; gap: var(--s4); height: 72px; }
.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.top .brand img { width: 68px; height: auto; }
.brand-name { font-family: var(--label); font-size: 11px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: #eef0f4; white-space: nowrap; }
.brand-name span { display: block; font-size: 7.5px; letter-spacing: .5em; color: var(--silver); }
@media (max-width: 1100px) { .brand-name { display: none; } }   /* tablets: the badge alone, so the menu and Buy button fit */
.top nav { display: flex; gap: var(--s4); }
.top nav a { font-family: var(--label); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); text-decoration: none; padding: var(--s2) 0; }
.top nav a:hover { color: var(--ink); }
.top .btn { margin-left: auto; }

/* the full menu (phones): opened by .menu-btn in the header */
.menu-btn { display: none; align-items: center; gap: 8px; font: 400 10px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
            background: none; border: 1px solid rgba(214,218,226,.35); border-radius: 999px; padding: 11px 14px; cursor: pointer; }
.menu-btn span { width: 14px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
.menu-btn span::after { content: ""; position: absolute; left: 0; right: 0; top: 2.5px; border-top: 1.5px solid currentColor; }
.menu-btn[aria-expanded="true"] { border-color: var(--glow); color: var(--glow); }
.menu-panel { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: var(--menu-top, 60px); overflow-y: auto; padding: var(--s3) var(--gutter) var(--s5);
              background: rgba(7,6,10,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.menu-panel[hidden] { display: none; }
.menu-main a { display: block; font: 400 28px/1.2 var(--serif); color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(214,218,226,.1); }
.menu-groups { display: grid; gap: var(--s4); margin: var(--s4) 0; }
.menu-groups .menu-h { font: 400 10px/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: var(--glow); margin-bottom: var(--s1); }
.menu-groups a { display: block; color: var(--soft); font-size: 16px; text-decoration: none; padding: 9px 0; }
.menu-panel > .btn { width: 100%; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); font-family: var(--label); font-size: 10.5px; line-height: 1;
       letter-spacing: .26em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; border-radius: 999px;
       padding: 18px var(--s4); color: #1a1210; background: linear-gradient(180deg, #fbf6f1, #e6d9cc); box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 8px 30px rgba(243,207,178,.18); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 10px 40px rgba(243,207,178,.32); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px rgba(214,218,226,.35) inset; }
.btn.ghost:hover { box-shadow: 0 0 0 1px rgba(214,218,226,.7) inset; }
.btn.small { padding: 15px var(--s3); font-size: 9.5px; }

/* sections: 64 above and below each, so every section is 128 from the next */
section.block { padding: var(--s5) 0; }
.hero { padding: var(--s5) 0 var(--s4); }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }

/* hero */
.hero { position: relative; text-align: center; }
.hero::before { content: ""; position: absolute; left: 50%; top: 40px; width: 900px; max-width: 100%; height: 560px; transform: translateX(-50%);
                background: radial-gradient(closest-side, rgba(243,207,178,.16), rgba(231,163,173,.06) 55%, transparent); pointer-events: none; }
.hero .logo { width: min(420px, 78vw); height: auto; margin: 0 auto var(--s4); filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(243,207,178,.12)); }
/* the welcome headline sits under the main headline, between two fine chrome rules */
.hero .welcome { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s2);
                 font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--silver); }
.hero .welcome::before, .hero .welcome::after { content: ""; width: 48px; height: 1px; background: var(--chrome); }
h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.08; letter-spacing: .005em; }
h1 em { font-style: italic; color: var(--glow); }
/* home hero: two ways in, the gift or the star search, which has its own page */
.hero .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
/* pages of their own (star search, contact) start a little below the header */
.hero.search { padding-top: var(--s6); min-height: 60vh; }
.block.solo { padding-top: var(--s6); }
.lead { font-size: 18px; color: var(--soft); max-width: 620px; margin: var(--s3) auto 0; }

/* star finder */
.finder { max-width: var(--narrow); margin: var(--s5) auto 0; padding: var(--s4); border-radius: 18px; text-align: left;
          background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line);
          box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.finder .label { margin-bottom: var(--s2); }
.finder form { display: flex; gap: var(--s2); }
/* the box: a fixed "ISD" in front, the visitor types the digits */
.finder .field { flex: 1; min-width: 0; display: flex; align-items: center; background: rgba(0,0,0,.35); border: 1px solid rgba(214,218,226,.25);
                 border-radius: 999px; padding: 0 var(--s3); cursor: text; }
.finder .field:focus-within { border-color: rgba(243,207,178,.7); box-shadow: 0 0 0 4px rgba(243,207,178,.1); }
.finder .isd { font-family: var(--label); font-size: 17px; letter-spacing: .14em; color: var(--glow); padding-right: 2px; }
.finder input { flex: 1; min-width: 0; font-family: var(--label); font-size: 17px; letter-spacing: .14em; color: var(--ink);
                background: transparent; border: 0; padding: var(--s2) 0; outline: none; }
.finder .note { margin-top: var(--s3); font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.finder .note b { color: var(--soft); font-weight: 400; }

/* section heads */
.head { text-align: center; max-width: var(--narrow); margin: 0 auto var(--s5); }
.head h2, .head h1.h2 { font-size: clamp(32px, 4vw, 46px); margin-top: var(--s2); }
.head p { color: var(--soft); margin-top: var(--s2); font-size: 17px; }

/* welcome card */
.welcome-note { max-width: var(--narrow); margin: 0 auto; text-align: center; padding: var(--s5); border-radius: 18px; border: 1px solid var(--line);
                background: radial-gradient(120% 140% at 50% 0%, rgba(243,207,178,.08), transparent 60%), rgba(255,255,255,.02); }
.welcome-note h2 { font-size: 34px; margin: var(--s2) 0; }
.welcome-note p { color: var(--soft); font-size: 16.5px; }

/* the gift */
.gift { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s5); align-items: stretch; padding: var(--s5); border-radius: 22px;
        border: 1px solid rgba(214,218,226,.24); background: radial-gradient(90% 120% at 0% 0%, rgba(243,207,178,.12), transparent 60%), rgba(255,255,255,.09);
        box-shadow: 0 40px 100px rgba(0,0,0,.45); }
/* photos and text sit side by side at matching heights; the buy strip runs under both */
.gallery { display: flex; flex-direction: column; padding: var(--s3); border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.3); }
.gift > div:nth-child(2) { display: flex; flex-direction: column; justify-content: center; }
/* framed photos: a fine chrome edge and a white mount, like a print in a frame */
.frame { display: block; padding: 10px; border-radius: 14px; background: linear-gradient(145deg, #f6f3ef, #ddd6cf);
         box-shadow: 0 0 0 1px rgba(214,218,226,.5), 0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(243,207,178,.08); }
.frame img { display: block; width: 100%; height: auto; border-radius: 6px; }
.gallery .main { margin-bottom: var(--s2); }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.gallery .main { box-shadow: 0 0 0 1px rgba(214,218,226,.5), 0 20px 50px rgba(0,0,0,.5); }
.thumbs .frame { padding: 4px; border-radius: 9px; border: 0; cursor: pointer; opacity: .62; box-shadow: 0 0 0 1px rgba(214,218,226,.35), 0 10px 24px rgba(0,0,0,.45); transition: opacity .2s, transform .2s; }
.thumbs .frame img { border-radius: 5px; }
.thumbs .frame:hover { opacity: .9; transform: translateY(-2px); }
.thumbs .frame.on { opacity: 1; box-shadow: 0 0 0 2px var(--glow), 0 10px 24px rgba(0,0,0,.45); }
.gift h2 { font-size: clamp(32px, 4vw, 44px); margin: var(--s2) 0; }
.gift p { color: var(--soft); }
.contents { list-style: none; margin: var(--s3) 0 0; }
.contents li { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; border-top: 1px solid rgba(214,218,226,.1); line-height: 1.5; }
.contents li:last-child { border-bottom: 1px solid rgba(214,218,226,.1); }
.contents .n { font-family: var(--label); font-size: 10px; letter-spacing: .2em; color: var(--glow); min-width: 28px; padding-top: 6px; }
.contents b { font-weight: 400; color: var(--ink); }
.contents span { color: var(--mute); font-size: 14.5px; }
.buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); border-radius: 14px;
       border: 1px solid rgba(243,207,178,.55); background: linear-gradient(90deg, rgba(243,207,178,.16), rgba(243,207,178,.06)); }
.buy .btn { flex: none; }
.price-inline { font-weight: 400; color: var(--ink); }
.gift .envelope { margin: 0; line-height: 1.45; }
.envelope b { display: block; font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 25px; line-height: 1.2; margin-bottom: 4px; }
.envelope span { color: var(--soft); font-size: 15px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.step { padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.step .label { color: var(--glow); }
.step h3 { font-size: 26px; margin: var(--s2) 0 var(--s1); }
.step p { color: var(--soft); font-size: 15.5px; }

/* contact */
.contact { max-width: var(--narrow); margin: 0 auto; padding: var(--s5); border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.contact .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
.contact label { display: block; font-family: var(--label); font-size: 9.5px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: var(--soft); margin-bottom: var(--s1); }
.contact input, .contact textarea { width: 100%; font: inherit; font-weight: 300; font-size: 16px; color: var(--ink); background: rgba(0,0,0,.35);
                                    border: 1px solid rgba(214,218,226,.22); border-radius: 10px; padding: 14px var(--s2); outline: none; }
.contact textarea { min-height: 136px; resize: vertical; }
.contact input:focus, .contact textarea:focus { border-color: rgba(243,207,178,.7); }
.contact .full { grid-column: 1 / -1; }
.contact .send { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.contact .ok { color: var(--glow); }
.hp { position: absolute; left: -9999px; }

/* footer: the logo at a size that stays sharp, three columns of links */
footer { border-top: 1px solid rgba(214,218,226,.1); padding: var(--s6) 0 var(--s5); margin-top: var(--s5); }
footer .wrap { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: var(--s5) var(--s4); align-items: start; }
footer .foot-brand img { width: 180px; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
footer .foot-brand p { color: var(--mute); font-size: 14px; margin-top: var(--s2); }
footer h4 { font-family: var(--label); font-weight: 400; font-size: 10px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; color: var(--silver); margin-bottom: var(--s2); }
footer .foot-col a { display: block; color: var(--soft); font-size: 15px; text-decoration: none; padding: 6px 0; }
footer .foot-col a:hover { color: var(--ink); }
footer .copy { grid-column: 1 / -1; color: var(--mute); font-size: 13px; border-top: 1px solid rgba(214,218,226,.08); padding-top: var(--s3); }

/* information pages */
.article { max-width: var(--narrow); margin: 0 auto; padding: var(--s5) 0 var(--s4); }
.article-head { text-align: center; margin-bottom: var(--s5); }
.article-head h1 { font-size: clamp(36px, 4.6vw, 54px); margin-top: var(--s2); }
.article .intro { font-size: 19px; color: var(--ink); }
.article h2 { font-size: 30px; margin: var(--s5) 0 var(--s2); }
.article h3 { font-size: 23px; margin: var(--s4) 0 var(--s1); }
.article p, .article li { color: var(--soft); font-size: 16.5px; line-height: 1.75; }
.article p + p, .article ul + p, .article ol + p { margin-top: var(--s2); }
.article ul, .article ol { margin: var(--s2) 0 0 1.2em; }
.article li + li { margin-top: var(--s1); }
.article strong { color: var(--ink); font-weight: 400; }
.article .callout { margin: var(--s4) 0; padding: var(--s3) var(--s4); border-left: 2px solid var(--glow); background: var(--panel); border-radius: 0 12px 12px 0; }
.article details { border-top: 1px solid rgba(214,218,226,.12); padding: var(--s2) 0; }
.article details:last-of-type { border-bottom: 1px solid rgba(214,218,226,.12); }
.article summary { cursor: pointer; font-family: var(--serif); font-size: 22px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
.article summary::after { content: "+"; color: var(--glow); font-family: var(--sans); }
.article details[open] summary::after { content: "–"; }
.article summary::-webkit-details-marker { display: none; }
.article details p { margin-top: var(--s1); }
.cta { max-width: var(--narrow); margin: 0 auto var(--s5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cta > div { padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.cta p { color: var(--soft); font-size: 15px; margin: var(--s2) 0 var(--s3); }

/* star page */
.star-hero { padding: var(--s6) 0 var(--s4); text-align: center; }
.star-hero .label { line-height: 1.7; }
.star-hero h1 { margin-top: var(--s2); }
.star-hero .share { margin-top: 0; }
.star-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: var(--s3); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s4); }
.fact .label { letter-spacing: .22em; line-height: 1.5; }
.fact { padding: var(--s3); border-radius: 14px; border: 1px solid var(--line); background: var(--panel); text-align: center; }
.fact .v { font-family: var(--serif); font-size: 28px; line-height: 1.15; margin-top: var(--s1); white-space: nowrap; }
.viewer { position: relative; border-radius: 18px; overflow: hidden; background: #050409; aspect-ratio: 16 / 9; border: 1px solid var(--line);
          box-shadow: 0 40px 100px rgba(0,0,0,.55); }
.viewer #map { position: absolute; inset: 0; height: 100% !important; }
.viewer #map canvas { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.viewer .tag { position: absolute; left: var(--s2); bottom: var(--s2); background: rgba(5,4,9,.75); padding: var(--s1) 12px; border-radius: 999px; font-size: 9px; letter-spacing: .24em; }
.printing { margin: var(--s6) 0; }
.print-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.print-head h2 { font-size: 32px; margin-top: var(--s2); }
.choices { display: flex; gap: var(--s2); flex-wrap: wrap; }
.seg { display: inline-flex; border-radius: 999px; box-shadow: 0 0 0 1px rgba(214,218,226,.3) inset; overflow: hidden; }
.seg button { font-family: var(--label); font-size: 9.5px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
              background: transparent; border: 0; padding: 14px var(--s2); cursor: pointer; }
.seg button.on { color: #1a1210; background: linear-gradient(180deg, #fbf6f1, #e6d9cc); }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.both { text-align: center; margin-top: var(--s4); }
.doc { padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.doc h3 { font-size: 26px; }
.doc p { color: var(--soft); font-size: 14.5px; margin: var(--s1) 0 var(--s2); }
.doc .row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.notice { max-width: var(--narrow); margin: var(--s6) auto; text-align: center; padding: var(--s5); border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.notice h1 { font-size: clamp(30px, 4vw, 42px); margin: var(--s2) 0; }
.notice p { color: var(--soft); }
.notice .btn { margin-top: var(--s4); }
.loading { text-align: center; padding: 96px 0; color: var(--mute); }

/* home: try a name on the real certificate (cert.html in a frame, scaled by --k, set from its width) */
.try { display: grid; grid-template-columns: 1fr minmax(0, 420px); grid-template-areas: "copy cert" "buy cert"; gap: 0 var(--s5); align-items: end;
       padding: var(--s5); border-radius: 22px; border: 1px solid var(--line); background: var(--panel); }
.try-copy { grid-area: copy; } .try-cert { grid-area: cert; align-self: center; } .try-buy { grid-area: buy; align-self: start; }
.try h2 { font-size: clamp(32px, 4vw, 44px); margin: var(--s2) 0; }
.try h2 em { font-style: italic; color: var(--glow); }
.try-copy > p { color: var(--soft); }
.try-field { display: block; margin: var(--s4) 0 var(--s2); }
.try-field .label { display: block; font-size: 9.5px; letter-spacing: .24em; margin-bottom: var(--s1); }
.try-field input { width: 100%; font: 400 24px/1.3 var(--serif); color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid rgba(214,218,226,.25);
                   border-radius: 12px; padding: 14px var(--s2); outline: none; }
.try-field input:focus { border-color: rgba(243,207,178,.7); box-shadow: 0 0 0 4px rgba(243,207,178,.1); }
.try-note { font-size: 13.5px; color: var(--mute); line-height: 1.6; margin-bottom: var(--s3); }
.try-sheet { position: relative; aspect-ratio: 148 / 210; overflow: hidden; border-radius: 4px; background: #fff;
             box-shadow: 0 0 0 1px rgba(214,218,226,.4), 0 30px 70px rgba(0,0,0,.6), 0 0 60px rgba(243,207,178,.1); }
.try-sheet iframe { position: absolute; left: 0; top: 0; width: 559.37px; height: 793.7px; border: 0; transform: scale(var(--k, .7)); transform-origin: 0 0; pointer-events: none; }
.try-sheet .sample { position: absolute; top: 12px; right: 12px; font-size: 8.5px; letter-spacing: .24em; color: #1a1210; background: rgba(243,207,178,.9); padding: 6px 10px; border-radius: 999px; }

/* home: occasions, the guides as a grid of named panels (no photos: the night sky is this site's picture) */
.occasions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.occasions a { display: block; padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; transition: border-color .2s, transform .2s; }
.occasions a:hover { border-color: rgba(243,207,178,.5); transform: translateY(-2px); }
.occasions .label { color: var(--glow); font-size: 9.5px; }
.occasions b { display: block; font: 400 26px/1.2 var(--serif); color: var(--ink); margin: var(--s2) 0 6px; }
.occasions span:last-child { color: var(--soft); font-size: 15px; }

/* home: a few questions, the full list on /faq */
.faq details { border-top: 1px solid rgba(214,218,226,.12); padding: var(--s2) 0; }
.faq details:last-child { border-bottom: 1px solid rgba(214,218,226,.12); }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 22px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--glow); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--soft); font-size: 16px; margin-top: var(--s1); }
.faq-more { text-align: center; margin-top: var(--s3); font-family: var(--label); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.faq-more a { text-decoration: none; }

/* December: the order-by line above the header, shown by its own script from 1 to 18 December (UK date) */
.xmas { display: block; text-align: center; padding: 10px var(--s2); font-size: 14px; line-height: 1.45; color: var(--ink);
        background: linear-gradient(90deg, rgba(243,207,178,.06), rgba(243,207,178,.2) 50%, rgba(243,207,178,.06)); border-bottom: 1px solid rgba(243,207,178,.25); }
.xmas b { font-family: var(--label); font-weight: 400; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--glow); margin-right: var(--s1); }
.xmas[hidden] { display: none; }

/* phones: a slim Buy on Amazon bar once the page's own buy buttons have scrolled away */
.buybar { display: none; }
@media (max-width: 640px) {
  .tonight .now { line-height: 1.6; }
  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; justify-content: space-between; gap: var(--s2);
            padding: 10px var(--s2) calc(10px + env(safe-area-inset-bottom)); background: rgba(7,6,10,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(214,218,226,.14); transform: translateY(110%); transition: transform .3s; }
  .buybar.on { transform: none; }
  .buybar p { font-size: 13px; line-height: 1.3; color: var(--soft); }
  .buybar p b { display: block; font: 400 19px/1.2 var(--serif); color: var(--ink); }
  .buybar .btn { flex: none; padding: 14px 18px; }
}

/* star page: tonight, worked out live for the visitor's sky */
.tonight { display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s4); align-items: center; margin: var(--s4) 0 0; padding: var(--s4);
           border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.tonight h2 { font-size: clamp(26px, 3vw, 34px); margin: var(--s1) 0; }
.tonight .now { display: inline-flex; align-items: center; gap: var(--s1); }
.tonight .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.tonight .dot.up { background: var(--glow); box-shadow: 0 0 12px var(--glow); }
.tonight p { color: var(--soft); font-size: 15.5px; }
.tonight p + p { margin-top: 6px; }
.tonight .where { grid-column: 1 / -1; font-size: 13px; color: var(--mute); border-top: 1px solid rgba(214,218,226,.1); padding-top: var(--s2); }
.tonight .where button { font: inherit; color: var(--glow); background: none; border: 0; padding: 12px 4px; margin: -12px 0; cursor: pointer; text-decoration: underline; }
.tonight .compass { width: 112px; height: 112px; }

/* Trustpilot, in house colours (built from REVIEWS in tools/build-site.js; absent until there are reviews) */
.tp-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px;
          font: 400 14px/1.3 Arial, Helvetica, sans-serif; color: #1b2a4a; text-decoration: none; background: #ffffff; }
.tp-bar:hover .tp-num { text-decoration: underline; }
.tp-bar b { color: #00915f; font-weight: normal; }
.tp-bar .tp-logo { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; letter-spacing: -.2px; color: #191919; }
.tp-bar .tp-logo svg { width: 17px; height: 17px; display: block; }
.tp-stars { display: inline-flex; gap: 2px; }
.tp-stars i { width: 17px; height: 17px; display: block; background-color: #dcdce6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3.6l2.5 6.1 6.6.5-5 4.3 1.6 6.4L12 17.4l-5.7 3.5 1.6-6.4-5-4.3 6.6-.5z'/%3E%3C/svg%3E");
  background-size: 13px 13px; background-position: center; background-repeat: no-repeat; }
.tp-stars i.on { background-color: #00b67a; }
.tp-stars i.part { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3.6l2.5 6.1 6.6.5-5 4.3 1.6 6.4L12 17.4l-5.7 3.5 1.6-6.4-5-4.3 6.6-.5z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
  linear-gradient(90deg, #00b67a var(--p), #dcdce6 var(--p)); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.quotes figure { margin: 0; padding: var(--s4); border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.quotes blockquote { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--ink); }
.quotes figcaption { margin-top: var(--s2); font-size: 13px; color: var(--mute); }
.quotes figcaption span { color: var(--glow); letter-spacing: .1em; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }


/* the review ask as a Trustpilot banner, as on The Star Naming Co.: white, the green star and name; the whole banner is the link */
a.tp-banner { display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap;
  max-width: 560px; margin: 0 auto; padding: 14px 20px; background: #ffffff; border-radius: 6px;
  color: #1b2a4a; text-decoration: none; font: 400 16px/1.3 Arial, Helvetica, sans-serif; }
a.tp-banner .tp-logo { display: inline-flex; align-items: center; gap: 4px; font-size: 19px; color: #191919; font-weight: 700; letter-spacing: -.01em; }
a.tp-banner .tp-logo svg { width: 22px; height: 22px; }
a.tp-banner b { color: #00915f; font-weight: normal; white-space: nowrap; }
a.tp-banner:hover b { text-decoration: underline; }
a.tp-banner:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.tp-top { margin: var(--s3) auto 0; }
footer .tp-banner { grid-column: 1 / -1; margin-bottom: var(--s2); }
.no-review footer .tp-banner { display: none; }   /* Find your star: no review ask before they have seen their star */

/* star page: send the star as a gift (a link that opens gift.html) */
.giftlink { margin: var(--s4) 0 0; padding: var(--s4); border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.giftlink h2 { font-size: clamp(26px, 3vw, 34px); margin: var(--s1) 0; }
.giftlink > p { color: var(--soft); font-size: 15.5px; }
.giftlink .grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s2); margin: var(--s3) 0; }
.giftlink label { display: block; font-family: var(--label); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--soft); margin-bottom: var(--s1); }
.giftlink input { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid rgba(214,218,226,.25); border-radius: 10px; padding: 12px 14px; outline: none; }
.giftlink input:focus { border-color: rgba(243,207,178,.7); }
.giftlink .row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.giftlink .done { color: var(--glow); font-size: 14px; margin-top: var(--s2); }

/* tablet */
@media (max-width: 1080px) {
  footer .wrap { grid-template-columns: repeat(4, 1fr); }
  footer .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .gift { grid-template-columns: 1fr; gap: var(--s5); }
  .gift > div:nth-child(2) { text-align: center; }
  .contents { text-align: left; }
  .buy { flex-direction: column; text-align: center; }
  .steps { grid-template-columns: 1fr; gap: var(--s2); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: 1fr; gap: var(--s2); }
  .try { grid-template-columns: 1fr; grid-template-areas: "copy" "cert" "buy"; gap: var(--s4); text-align: center; }
  .try-copy .try-field { margin-bottom: 0; }
  .try-cert { max-width: 360px; margin: 0 auto; width: 100%; }
  .try-field { text-align: left; }
  .occasions { grid-template-columns: 1fr 1fr; }
  .giftlink .grid { grid-template-columns: 1fr; }
}

/* phone: scale 8 / 16 / 24 / 32 / 48; every card the same 24 padding; 16 gutters */
@media (max-width: 640px) {
  .tonight .now { line-height: 1.6; }
  :root { --gutter: 16px; }
  /* phones (1 Nov 2026 review): the badge home on the left and a Menu button that opens the full menu */
  .top .wrap { display: flex; height: 60px; gap: 10px; }
  .top nav { display: none; }
  .top .brand img { width: 54px; }
  .top .btn { display: none; }               /* the sticky Buy on Amazon bar at the bottom does this job on phones */
  .menu-btn { display: inline-flex; margin-left: auto; }
  .btn.small { padding: 14px 20px; }

  section.block { padding: var(--s5) 0 0; }
  .hero { padding: var(--s4) 0 0; }
  .hero .logo { margin-bottom: var(--s3); }
  .hero .welcome { display: none; }
  /* phones: a line may wrap to two rather than run off the screen */
  .promo { height: 42px; }
  .promo span { font-size: 9px; letter-spacing: .14em; line-height: 1.6; white-space: normal; padding: 0 var(--s3); }
  .hero .welcome::before, .hero .welcome::after { display: none; }
  h1 em { white-space: nowrap; }
  .lead { font-size: 16px; margin-top: var(--s2); }

  .finder, .welcome-note, .step, .contact, .notice, .doc { padding: var(--s3); }
  .finder { margin-top: var(--s4); }
  .finder form { flex-direction: column; }
  .finder .note { margin-top: var(--s2); }

  .head { margin-bottom: var(--s4); }
  .welcome-note h2 { font-size: 30px; }
  .gift { gap: var(--s4); padding: var(--s2); border-radius: 18px; }
  .gallery { padding: var(--s2); }
  .gift > div:nth-child(2) { padding: 0 var(--s1); }
  .buy { padding: var(--s3) var(--s2); }
  .gallery .main { margin-bottom: var(--s1); }
  .thumbs { gap: var(--s1); }
  .contact .grid { grid-template-columns: 1fr; gap: var(--s2); }
  .contact .send { margin-top: var(--s3); }

  footer { padding: var(--s5) 0 var(--s4); }
  footer .wrap { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  footer .foot-brand { grid-column: 1 / -1; text-align: center; }
  footer .foot-brand img { width: 160px; margin: 0 auto; }
  footer .foot-col a { padding: 10px 0; }
  .article { padding-top: var(--s4); }
  .article-head { margin-bottom: var(--s4); }
  .article .intro { font-size: 17.5px; }
  .article h2 { font-size: 26px; margin-top: var(--s4); }
  .cta { grid-template-columns: 1fr; gap: var(--s2); }
  .cta > div { padding: var(--s3); }

  .star-hero { padding: var(--s4) 0 var(--s3); }
  .star-hero .label { letter-spacing: .2em; }
  .star-hero h1 { margin-top: var(--s1); }
  .facts { margin-bottom: var(--s3); }
  .fact { padding: var(--s2) 12px; }
  .fact .label { font-size: 9px; letter-spacing: .18em; line-height: 1.5; }
  .fact .v { font-size: 22px; }
  .viewer { aspect-ratio: 1 / 1; }
  .viewer .tag { left: 50%; right: auto; transform: translateX(-50%); }
  .viewer .tag .wide { display: none; }
  .printing { margin: var(--s5) 0 0; }
  .print-head { flex-direction: column; align-items: stretch; text-align: center; }
  .print-head h2 { font-size: 28px; }
  .choices { justify-content: center; }
  .notice { margin: var(--s5) auto 0; }
  .notice .btn { margin-top: var(--s3); }
  .try, .tonight, .giftlink { padding: var(--s3); }
  .try { gap: var(--s4); border-radius: 18px; }
  .try-field { margin-top: var(--s3); }
  .occasions { grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .occasions a { padding: var(--s2); }
  .occasions b { font-size: 20px; margin-top: var(--s1); }
  .occasions span:last-child { font-size: 13px; line-height: 1.45; display: block; }
  .faq summary { font-size: 20px; }
  .tonight { grid-template-columns: 1fr; text-align: center; margin-top: var(--s3); }
  .tonight .compass { margin: 0 auto; }
  .giftlink { margin-top: var(--s3); text-align: center; }
  .giftlink .grid { text-align: left; }
  .giftlink .row { justify-content: center; }
  body.has-buybar footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---- 1 Nov 2026 review: break up the sameness, keeping the ISD look ----
   Fewer identical boxes (steps and occasions sit open on the starfield), one filled cream button per area, the price
   big and in peach, the buy strip as a photo band, readable small text, section labels in peach, the star's name large. */
.gift, .try { background: rgba(255,255,255,.07); }
.step { padding: 0; border: 0; background: none; }
.step .label { display: block; font: 400 52px/1 var(--serif); letter-spacing: 0; color: var(--glow); }
.step h3 { margin-top: var(--s1); }
.occasions a { padding: var(--s2) 0 var(--s2) var(--s3); border: 0; border-left: 1px solid rgba(243,207,178,.45); border-radius: 0; background: none; }
.occasions a:hover { transform: none; border-left-color: var(--glow); }
.occasions a:hover b { color: var(--glow); }
.occasions b { margin-top: 0; }
.occasions span:last-child { font-size: 15px; }
.buy { position: relative; overflow: hidden; padding: var(--s4); }
.buy-act { display: flex; align-items: center; gap: var(--s3); flex: none; }
.price { font: 400 46px/1 var(--serif); color: var(--glow); font-variant-numeric: lining-nums; }
.cta .buy-act { justify-content: space-between; }
.cta .price { font-size: 36px; }
.contents b { font: 400 21px/1.25 var(--serif); }
.contents span, .try-note, .finder .note, .tonight .where { color: var(--soft); font-size: 15px; font-weight: 400; }
.head .label, .gift .label, .try .label, .star-hero .label, .tonight .label, .giftlink > .label, .article-head .label, .cta .label, footer h4 { color: var(--glow); }
.fact .label { font-size: 11px; }
.seg button.on { background: rgba(243,207,178,.12); color: var(--glow); box-shadow: 0 0 0 1px var(--glow) inset; }
.star-hero h1 { font-size: clamp(56px, 12vw, 88px); text-shadow: 0 0 40px rgba(243,207,178,.25); }
.article { position: relative; }
.article::before { content: ""; position: absolute; inset: -24px -40px; z-index: -1; border-radius: 40px; background: rgba(7,6,10,.78); filter: blur(24px); }
.article h2 { color: var(--glow); }
@media (max-width: 860px) {
  .buy { padding: var(--s3); }
  .buy-act { flex-direction: column; gap: var(--s2); }
}
@media (max-width: 640px) {
  .occasions { gap: var(--s2) var(--s2); }
  .occasions a { padding: 4px 0 4px var(--s2); }
  .occasions b { font-size: 21px; }
  .occasions span:last-child { font-size: 14.5px; }
  .step .label { font-size: 44px; }
  .price { font-size: 40px; }
}

/* star page: quick links under the star's name to the parts owners come for */
.jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--s3); }
.jump a { font: 400 10px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--glow); text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(243,207,178,.35); }
.jump a:hover { border-bottom-color: var(--glow); }
.tp-top { margin: var(--s5) auto 0; }
[id] { scroll-margin-top: 90px; }

/* guide pages: where you are, and where to go next */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-bottom: var(--s3); font-size: 13px; color: var(--mute); }
.crumbs a { color: var(--soft); }
.crumbs [aria-current] { color: var(--soft); }
.more-guides { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(214,218,226,.12); display: grid; gap: 2px; }
.more-guides .label { color: var(--glow); margin-bottom: var(--s1); }
.more-guides a { font: 400 21px/1.3 var(--serif); color: var(--ink); text-decoration: none; padding: 8px 0; }
.more-guides a::after { content: " ›"; color: var(--glow); }
.more-guides a:hover { color: var(--glow); }

/* footer link groups: <details>, always open on wider screens, folded on phones (footer.html script) */
footer .foot-col summary { list-style: none; font-family: var(--label); font-weight: 400; font-size: 10px; line-height: 1; letter-spacing: .28em;
  text-transform: uppercase; color: var(--glow); margin-bottom: var(--s2); cursor: default; }
footer .foot-col summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) {
  footer .wrap { grid-template-columns: 1fr; gap: 0; }
  footer .foot-col { border-top: 1px solid rgba(214,218,226,.1); }
  footer .foot-col summary { cursor: pointer; margin: 0; padding: 18px 0; display: flex; justify-content: space-between; }
  footer .foot-col summary::after { content: "+"; font-family: var(--sans); font-size: 16px; letter-spacing: 0; }
  footer .foot-col[open] summary::after { content: "–"; }
  footer .foot-col[open] { padding-bottom: var(--s2); }
}
.step .label { font-variant-numeric: lining-nums; }
.try-sheet .sample { color: #1a1210; }

/* ---- brand guide (brand/BRAND-GUIDE.md §4, 1 Nov 2026): three families in fixed roles ----
   Michroma = the logo's voice (menus, buttons, labels); Jost = headlines (light) and running text,
   weight 400 under 16px so small text never looks faint. */
.menu-main a { font: 400 15px/1.2 var(--label); letter-spacing: .22em; text-transform: uppercase; padding: 18px 0; }
.menu-groups a { font: 400 16px/1.4 var(--sans); }
.step p, .doc p, .cta p, .tonight p, .giftlink > p, .occasions span:last-child, footer .foot-col a, .crumbs, .faq p,
.try-copy > p, .gift p, .head p, .notice p, .finder .note, .buybar p { font-weight: 400; }
/* the price band: no photo behind it (the zoomed envelope was rejected); a quiet card with a peach edge */
.buy { background: linear-gradient(135deg, rgba(243,207,178,.10), rgba(243,207,178,.03)); border: 1px solid rgba(243,207,178,.35); }

/* star page: sharing is a quiet text link (Send as a gift is the main way to share) */
.share-link { margin-top: var(--s2); background: none; border: 0; padding: 8px 0; cursor: pointer; font: 400 14px var(--sans); color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.share-link:hover { color: var(--glow); }
/* guide pages: the ordering note carries its own Buy button */
.buy-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.buy-callout .btn { flex: none; }
@media (max-width: 860px) { .buy-callout { flex-direction: column; align-items: stretch; } }
/* desktop menu: five items, tighter between 861 and 1240px */
@media (max-width: 1240px) { .top nav { gap: var(--s3); } .top nav a { letter-spacing: .18em; } }
.article-head .updated { margin-top: var(--s2); font-size: 13px; color: var(--mute); }

/* ---- two fonts only (Russell, 1 Nov 2026: "about 10 different fonts ... make no sense") ----
   Michroma, the logo's wide lettering: menus, buttons, labels. Jost: everything else, including headlines, names and
   prices, in its light weight at large sizes. No serif and no italics anywhere (brand/BRAND-GUIDE.md section 4). */
:root { --serif: Jost, Futura, Arial, sans-serif; }
h1, h2, h3, .occasions b, .contents b, .envelope b, .more-guides a, .faq summary, .article summary, .menu-main a:not(*), .price, .buybar p b,
.try-field input, .tonight h2, .giftlink h2, .doc h3, .step h3, .step .label, .star-hero h1, .fact .v { font-weight: 300; letter-spacing: -.005em; }
em, h1 em, .try h2 em, .hero .welcome { font-style: normal; }
h1 em, .try h2 em { color: var(--glow); }
h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.12; }
.head h2, .head h1.h2, .gift h2, .try h2 { font-size: clamp(28px, 3.4vw, 40px); }
.article-head h1 { font-size: clamp(32px, 4vw, 48px); }
.article h2 { font-size: 26px; }
.article h3, .step h3, .doc h3 { font-size: 21px; }
.occasions b { font-size: 21px; }
.contents b { font-size: 18px; }
.faq summary, .article summary { font-size: 18px; }
.more-guides a { font-size: 18px; }
.envelope b { font-size: 21px; }
.price { font-size: 40px; }
.star-hero h1 { font-size: clamp(44px, 9vw, 72px); }
.fact .v { font-size: 22px; }
.step .label { font-size: 40px; font-weight: 200; }
.hero .welcome { font-family: var(--label); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
@media (max-width: 640px) {
  h1 { font-size: 34px; }
  .star-hero h1 { font-size: 46px; }
  .occasions b { font-size: 18px; }
  .price { font-size: 36px; }
}

/* Russell, 1 Nov 2026: the open (unboxed) steps and occasions looked like they were floating. Back in thin-lined boxes,
   keeping the big peach step numbers and peach occasion titles so they don't match every other card. */
.step { padding: var(--s4); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.occasions a { padding: var(--s3); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.occasions a:hover { border-color: rgba(243,207,178,.5); }
@media (max-width: 640px) {
  .step { padding: var(--s3); }
  .occasions a { padding: var(--s2); }
}
@media (max-width: 640px) { .occasions a:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* cookie bar (Google Analytics consent, see ANALYTICS in tools/build-site.js) */
.cookie { position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 50; max-width: 760px; margin: 0 auto;
          display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: 16px; border: 1px solid rgba(243,207,178,.35);
          background: rgba(7,6,10,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.cookie[hidden] { display: none; }
.cookie p { font-size: 14.5px; font-weight: 400; color: var(--soft); line-height: 1.5; }
.cookie-act { display: flex; gap: var(--s1); flex: none; }
body.cookie-open .buybar { display: none; }
footer .copy a { color: var(--soft); }
@media (max-width: 640px) { .cookie { flex-direction: column; align-items: stretch; left: 12px; right: 12px; bottom: 12px; padding: var(--s2); } .cookie-act .btn { flex: 1; } }