/* Bijoux case studies — shared styling for both readings */
:root{
  --ink:#060606; --red:#E0261C; --cream:#F3EFE7; --camel:#C69B6B;
  --soft:rgba(243,239,231,.72); --dim:rgba(243,239,231,.46);
  --line:rgba(243,239,231,.14); --card:rgba(255,255,255,.035);
  --font:'Quicksand',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--font);font-weight:500;
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:3px 3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;position:relative;z-index:1}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.15}
a{color:inherit}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(6,6,6,.88);
    backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navin{max-width:var(--max);margin:0 auto;padding:12px 28px;display:flex;gap:6px;
       align-items:center;overflow-x:auto;scrollbar-width:none}
.navin::-webkit-scrollbar{display:none}
.brand{font-weight:700;color:var(--red);margin-right:12px;white-space:nowrap;font-size:17px;
       text-decoration:none}
nav a{font-size:12.5px;font-weight:600;color:var(--dim);text-decoration:none;white-space:nowrap;
      padding:6px 10px;border-radius:99px;transition:.18s}
nav a:hover{color:var(--cream);background:rgba(255,255,255,.06)}
nav a.on{color:var(--cream);background:rgba(224,38,28,.18)}
.flip{margin-left:auto;border:1px solid rgba(198,155,107,.4);color:var(--camel)!important;
      font-weight:700;white-space:nowrap}
.flip:hover{background:rgba(198,155,107,.14)!important;color:var(--cream)!important}

/* hero */
header{padding:92px 0 64px;text-align:center}
.heart{font-size:52px;line-height:1;color:var(--red);
       filter:drop-shadow(0 0 22px rgba(224,38,28,.55));
       animation:sway 4s ease-in-out infinite;display:inline-block;transform-origin:top center}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
header h1{font-size:clamp(52px,10vw,88px);color:var(--red);margin:14px 0 4px}
.tag{color:var(--soft);font-size:clamp(15px,2.2vw,19px)}
.role{margin-top:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--camel);font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:30px}
.pill{border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:12px;
      font-weight:600;color:var(--soft);background:var(--card)}

/* live status — this project is still moving, and the header should say so */
.pill.live{color:var(--red);border-color:rgba(224,38,28,.42);background:rgba(224,38,28,.09);
      display:inline-flex;align-items:center;gap:7px}
.pill.live .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
      box-shadow:0 0 0 0 rgba(224,38,28,.55);animation:livepulse 2.4s ease-out infinite}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(224,38,28,.5)}
  70%{box-shadow:0 0 0 7px rgba(224,38,28,0)}
  100%{box-shadow:0 0 0 0 rgba(224,38,28,0)}
}
@media (prefers-reduced-motion:reduce){
  .pill.live .dot{animation:none}
}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 14px;text-align:center}
.stat b{display:block;font-size:30px;color:var(--red);line-height:1.1}
.stat span{font-size:11.5px;color:var(--dim);font-weight:600}

section{padding:60px 0;border-top:1px solid var(--line)}
section>.wrap>h2{font-size:clamp(26px,4.4vw,38px);margin-bottom:10px}
.lede{color:var(--soft);font-size:16.5px;max-width:64ch;margin-bottom:28px}
p{color:var(--soft);max-width:68ch;margin-bottom:13px}
strong{color:var(--cream);font-weight:700}
em{color:var(--camel);font-style:normal;font-weight:600}
h3{font-size:19px;margin:28px 0 10px}
ul{color:var(--soft);max-width:68ch;margin:0 0 14px 20px}
li{margin-bottom:7px}

/* code */
pre{background:#0c0c0d;border:1px solid var(--line);border-radius:14px;padding:15px 17px;
    overflow-x:auto;margin:12px 0 16px;font-family:var(--mono);font-size:12.5px;line-height:1.65}
pre code{color:#d8d3ca}
.c-kw{color:#E0261C;font-weight:500}
.c-fn{color:#C69B6B}
.c-num{color:#8fbf9f}
.c-cm{color:rgba(243,239,231,.36);font-style:italic}
.c-str{color:#d8a25e}
code.inl{font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.07);
         padding:2px 6px;border-radius:6px;color:var(--cream)}

/* boxes + pipeline */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:8px}
.box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:19px 21px}
.box h4{font-size:14.5px;font-weight:700;margin-bottom:7px}
.box p{font-size:14px;margin:0}
.box .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--camel);
        font-weight:700;display:block;margin-bottom:6px}
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:9px;margin:16px 0 6px}
.step{flex:1;min-width:132px;background:var(--card);border:1px solid var(--line);
      border-radius:15px;padding:13px 14px}
.step b{display:block;font-size:13px;margin-bottom:3px}
.step span{font-size:11.5px;color:var(--dim);font-family:var(--mono)}
.arw{align-self:center;color:var(--red);font-size:17px;font-weight:700}

/* art */
.charms{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:11px;margin-top:6px}
.charm{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 8px;
       text-align:center;transition:.2s}
