/* Birthday v4 — "a day that seems to know her": the day on a clock face (round 3), three singles from the record shop (round 2, approved), her album (round 3) */
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts-v181/InstrumentSerif-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts-v181/InstrumentSerif-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/assets/fonts-v181/SpaceMono-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Patrick Hand";src:url(/assets/fonts-v181/PatrickHand-Regular.woff2) format("woff2");font-display:swap}

/* ---------- 1. How a birthday can go — the day on a clock face ---------- */
.bd-clock{margin-top:8px}
/* the stage keeps a fixed aspect on desktop; everything inside is placed in % and sized in container units, so it scales as one object */
.bd-ck-stage{position:relative;width:min(100%,1100px);aspect-ratio:1100/1060;margin-inline:auto;container-type:inline-size}
.bd-ck-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bd-ck-ln{stroke:rgba(244,241,234,.32);stroke-width:1;transition:stroke .3s}
.bd-ck-ln.is-on{stroke:rgba(232,116,46,.95)}
/* the dial */
.bd-ck-dial-wrap{position:absolute;left:30.455%;top:30.660%;width:39.091%;aspect-ratio:1/1}
.bd-ck-dial{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 26px 38px rgba(0,0,0,.5)) drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.bd-ck-nums text{font-family:"Instrument Serif",Instrument,Georgia,serif;font-size:31px;fill:#1d1d1b;text-anchor:middle;dominant-baseline:central}
.bd-ck-brand{font-family:"Instrument Serif",Instrument,Georgia,serif;font-style:italic;font-size:12.5px;fill:rgba(29,29,27,.55);text-anchor:middle;letter-spacing:.04em}
.bd-ck-hands{filter:drop-shadow(1px 3px 2px rgba(0,0,0,.28))}
.bd-ck-hour,.bd-ck-min,.bd-ck-sec{transform-box:view-box;transform-origin:200px 200px}
.bd-ck-hour{transform:rotate(var(--bd-h,225deg));transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.bd-ck-min{transform:rotate(var(--bd-m,180deg));transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.bd-ck-sec{transform:rotate(32deg)}
@media (prefers-reduced-motion:reduce){.bd-ck-hour,.bd-ck-min{transition:none}}
/* the four hour markers on the tick ring — deep red dots, the hit area is larger than the dot */
.bd-ck-mark{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.bd-ck-mark span{display:block;width:9px;height:9px;border-radius:50%;background:#8B3A1E;box-shadow:0 0 0 2px #F4F1EA,0 0 0 3px rgba(29,29,27,.25);transition:transform .25s,box-shadow .25s}
.bd-ck-mark.is-on span,.bd-ck-mark:hover span{transform:scale(1.25);box-shadow:0 0 0 2px #F4F1EA,0 0 0 4px rgba(232,116,46,.9)}
.bd-ck-mark:focus-visible{outline:2px solid var(--torch,#E8742E);outline-offset:2px}
/* the scene cards — small prints with a cream border, the time and the caption written beneath */
.bd-ck-card{position:absolute;width:27.273cqw;margin:0;background:#F4F1EA;color:#1d1d1b;border-radius:.73cqw;padding:.91cqw;box-shadow:0 20px 50px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.3);transform:rotate(var(--bd-r,0deg));transform-origin:50% 50%;transition:transform .35s cubic-bezier(.3,.7,.2,1),box-shadow .35s;cursor:default}
.bd-ck-card.is-on{transform:rotate(0deg) translateY(-6px) scale(1.025);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(232,116,46,.55);z-index:3}
.bd-ck-photo{aspect-ratio:3/2;overflow:hidden;border-radius:.45cqw;background:#2a2622}
.bd-ck-photo img{display:block;width:100%;height:100%;object-fit:cover}
.bd-ck-txt{padding:.9cqw .27cqw .36cqw}
.bd-ck-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bd-ck-time{font-family:"Space Mono",monospace;font-size:1.18cqw;letter-spacing:.1em;color:#8B3A1E}
.bd-ck-scene{font-family:"Space Mono",monospace;font-size:.86cqw;letter-spacing:.16em;text-transform:uppercase;color:rgba(29,29,27,.48)}
.proposal-page main .bd-ck-cap{font-family:"Instrument Serif",Instrument,Georgia,serif;font-size:1.6cqw;line-height:1.25;letter-spacing:-.002em;color:#1d1d1b;margin:.55cqw 0 0;text-wrap:pretty}

/* ---------- 3. What you receive, and when — her album, open at the page we add ---------- */
.bd-album{position:relative;max-width:1200px;margin:34px auto 0}
.bd-al-book{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-radius:5px 8px 8px 5px;box-shadow:0 24px 60px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.4);background:repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3a221a,#2b1a13 45%,#22120d)}
/* left page: the photograph of her childhood page — the cover and the page stack are in the picture */
.bd-al-left{position:relative;overflow:hidden;border-radius:5px 0 0 5px;background:#2b1a13}
.bd-al-left img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%}
.bd-al-left::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(40,22,12,.42),rgba(40,22,12,0) 10%),linear-gradient(to bottom,rgba(40,22,12,.35),rgba(40,22,12,0) 7%),linear-gradient(to top,rgba(40,22,12,.35),rgba(40,22,12,0) 7%)}
.bd-al-cap{position:absolute;left:11.5%;bottom:8.6%;font-family:"Patrick Hand",cursive;font-size:clamp(15px,1.45vw,19px);line-height:1.2;color:#3a2e24;opacity:.9;transform:rotate(-2.2deg);white-space:nowrap}
/* right page: the cover shows around the paper; the paper itself is aged cream with faint blue ruling */
.bd-al-right{position:relative;padding:6.5% 4.8% 5.4% 0;min-width:0}
.bd-al-paper{position:relative;min-height:100%;padding:44px 40px 44px 52px;color:#1d1d1b;border-radius:0 2px 2px 0;background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(72,84,128,.17) 27px 28px),repeating-linear-gradient(97deg,rgba(90,65,30,.035) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 28% 32%,#F1E4CB 0%,#E7D5B5 52%,#D8C19C 100%);background-position:0 15px,0 0,0 0;box-shadow:1px 1px 0 #E9DABB,2px 2px 0 #BFAE8E,3px 3px 0 #E5D4B3,4px 4px 0 #B8A784,5px 5px 0 #E0CEAD,6px 6px 0 #AC9B7B,0 0 0 1px rgba(0,0,0,.15)}
/* the gutter: the paper falls into the spine */
.bd-al-paper::before{content:"";position:absolute;inset:0 auto 0 0;width:72px;pointer-events:none;background:linear-gradient(to right,rgba(58,34,16,.46),rgba(58,34,16,.18) 36%,rgba(58,34,16,0))}
/* 45 — the page number that is the age */
.bd-al-num{position:absolute;top:18px;right:34px;font-family:"Instrument Serif",Instrument,Georgia,serif;font-size:96px;line-height:1;letter-spacing:-.02em;color:#1d1d1b;opacity:.84}
/* the five deliverables, mounted like album photographs: 2 + 2 + 1, the right column hung a little lower */
.bd-al-mounts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 26px;align-items:start;position:relative}
.bd-al-mounts>:nth-child(even){margin-top:58px}
.bd-al-mount{position:relative;background:#F7F1E3;color:#1d1d1b;padding:17px 18px 18px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,.28),0 8px 18px rgba(60,35,10,.2);transform:rotate(var(--bd-r,0deg));transform-origin:50% 50%}
.bd-al-mount::before,.bd-al-mount::after{content:"";position:absolute;width:24px;height:24px;background:#1a1a18;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.bd-al-mount::before{left:-3px;top:-3px;clip-path:polygon(0 0,100% 0,0 100%)}
.bd-al-mount::after{right:-3px;bottom:-3px;clip-path:polygon(100% 100%,100% 0,0 100%)}
.bd-al-mount.bd-al-last{background:#E8DCC1}
.bd-al-when{display:block;font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.09em;color:#8B3A1E}
.bd-al-what{display:block;font-family:"Instrument Serif",Instrument,Georgia,serif;font-size:22px;line-height:1.15;margin-top:7px;text-wrap:balance}
.bd-al-d{display:block;font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.45;color:#3b3a36;margin-top:7px;text-wrap:pretty}
/* the handwritten note beside the last mount */
.bd-al-note{align-self:center;display:flex;align-items:flex-start;gap:6px;padding:0 6px 0 2px;font-family:"Patrick Hand",cursive;font-size:19px;line-height:1.25;color:#3a2e24;transform:rotate(-2.5deg)}
.bd-al-arrow{flex:0 0 auto;width:54px;height:36px;margin-top:4px;transform:scaleX(-1)}
/* the bookmark ribbon, from the spine */
.bd-al-ribbon{position:absolute;left:calc(50% + 14px);top:-8px;width:16px;height:158px;background:linear-gradient(90deg,#6f2b17,#8B3A1E 38%,#7a3019 70%,#5e2412);clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));z-index:2;pointer-events:none}

/* ---------- 2. In their words — three 7-inch singles from the record shop (scene 2, approved) ---------- */
/* ---------- 2. In their words — three 7-inch singles from the record shop (scene 2) ---------- */
.bd-sleeves{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start;margin-top:6px;padding:16px 12px 44px}
/* each sleeve is fanned at its own angle; the middle one lies on top. Shadow via drop-shadow so it follows the paper */
.bd-sleeve{position:relative;aspect-ratio:1/1;container-type:inline-size;transform:translateY(var(--bd-y,0)) rotate(var(--bd-r,0deg));transform-origin:50% 50%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.bd-sleeves .bd-sleeve:nth-child(1){--bd-r:-6deg;--bd-y:22px;--bd-sleeve:#EEE8D8;--bd-label:#E6C45A;--bd-lab-ink:#1d1d1b;--bd-lab-line:rgba(29,29,27,.28);z-index:1}
.bd-sleeves .bd-sleeve:nth-child(2){--bd-r:.5deg;--bd-y:0px;--bd-sleeve:#CDB88F;--bd-label:#8B3A1E;--bd-lab-ink:#F4F1EA;--bd-lab-line:rgba(244,241,234,.32);z-index:2}
.bd-sleeves .bd-sleeve:nth-child(3){--bd-r:5deg;--bd-y:16px;--bd-sleeve:#F1ECDF;--bd-label:#3B6A72;--bd-lab-ink:#F4F1EA;--bd-lab-line:rgba(244,241,234,.3);z-index:1}
/* the paper sleeve: fibre texture, a soft vignette, the seam of the open edge at the right */
.bd-sl-paper{position:absolute;inset:0;color:#1d1d1b;border-radius:2px;padding:clamp(26px,8cqw,34px) clamp(24px,7.5cqw,32px) 0;background:repeating-linear-gradient(93deg,rgba(60,45,25,.035) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.28),rgba(255,255,255,0) 60%,rgba(60,45,25,.09) 100%),var(--bd-sleeve,#EEE8D8)}
.bd-sl-paper::before{content:"";position:absolute;top:0;bottom:0;right:14px;width:1px;background:rgba(60,45,25,.16);box-shadow:1px 0 0 rgba(255,255,255,.35);pointer-events:none}
/* the liner note: the quote, printed on the upper part of the sleeve */
.proposal-page main .bd-sl-note{position:relative;font-family:"Courier Prime",monospace;font-size:clamp(13px,3.4cqw,14.5px);line-height:1.55;color:#1d1d1b;margin:0;text-wrap:pretty}
/* the round cut-out: black vinyl with its grooves, the paper edge casting a shadow onto it */
.bd-sl-hole{position:absolute;left:50%;top:62.5%;width:52.5%;aspect-ratio:1/1;margin:-26.25% 0 0 -26.25%;border-radius:50%;overflow:hidden;background:#121212;box-shadow:0 0 0 1px rgba(60,45,25,.22),0 0 0 2px rgba(255,255,255,.28)}
.bd-sl-vinyl{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,rgba(255,255,255,0) 0 12%,rgba(255,255,255,.09) 19%,rgba(255,255,255,0) 27%,rgba(255,255,255,0) 58%,rgba(255,255,255,.07) 66%,rgba(255,255,255,0) 74%),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 3px),#141414}
.bd-sl-hole::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 5px 9px rgba(0,0,0,.75),inset 0 -1px 2px rgba(255,255,255,.06);pointer-events:none}
/* the paper label on the record: the name as the artist, the role as the second line, the spindle hole between them */
.bd-sl-label{position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1/1;margin:-38% 0 0 -38%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.05) 0 1px,transparent 1px 7px),var(--bd-label,#E6C45A);color:var(--bd-lab-ink,#1d1d1b);display:grid;grid-template-rows:1fr 18px 1fr;align-items:end;justify-items:center;text-align:center;padding:clamp(11px,3.3cqw,14px) clamp(14px,4.8cqw,21px) clamp(13px,3.8cqw,16px);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.bd-sl-label::before{content:"";position:absolute;inset:6px;border:1px solid var(--bd-lab-line,rgba(29,29,27,.28));border-radius:50%;pointer-events:none}
.bd-sl-label::after{content:"";grid-row:2;align-self:center;width:10px;height:10px;border-radius:50%;background:#2a2622;box-shadow:inset 0 1px 2px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.25)}
.bd-sl-artist{grid-row:1;align-self:end;font-family:"Instrument Serif",Instrument,Georgia,serif;font-size:clamp(13.5px,3.55cqw,15px);line-height:1.1;letter-spacing:.005em;padding-bottom:6px;text-wrap:balance}
.bd-sl-role{grid-row:3;align-self:start;font-family:Inter,system-ui,sans-serif;font-size:clamp(10px,2.6cqw,11px);line-height:1.3;letter-spacing:.01em;opacity:.9;padding-top:6px}
/* small printed matter on the sleeve, and a thin price sticker on one of them */
.bd-sl-cat,.bd-sl-side{position:absolute;bottom:clamp(16px,5.2cqw,22px);font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(29,29,27,.55)}
.bd-sl-cat{left:clamp(24px,7.5cqw,32px)}
.bd-sl-side{right:clamp(26px,8cqw,34px)}
.bd-sl-sticker{position:absolute;right:clamp(20px,6cqw,26px);bottom:clamp(12px,3.8cqw,16px);transform:rotate(-6deg);font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:#1d1d1b;background:#F7F3E8;padding:5px 9px 4px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.06);white-space:nowrap}

/* ---------- sleeves, tablet and narrow desktop (701-1200): two on the first row, the third below ---------- */
@media (min-width:701px) and (max-width:1200px){
.bd-sleeves{grid-template-columns:repeat(2,1fr);gap:24px;padding-bottom:30px;max-width:900px;margin-inline:auto}
.bd-sleeves .bd-sleeve:nth-child(3){grid-column:1/-1;justify-self:center;width:calc(50% - 12px);--bd-y:0px}
.bd-sleeves .bd-sleeve:nth-child(1){--bd-r:-4deg;--bd-y:14px}
.bd-sleeves .bd-sleeve:nth-child(2){--bd-r:2deg}
.bd-sleeves .bd-sleeve:nth-child(3){--bd-r:-2deg}
}
/* ---------- clock: between 701 and 1199 — the dial above, the four prints in two rows ---------- */
@media (max-width:1199px){
.bd-ck-stage{aspect-ratio:auto;width:100%;max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;container-type:inline-size}
.bd-ck-lines{display:none}
.bd-ck-dial-wrap{position:relative;inset:auto!important;left:auto;top:auto;width:380px;max-width:100%;grid-column:1/-1;justify-self:center;margin-bottom:12px}
.bd-ck-card{position:relative;inset:auto!important;transform:none!important;width:auto;border-radius:8px;padding:10px}
.bd-ck-card.is-on{transform:translateY(-4px)!important}
.bd-ck-photo{border-radius:5px}
.bd-ck-txt{padding:10px 3px 4px}
.bd-ck-time{font-size:12px}
.bd-ck-scene{font-size:9.5px}
.proposal-page main .bd-ck-cap{font-size:16px;margin-top:6px}
}
/* ---------- album: below 900 the pages stack ---------- */
@media (max-width:899px){
.bd-al-book{grid-template-columns:1fr;border-radius:6px}
.bd-al-left{aspect-ratio:720/906;border-radius:6px 6px 0 0}
.bd-al-left img{object-position:50% 50%}
.bd-al-right{padding:3% 5% 5.5%}
.bd-al-paper{padding:40px 30px 40px 36px}
.bd-al-paper::before{width:0}
.bd-al-num{font-size:80px;right:26px;top:16px}
.bd-al-mounts{grid-template-columns:1fr;gap:26px;margin-top:62px}
.bd-al-mounts>:nth-child(even){margin-top:0}
.bd-al-note{align-self:start;padding-left:10px}
.bd-al-ribbon{left:auto;right:12%;top:-6px;height:120px}
}
/* ---------- mobile ---------- */
@media (max-width:700px){
.bd-ck-stage{grid-template-columns:1fr;gap:22px;max-width:420px}
.bd-ck-dial-wrap{width:280px;margin-bottom:8px}
.bd-ck-mark{width:28px;height:28px;margin:-14px 0 0 -14px}
.bd-ck-card{width:100%}
.proposal-page main .bd-ck-cap{font-size:17px}
.bd-album{margin-top:26px}
.bd-al-cap{font-size:15px;left:12%;bottom:8%}
.bd-al-paper{padding:34px 20px 34px 24px}
.bd-al-num{font-size:68px;right:20px;top:14px}
.bd-al-mounts{margin-top:54px;gap:24px}
.bd-al-mount{transform:none!important;padding:15px 16px 16px}
.bd-al-what{font-size:21px}
.bd-al-note{transform:none;font-size:18px}
.bd-sleeves{grid-template-columns:1fr;gap:30px;margin-top:0;padding:0 0 12px;justify-items:center}
.bd-sleeve{position:relative;inset:auto!important;transform:none!important;width:100%;max-width:360px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
}

/* v170 ribbon away from the page number on phones */
@media(max-width:700px){.bd-al-ribbon{left:14%;right:auto}}
/* 219 — album pages on phones */
@media(min-width:900px){.bd-al-pages{display:none}}
@media(max-width:899px){
.bd-al-book{display:none}
.bd-al-pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:26px calc(-1*var(--m,20px)) 0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3a221a,#2b1a13 45%,#22120d)}
.bd-al-pages::-webkit-scrollbar{display:none}
.bd-al-page{flex:0 0 100%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;padding:34px 14px 16px;box-sizing:border-box}
.bd-al-ph{position:relative;height:100%;overflow:hidden;border-radius:3px}
.bd-al-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.bd-al-page .bd-al-cap{position:absolute;left:12%;bottom:8%;font-family:"Patrick Hand",cursive;font-size:15px;color:#3a2e24;transform:rotate(-2.2deg)}
.bd-al-page .bd-al-paper{height:100%;min-height:0;padding:26px 16px 20px 20px;box-sizing:border-box;border-radius:2px}
.bd-al-page .bd-al-paper::before{width:0}
.bd-al-page .bd-al-num{font-size:58px;right:16px;top:8px}
.bd-al-page .bd-al-mounts{grid-template-columns:1fr;gap:16px;margin-top:62px}
.bd-al-page .bd-al-mounts>:nth-child(even){margin-top:0}
.bd-al-page .bd-al-mount{transform:rotate(var(--bd-r,0deg))!important;padding:13px 14px 14px}
.bd-al-page .bd-al-what{font-size:20px}
.bd-al-page .bd-al-d{font-size:13.5px}
.bd-al-page .bd-al-note{transform:rotate(-2deg);font-size:18px;padding-left:6px}
.bd-al-page .bd-al-ribbon{left:16%;right:auto;top:-2px;height:112px}
.bd-al-pages .tp-snext{bottom:22px;right:22px}
}
.tp-sw:has(.bd-al-pages) .tp-shint{color:rgba(58,46,36,.55)}