/* Rafa: design showcase (.ds) and site thumbnail (.rt). The showcase always wears the client's own palette, whatever theme the page is in. */

/* ---------- site thumbnail ---------- */
.rt{position:relative;overflow:hidden;border-radius:inherit;isolation:isolate;container-type:inline-size;
  --g1:#f4f0e8;--g2:#dcd5c8;--g3:#a9bdb3;--glow:92 121 111;--cap:#171715;
  background:linear-gradient(150deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 150%)}
.rt.neide{--g1:#faf6f3;--g2:#f0dde2;--g3:#d99aab;--glow:138 52 70;--cap:#5a1f2d}
.rt::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 82% 8%,rgb(var(--glow)/.38),transparent 55%),repeating-linear-gradient(0deg,transparent 0 31px,rgb(23 23 21/.045) 31px 32px)}
.rt-cap{position:absolute;left:8%;top:6.5%;font:500 clamp(20px,6.4cqw,30px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em;color:var(--cap)}
.rt-win{position:absolute;left:8%;top:20%;width:132%;border-radius:12px;overflow:hidden;background:#171715;transform:rotate(-2.4deg);transform-origin:0 0;
  box-shadow:0 44px 60px -28px rgb(0 0 0/.55),0 0 0 1px rgb(0 0 0/.14)}
.rt-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eee9e0;border-bottom:1px solid #d3ccc1}
.rt-bar i{width:8px;height:8px;border-radius:50%;background:#cfc8bc}
.rt-bar span{margin-left:10px;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 11px;border-radius:999px;background:#f7f4ee;font:500 10px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.02em;color:#6b675f}
.rt-win img{display:block;width:100%;height:auto;max-width:none}
.rt-sw{position:absolute;left:8%;bottom:6%;display:flex;gap:7px}
.rt-sw b{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #f4f0e8,0 0 0 3px rgb(23 23 21/.25)}
/* Neide's screenshot is wider and shorter: keep more of it in portrait slots */
.rt.neide .rt-win{left:6%;width:122%;top:24%}
/* landscape slot: the window sits centred and whole */
.rt.wide .rt-win{left:50%;top:54%;width:80%;transform:translate(-50%,-50%) rotate(-1.4deg);transform-origin:50% 50%}
.rt.wide .rt-cap{top:7%;left:6%}
.rt.wide .rt-sw{left:auto;right:6%;bottom:8%}
/* sizes in each place it appears */
.cover .rt{height:clamp(300px,40vw,540px);border-radius:20px;box-shadow:0 50px 80px -44px rgb(var(--shadow)/.6)}
.pr .rt{height:clamp(260px,32vw,420px);border-radius:14px;box-shadow:0 22px 44px -28px rgb(var(--shadow)/.4)}
.wk-img .rt{height:clamp(260px,58vh,580px);aspect-ratio:4/5;border-radius:6px;box-shadow:0 40px 60px -38px rgb(var(--shadow)/.6)}
@media (max-width:860px){.wk-img .rt{height:auto;width:100%;aspect-ratio:4/3}.wk-img .rt .rt-win{left:50%;top:54%;width:84%;transform:translate(-50%,-50%) rotate(-1.4deg);transform-origin:50% 50%}}
/* inside the Four ways in card */
.pface.shot{padding:0;display:block}
.pface.shot::before{display:none}
.pface.shot .rt{position:absolute;inset:0;border-radius:inherit}

/* ---------- design showcase ---------- */
.ds-wrap{grid-column:1/-1}
.ds{--p:#f4f0e8;--p2:#eee9e0;--ink:#171715;--mu:#6b675f;--ru:#d3ccc1;--sage:#5c796f;--sage-ink:#3f5a50;
  background:var(--p);color:var(--ink);border:1px solid var(--ru);border-radius:28px;padding:clamp(22px,4vw,56px);font-family:'Manrope',var(--sans);line-height:1.65;
  box-shadow:0 40px 70px -46px rgb(var(--shadow)/.5);text-align:left;container:ds/inline-size}
.ds *{box-sizing:border-box}
.ds p,.ds h3,.ds h4{margin:0}
.ds .k{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.ds-head{display:grid;gap:16px;padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--ru)}
.ds .big{font:500 clamp(38px,6vw,76px)/.98 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.ds .big em,.ds-big em{font-style:italic;color:var(--sage-ink)}
.ds-lede{font:400 clamp(19px,2vw,24px)/1.45 'Cormorant Garamond',Georgia,serif;max-width:34em;color:#2b2a26}
.ds-block{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px 36px;padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--ru)}
.ds-block>.k{padding-top:6px}
.ds-sws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@container ds (min-width:900px){.ds-sws{grid-template-columns:repeat(7,minmax(0,1fr))}}
@container ds (max-width:560px){.ds-sws{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ds-sw{all:unset;box-sizing:border-box;cursor:pointer;display:grid;border:1px solid var(--ru);background:var(--p);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;min-width:0}
.ds-sw:hover{transform:translateY(-3px);box-shadow:0 18px 26px -18px rgb(23 23 21/.4)}
.ds-sw:focus-visible{outline:2px solid var(--sage-ink);outline-offset:3px}
.ds-sw i{display:block;height:76px;border-bottom:1px solid var(--ru)}
.ds-sw span{padding:9px 11px;display:grid;gap:1px}
.ds-sw b{font:600 13px/1.3 'Manrope',sans-serif}
.ds-sw em{font:500 11.5px/1.4 'DM Mono',ui-monospace,monospace;font-style:normal;color:var(--mu)}
.ds-sw.copied em{color:var(--sage-ink)}
.ds-note{margin-top:16px!important;font-size:14px;color:var(--mu);max-width:60ch}
.ds-spec{border:1px solid var(--ru)}
.ds-spec>div{padding:20px 22px;border-bottom:1px solid var(--ru);display:grid;gap:10px;min-width:0}
.ds-spec>div:last-child{border:0}
.ds-big{font:500 clamp(34px,5vw,60px)/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:-.015em}
.ds-sans{font:500 18px/1.55 'Manrope',sans-serif;max-width:40ch}
.ds-mono{font:500 13px/1.5 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.ds-pr{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ds-pr>div{background:var(--p2);padding:22px;display:grid;gap:8px;align-content:start}
.ds-pr h4,.ds-seq-out h4{font:500 26px/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:0}
.ds-pr p,.ds-seq-out p{font-size:15px;color:#3a3833}
.ds-seq{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ds-seq button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 15px;border:1px solid var(--ru);border-radius:999px;font:500 13px/1 'Manrope',sans-serif;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.ds-seq button b{font:500 10.5px 'DM Mono',ui-monospace,monospace;color:var(--mu);transition:color .25s}
.ds-seq button:hover{border-color:var(--ink)}
.ds-seq button:focus-visible{outline:2px solid var(--sage-ink);outline-offset:2px}
.ds-seq button[aria-pressed="true"]{background:var(--ink);color:var(--p);border-color:var(--ink)}
.ds-seq button[aria-pressed="true"] b{color:#a9bdb3}
.ds-seq-out{margin-top:18px;padding:22px;background:var(--p2);min-height:132px;display:grid;gap:8px;align-content:start;transition:opacity .2s,transform .2s}
.ds-seq-out.swap{opacity:0;transform:translateY(6px)}
.ds-dec details{border-top:1px solid var(--ru)}
.ds-dec details:last-child{border-bottom:1px solid var(--ru)}
.ds-dec summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;min-height:56px;font:500 clamp(22px,2.4vw,28px)/1.15 'Cormorant Garamond',Georgia,serif}
.ds-dec summary::-webkit-details-marker{display:none}
.ds-dec summary::after{content:"+";flex:none;width:30px;height:30px;border:1px solid var(--ru);border-radius:50%;display:grid;place-items:center;font:400 18px/1 'Manrope',sans-serif;transition:transform .3s,background .3s,color .3s}
.ds-dec details[open] summary::after{transform:rotate(45deg);background:var(--ink);color:var(--p);border-color:var(--ink)}
.ds-dec summary:focus-visible{outline:2px solid var(--sage-ink);outline-offset:2px}
.ds-dec details p{font-size:15px;max-width:66ch;margin:0 0 10px;color:#3a3833}
.ds-dec details p.why{color:var(--mu);padding-bottom:18px}
.ds-stack{display:flex;flex-wrap:wrap;gap:8px}
.ds-stack span{padding:7px 14px;border:1px solid var(--ru);border-radius:999px;font:500 11.5px 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;color:#3a3833}
.ds-foot{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:clamp(22px,3vw,32px)}
.ds-link{font:500 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-ink);text-decoration:none;border-bottom:1px solid currentColor;padding:12px 0}
.ds-link:hover{color:var(--ink)}
@media (max-width:760px){.ds{border-radius:22px}.ds-block{grid-template-columns:1fr;gap:10px}.ds-block>.k{padding:0}}

/* ---------- design-only card (Four ways in): Rafa's palette and type, no screenshot ---------- */
.pface.shot .dc{position:absolute;inset:0}
.dc{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:4cqw;padding:9cqw;background:#f4f0e8;color:#171715;text-align:left;
  background-image:radial-gradient(circle at 90% 6%,rgb(92 121 111/.28),transparent 52%),repeating-linear-gradient(0deg,transparent 0 31px,rgb(23 23 21/.045) 31px 32px)}
.dc-k{font:500 3.7cqw/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.dc-aa{font:500 40cqw/.82 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em;margin-top:-2cqw}
.dc-aa em{font-style:italic;color:#3f5a50}
.dc-sws{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqw}
.dc-sws i{display:block;aspect-ratio:1/1.5;box-shadow:0 0 0 1px #d3ccc1}
.dc-type{display:grid;gap:1.4cqw;border-top:1px solid #d3ccc1;padding-top:3.4cqw}
.dc-type span{display:block;line-height:1.15;white-space:nowrap}
.dc-type .s1{font:500 7.6cqw/1.1 'Cormorant Garamond',Georgia,serif}
.dc-type .s2{font:500 4.7cqw/1.2 'Manrope',system-ui,sans-serif}
.dc-type .s3{font:500 3.8cqw/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b675f}
.dc-line{margin:0;font:500 8.6cqw/1.02 'Cormorant Garamond',Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
.dc-line em{font-style:italic;color:#3f5a50}

/* Four ways in, Websites: the site as one tall, frameless strip that drifts slowly top to bottom */
.pface.shot.vs{background:#faf6f3}
.pface.shot.vs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;max-width:none}
.pface.vs.on img{animation:vsdrift 18s ease-in-out 1.2s infinite alternate}
@keyframes vsdrift{to{object-position:50% 100%}}
@media (prefers-reduced-motion:reduce){.pface.vs.on img{animation:none}}