.charm:hover{transform:translateY(-4px);border-color:rgba(224,38,28,.4)}
.charm img{width:50px;height:46px;object-fit:contain;display:block;margin:0 auto 6px}
.charm span{font-size:10.5px;color:var(--dim);font-weight:600}
.pal{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:11px}
.sw{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sw .chip{height:64px}
.sw .info{padding:10px 12px;background:var(--card)}
.sw b{display:block;font-size:12.5px}
.sw code{font-size:11px;color:var(--dim);font-family:var(--mono)}
.icons{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px}
.ic{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;
    text-align:center;min-width:108px;flex:1}
.ic img{width:38px;height:38px;object-fit:contain;margin-bottom:7px}
.ic span{display:block;font-size:10.5px;color:var(--dim);font-weight:600}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:17px}
.shot{cursor:zoom-in;transition:.2s}
.shot:hover{transform:translateY(-5px)}
.shot img{width:100%;border-radius:19px;border:1px solid var(--line);display:block;background:#000}
.shot span{display:block;font-size:11.5px;color:var(--dim);margin-top:8px;font-weight:600;text-align:center}

/* decisions */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.chip-btn{border:1px solid var(--line);background:var(--card);color:var(--soft);font-family:var(--font);
          font-weight:600;font-size:12px;padding:7px 13px;border-radius:99px;cursor:pointer;transition:.18s}
.chip-btn:hover{color:var(--cream);border-color:rgba(243,239,231,.3)}
.chip-btn.on{background:var(--red);color:#fff;border-color:var(--red)}
.dgrid{display:grid;gap:11px}
.dec{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.dec summary{padding:16px 19px;cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px}
.dec summary::-webkit-details-marker{display:none}
.dec summary:hover{background:rgba(255,255,255,.03)}
.tagx{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
      color:var(--camel);border:1px solid rgba(198,155,107,.35);border-radius:99px;
      padding:3px 8px;white-space:nowrap;margin-top:2px}
.dec h4{font-size:15px;font-weight:700;flex:1}
.dec .arrow{color:var(--dim);font-size:13px;transition:.2s}
.dec[open] .arrow{transform:rotate(90deg)}
.dbody{padding:0 19px 19px}
.row{display:grid;grid-template-columns:auto 1fr;gap:8px 13px}
.row dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
        font-weight:700;padding-top:3px;white-space:nowrap}
.row dd{color:var(--soft);font-size:14px}
.row dd.impl{font-family:var(--mono);font-size:12px;color:#c9c3ba;
             background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ba{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.ba div{flex:1;min-width:180px;border-radius:13px;padding:11px 13px;font-size:13px}
.before{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--dim);
        text-decoration:line-through;text-decoration-color:rgba(224,38,28,.5)}
.after{background:rgba(224,38,28,.12);border:1px solid rgba(224,38,28,.35);color:var(--cream)}

/* dives + timeline */
.dive{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:25px;margin-bottom:15px}
.dive h3{font-size:20px;margin:0 0 6px}
.why{border-left:2px solid var(--red);padding-left:14px;margin-top:13px;color:var(--soft);font-size:14px}
.tl{position:relative;padding-left:25px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
            background:linear-gradient(180deg,var(--camel),rgba(198,155,107,.15))}
.ev{position:relative;padding:0 0 18px 6px}
.ev::before{content:"";position:absolute;left:-25px;top:6px;width:11px;height:11px;border-radius:50%;
            background:var(--red);box-shadow:0 0 0 3px rgba(224,38,28,.2)}
.ev b{font-size:14px}
.ev p{font-size:13.5px;margin:2px 0 0}
.ev .bn{font-size:10.5px;font-weight:700;color:var(--camel);letter-spacing:.06em;font-family:var(--mono)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.93);display:none;align-items:center;
    justify-content:center;z-index:100;padding:30px;cursor:zoom-out;backdrop-filter:blur(6px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:20px}
.lb .x{position:absolute;top:20px;right:26px;font-size:30px;color:var(--dim);font-weight:300}

footer{padding:48px 0 66px;text-align:center;color:var(--dim);font-size:12.5px;border-top:1px solid var(--line)}
.note{font-size:12.5px;color:var(--dim);border:1px dashed var(--line);border-radius:14px;
      padding:12px 15px;margin-top:16px;max-width:68ch}

/* companion callout — the "other side of the coin" */
.coin{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
      background:linear-gradient(135deg,rgba(224,38,28,.1),rgba(198,155,107,.07));
      border:1px solid rgba(198,155,107,.3);border-radius:22px;padding:24px 26px;margin-top:8px}
.coin h4{font-size:18px;font-weight:700;margin-bottom:4px}
.coin p{font-size:14px;margin:0;max-width:52ch}
.coin a{background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:14px;
        padding:12px 22px;border-radius:99px;white-space:nowrap;transition:.2s}
.coin a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(224,38,28,.34)}

@media(max-width:640px){
  header{padding:60px 0 44px} section{padding:46px 0}
  .row{grid-template-columns:1fr;gap:3px} .row dt{padding-top:9px}
  .flip{margin-left:0}
}