/* ============================================================
   Sapphireworld & Co. — concept picker
   Built in the client's own brand palette, pulled from
   sapphireworld.com.au (gold / copper / rose / ink ramps).
   ============================================================ */

:root{
  --rose:#FCF0ED; --rose-2:#F7E2DB; --rose-3:#F2D5CB;
  --white:#FFFFFF; --platinum:#E8E8E8;
  --olive:#3D3D3D; --ink:#2B2A28; --muted:#6E6660;
  --gold:#DDAB17; --gold-deep:#B97E12; --gold-mid:#DFAD17;
  --gold-hi:#EBB81A; --gold-pale:#FFF885; --gold-text:#8F6A08;
  --copper:#A44B2C; --copper-deep:#6D2118; --copper-mid:#BF6036; --copper-light:#EBA67C;
  --midnight:#010C20; --midnight-2:#01142E;
  --grad-gold:linear-gradient(100deg, var(--gold-pale) 0%, var(--gold-hi) 38%, var(--gold-mid) 58%, var(--gold-deep) 100%);
  --grad-copper:linear-gradient(120deg, var(--copper-deep) 0%, var(--copper) 42%, var(--copper-mid) 62%, var(--copper-deep) 100%);
  --font-primary:'Poppins', system-ui, sans-serif;
  --font-secondary:'Montserrat', system-ui, sans-serif;
  --font-script:'Great Vibes', cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -28px rgba(109,33,24,.28);
  --line:rgba(109,33,24,.15);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--rose); color:var(--muted);
  font-family:var(--font-secondary); font-weight:300; font-size:16.5px; line-height:1.75;
  overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; height:auto}  /* height:auto or the HTML width/height attributes pin a pixel height and aspect-ratio is ignored */
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-primary); font-weight:400; color:var(--ink); margin:0; line-height:1.18}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap), calc(100% - 40px)); margin-inline:auto}
:focus-visible{outline:2px solid var(--copper); outline-offset:3px; border-radius:4px}
.script{font-family:var(--font-script); font-weight:400}
.copper{background:var(--grad-copper); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}

/* ---------- top ---------- */
.top{border-bottom:1px solid var(--line); background:rgba(252,240,237,.94);
  position:sticky; top:0; z-index:30; backdrop-filter:blur(12px)}
.top-in{min-height:72px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; text-decoration:none; padding:4px 0}
.brand img{height:48px; width:auto}
/* inline-flex would drop the space before the bolded word, so keep it inline-block */
.by-top{margin-left:auto; text-decoration:none; font-size:12.5px; letter-spacing:.06em;
  color:var(--muted); padding:11px 2px; min-height:44px; display:inline-block; line-height:22px}
.by-top b{color:var(--copper-deep); font-weight:600}
.by-top:hover b{color:var(--copper)}

/* ---------- intro ---------- */
.intro{padding:clamp(46px,6vw,84px) 0 clamp(30px,4vw,48px)}
.kicker{font-size:11.5px; letter-spacing:.30em; text-transform:uppercase; color:var(--copper);
  font-weight:500; margin:0 0 18px}
.intro h1{font-size:clamp(31px,4.6vw,54px); font-weight:300; letter-spacing:-.014em; max-width:20ch}
.intro h1 .script{font-size:1.18em}
.intro .lede{font-size:clamp(15.5px,1.4vw,17.5px); max-width:64ch; margin:20px 0 0}
.meta{display:flex; flex-wrap:wrap; gap:10px 12px; margin:26px 0 0}
.meta span{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); background:#fff; border-radius:2px; padding:9px 14px}
.meta b{color:var(--ink); font-weight:600}

/* ---------- category heading ---------- */
.cat{display:flex; align-items:center; gap:16px; margin:clamp(34px,4.4vw,56px) 0 22px;
  font-family:var(--font-primary); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; color:var(--copper-deep)}
.cat::after{content:""; flex:1; height:1px; background:var(--line)}
.cat i{font-style:normal; font-size:10.5px; letter-spacing:.16em; color:#fff; background:var(--grad-copper);
  border-radius:2px; padding:4px 9px}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card{display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--copper-light)}
