/* Shared components for the lookbook and split-story directions */
a{color:inherit}
.srcl{font-size:12px;color:var(--mut);text-decoration:none;line-height:1.4}
a.srcl:hover{color:var(--ink)}
.cta{text-decoration:none}

/* stats: typeset number + line, hairline above, no boxes */
.sts{display:grid;gap:0 28px}
.sts.c2{grid-template-columns:1fr 1fr}.sts.c3{grid-template-columns:repeat(3,1fr)}
.st{display:flex;flex-direction:column;gap:8px;padding:16px 0 4px;border-top:1px solid rgba(63,42,51,.18)}
.st .sn{font-size:44px;letter-spacing:-.055em;line-height:1}
.st p{font-size:14.5px;line-height:1.45;color:var(--ink)}
.st .srcl{display:block;margin-top:4px}

/* ring close-ups */
.rr{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.rr img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block;background:#F2F1EF}
.rr.c6{grid-template-columns:repeat(6,1fr)}.rr.c5{grid-template-columns:repeat(5,1fr)}
.rr.c3{grid-template-columns:repeat(3,1fr)}
.rr.c4{grid-template-columns:repeat(4,1fr)}

/* press: logo cards */
.pw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pc{display:flex;flex-direction:column;gap:12px;padding:20px 20px 16px;border-radius:18px;background:#fff;text-decoration:none;transition:transform .25s,box-shadow .25s}
.pc:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(63,42,51,.5)}
.pc img{height:24px;width:auto;max-width:160px;object-fit:contain;object-position:left;align-self:flex-start}
.pc .pht{font-size:15px;line-height:1.35;letter-spacing:-.01em;flex:1}
.pc .pd{font-size:12px;color:var(--mut);display:flex;justify-content:space-between}
.pc .pd i{font-style:normal;color:var(--gold)}

/* enamel colour swatches */
.sw{display:grid;grid-template-columns:repeat(10,1fr);gap:14px 8px}
.sw span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--ink2);text-align:center;line-height:1.2}
.sw i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(63,42,51,.12)}

/* price ladder: the hero of the price section */
.ladder3{background:#fff;border-radius:22px;padding:22px 28px 16px}
.lax{display:grid;grid-template-columns:230px 1fr;margin-bottom:4px}
.lat{position:relative;height:18px}
.lat em{position:absolute;transform:translateX(-50%);font-style:normal;font-size:11.5px;color:var(--mut);white-space:nowrap}
.lrow{display:grid;grid-template-columns:230px 1fr;align-items:center;min-height:44px;text-decoration:none;border-top:1px solid var(--rule)}
.lname{font-size:15px;color:var(--ink2);letter-spacing:-.01em;line-height:1.25}
.lname small{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}
.ltrack{position:relative;height:44px}
.ltrack i{position:absolute;top:0;bottom:0;width:1px;background:var(--rule)}
.lbar{position:absolute;top:50%;height:12px;margin-top:-6px;border-radius:6px;background:var(--c3)}
.lval{position:absolute;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--mut);white-space:nowrap}
.lrow.you{background:linear-gradient(90deg,var(--c2),rgba(236,208,206,0));border-radius:12px;border-top-color:transparent}
.lrow.you .lname{color:var(--ink);font-weight:600;padding-left:12px}
.lrow.you .lbar{background:var(--c6);height:16px;margin-top:-8px}
.lrow.you .lval{color:var(--ink);font-weight:600}
.lrow:hover .lname{color:var(--ink)}
.lnote{font-size:12px;color:var(--mut);margin-top:8px}

/* gift scale: everyday gift vs her rings vs jewellery gift */
.gscale{padding:4px 0 0}
.gl{font-size:15px;line-height:1.45;color:var(--ink);margin-bottom:14px}
.gtrack{position:relative;height:150px;margin:0 6px}
.gtrack>i{position:absolute;top:0;bottom:22px;width:1px;background:var(--rule)}
.gtrack>i em{position:absolute;bottom:-20px;transform:translateX(-50%);font-style:normal;font-size:11px;color:var(--mut);white-space:nowrap}
.gtrack>i:first-child em{transform:none}
.gtrack>i:last-child em{transform:translateX(-100%)}
.gb{position:absolute;height:26px;border-radius:13px;background:var(--c3);text-decoration:none}
.gb span{position:absolute;top:50%;transform:translateY(-50%);left:calc(100% + 10px);white-space:nowrap;font-size:12.5px;color:var(--ink2)}
.gb span b{font-weight:600;color:var(--ink)}
.gb.you{background:var(--c6)}
.gb.you span{color:var(--ink);font-weight:600}
.gb:last-child{background:var(--c4)}
.gb:last-child span{left:auto;right:calc(100% + 10px)}
.gsrc{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.5}

@media (max-width:900px){
 .sts.c2,.sts.c3{grid-template-columns:1fr}
 .rr{grid-template-columns:repeat(5,1fr)}
 .pw{grid-template-columns:1fr}
 .sw{grid-template-columns:repeat(5,1fr)}
 .lax,.lrow{grid-template-columns:120px 1fr}.lname{font-size:12.5px}
}