.card.wide{grid-column:1 / -1; flex-direction:row}
.card.wide .thumb{flex:0 0 46%}
.card.feat{border-color:var(--gold-deep); box-shadow:0 0 0 1px var(--gold-deep) inset}
.thumb{background:var(--midnight); position:relative; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; aspect-ratio:16/10}
.card.wide .thumb img{aspect-ratio:auto; min-height:100%}
.card-in{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.pill{align-self:flex-start; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--copper-deep); border-radius:2px; padding:5px 10px; margin:0 0 14px}
.pill.hot{background:var(--grad-gold); border-color:transparent; color:#20180A; font-weight:600}
.card h3{font-size:clamp(22px,2.5vw,28px); font-weight:400}
.card h3 .script{font-size:1.2em}
.dir{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); margin:6px 0 14px}
.card p{font-size:14.5px; margin:0 0 16px}
.feat-list{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:7px}
.feat-list li{font-size:13.5px; display:flex; gap:9px; align-items:flex-start}
.feat-list li::before{content:"\25C7"; color:var(--gold-deep); font-size:9px; margin-top:5px; flex:0 0 auto}
.go{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; font-weight:500;
  background:var(--grad-copper); border-radius:2px; padding:14px 22px; min-height:48px}
.card:hover .go{background:var(--grad-gold); color:#20180A}

/* reference card */
.ref{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:3px; padding:24px 26px; text-decoration:none;
  transition:border-color .35s var(--ease), transform .35s var(--ease)}
.ref:hover{border-color:var(--copper-light); transform:translateY(-3px)}
.ref h3{font-size:20px; font-weight:400}
.ref p{font-size:14px; margin:6px 0 0}
.ref .go{margin:0; background:#fff; color:var(--copper-deep); border:1px solid var(--copper)}

/* ---------- disclosure panel ---------- */
.panel{background:var(--ink); color:rgba(255,255,255,.72); border-radius:3px;
  padding:clamp(28px,3.6vw,48px); margin:clamp(34px,4.4vw,56px) 0 0}
.panel h2{color:#fff; font-size:clamp(23px,2.8vw,32px); font-weight:300; margin:0 0 8px}
.panel > p{font-size:14.5px; margin:0 0 28px; max-width:70ch}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px)}
.cols h4{font-family:var(--font-primary); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; margin:0 0 16px}
.cols .real h4{color:var(--gold-hi)}
.cols .mock h4{color:var(--copper-light)}
.cols ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.cols li{font-size:14px; display:flex; gap:10px; align-items:flex-start; line-height:1.6}
.cols li::before{content:"\25C7"; font-size:8px; margin-top:7px; flex:0 0 auto}
.cols .real li::before{color:var(--gold-hi)}
.cols .mock li::before{color:var(--copper-light)}
.fix{margin:30px 0 0; padding:26px 0 0; border-top:1px solid rgba(255,255,255,.14)}
.fix h4{font-family:var(--font-primary); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:#fff; margin:0 0 16px}
.fix ol{margin:0; padding:0 0 0 20px; display:grid; gap:11px}
.fix li{font-size:14px; line-height:1.65}
.fix b{color:#fff; font-weight:500}
.fix .caveat{font-size:12.5px; color:rgba(255,255,255,.5); margin:20px 0 0; padding:0}

/* ---------- footer ---------- */
.ft{margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); background:#fff}
.ft-in{padding:24px 0 30px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  justify-content:space-between}
.ft-in small{font-size:12.5px; color:var(--muted)}
.by{font-family:var(--font-secondary); font-size:12.5px; color:var(--muted); text-decoration:none;
  display:inline-block; padding:10px 2px; min-height:44px; line-height:24px}
.by b{color:var(--copper-deep); font-weight:600}
.by:hover b{color:var(--copper)}

/* ---------- motion ---------- */
html.js .card, html.js .panel, html.js .ref{opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0ms)}
html.js .card.in, html.js .panel.in, html.js .ref.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .card, html.js .panel, html.js .ref{opacity:1!important; transform:none!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .card.wide{flex-direction:column}
  .card.wide .thumb{flex:none}
  .card.wide .thumb img{aspect-ratio:16/10; min-height:0}
  .cols{grid-template-columns:1fr; gap:28px}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .brand img{height:44px}
  .intro{padding:36px 0 26px}
  .intro h1{font-size:clamp(28px,8vw,36px)}
  .intro .lede{font-size:15.5px}
  .meta span{font-size:11px; padding:8px 12px}
  .grid{grid-template-columns:1fr; gap:16px}
  .card-in{padding:22px 20px 24px}
  .go{width:100%; justify-content:center}
  .ref{grid-template-columns:1fr; gap:16px}
  .ref .go{width:100%}
  .cat{gap:12px; font-size:11px; letter-spacing:.2em; flex-wrap:wrap}
  .panel{padding:26px 20px}
  .ft-in{justify-content:flex-start; gap:2px 20px}
}