/* I Summer in Conshy — site styles Tokens: sky #4C82FF · haze #A6C1FF · sun #FFD459 · ink #132148 · paper #fff · card cream #FFFBF2 */ @font-face{font-family:'Burbank';src:url('../assets/fonts/burbank-bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Motherlode';src:url('../assets/fonts/motherlode.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Heebo';src:url('../assets/fonts/heebo-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Heebo';src:url('../assets/fonts/heebo-700.woff2') format('woff2');font-weight:700;font-display:swap} :root{ --sky:#4C82FF; --haze:#A6C1FF; --sun:#FFD459; --ink:#132148; --paper:#fff; --cream:#FFFBF2; --sky-hi:#3D6FE6; /* darker blue for small text / links (contrast-safe) */ --accent:var(--sun); /* season accent — swapped per data-season */ --hero-top:#3E74F5; /* hero sky gradient stops — swapped per season/weather */ --hero-bottom:#A6C1FF; --radius:14px; --shadow:0 10px 30px rgba(19,33,72,.12); --font-display:'Burbank',system-ui,sans-serif; --font-script:'Motherlode',cursive; --font-body:'Heebo',system-ui,sans-serif; } /* ---- Season accents (date-driven, set as data-season on ) ---- */ :root[data-season="fall"]{--accent:#E8930C;--hero-top:#5C7FD6;--hero-bottom:#E8B98A} :root[data-season="winter"]{--accent:#A6C1FF;--hero-top:#8FA9E8;--hero-bottom:#E9EFFC} :root[data-season="winter"].xmas{--accent:#FE1A00;--hero-top:#0D2B63;--hero-bottom:#4C82FF} :root[data-season="spring"]{--accent:#FF6AC7;--hero-top:#5B8CF7;--hero-bottom:#C9E4C5} /* ---- Weather layer (live, set as data-weather on ) ---- */ :root[data-weather="clouds"]{--hero-top:#7796DF;--hero-bottom:#C4D2F0} :root[data-weather="rain"]{--hero-top:#5A6C9E;--hero-bottom:#96A7CE} :root[data-weather="snow"]{--hero-top:#9FB4E4;--hero-bottom:#F0F4FD} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--sky-hi)} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--font-display);line-height:1.08;letter-spacing:.01em} h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.5rem} .script{font-family:var(--font-script);font-weight:700} .eyebrow{font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-hi);margin-bottom:.6rem} .lede{font-size:1.12rem;max-width:56ch} :focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px} /* ================= NAV ================= */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(19,33,72,.08)} .nav-in{display:flex;align-items:center;gap:22px;height:62px;max-width:1080px;margin:0 auto;padding:0 24px} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.05rem;color:var(--ink);text-decoration:none} .nav-logo img{width:34px;height:34px} .nav-links{display:flex;gap:20px;margin-left:auto;align-items:center} .nav-links a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem} .nav-links a:hover{color:var(--sky-hi)} .btn{display:inline-block;font-family:var(--font-body);font-weight:700;text-decoration:none;border-radius:999px;padding:.72rem 1.5rem;transition:transform .15s ease,box-shadow .15s ease;border:0;cursor:pointer;font-size:1rem} .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .btn-sun{background:var(--sun);color:var(--ink)} .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)} .btn-ink{background:var(--ink);color:#fff} .btn-sm{padding:.5rem 1.1rem;font-size:.9rem} /* ================= HERO ================= */ .hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--hero-top),var(--hero-bottom));transition:background 1.2s ease;min-height:88vh;display:flex;flex-direction:column;justify-content:center} .hero-in{position:relative;z-index:3;text-align:center;padding:70px 24px 120px} /* sun */ .sun{position:absolute;top:8%;right:10%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#FFE9A3,var(--sun) 62%);box-shadow:0 0 70px 28px rgba(255,212,89,.45);z-index:1} :root[data-weather="rain"] .sun,:root[data-weather="snow"] .sun{opacity:.25} :root[data-weather="clouds"] .sun{opacity:.55} .sun,.cloud{transition:opacity 1.2s ease} /* clouds — pill blobs, only shown for clouds/rain/snow */ .cloud{position:absolute;background:rgba(255,255,255,.85);border-radius:999px;opacity:0;z-index:2} .cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%} .cloud.c1{top:14%;left:6%;width:130px;height:38px} .cloud.c1::before{width:52px;height:52px;top:-24px;left:22px} .cloud.c1::after{width:38px;height:38px;top:-16px;left:64px} .cloud.c2{top:26%;right:20%;width:100px;height:30px} .cloud.c2::before{width:40px;height:40px;top:-18px;left:18px} .cloud.c2::after{width:30px;height:30px;top:-12px;left:50px} :root[data-weather="clouds"] .cloud,:root[data-weather="rain"] .cloud,:root[data-weather="snow"] .cloud{opacity:.9} :root[data-weather="rain"] .cloud{background:rgba(226,232,246,.9)} /* rain streaks / snow dots via one overlay */ .precip{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity 1s ease;pointer-events:none} :root[data-weather="rain"] .precip{opacity:.5;background-image:repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.35) 14px 15px,transparent 15px 26px);animation:rainfall .9s linear infinite} :root[data-weather="snow"] .precip{opacity:.7;background-image:radial-gradient(rgba(255,255,255,.9) 1.5px,transparent 2px);background-size:26px 26px;animation:snowfall 7s linear infinite} @keyframes rainfall{to{background-position:-40px 80px}} @keyframes snowfall{to{background-position:14px 180px}} /* river silhouette at hero base — the Schuylkill, obviously */ .river{position:absolute;bottom:-2px;left:0;right:0;z-index:2} .river svg{display:block;width:100%;height:74px} /* ---- the Matsonford Bridge map: bird's-eye scene with live traffic ---- */ .mapscene{margin:2rem auto 0;max-width:960px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(19,33,72,.1);aspect-ratio:1200/520;background:#EEF2F7;--corridor-t:28s} .mapscene svg{display:block;width:100%;height:100%} /* corridor paths (the real route: I-76 sliver -> Matsonford -> Front St -> bridge -> Fayette & Elm) */ .p-e{offset-path:path("M-40,512 C120,500 230,474 300,455 C370,436 396,427 430,415 L930,-52")} .p-w{offset-path:path("M930,-52 L430,415 C396,427 370,436 300,455 C230,474 120,500 -40,512")} .p-t{offset-path:path("M-40,512 C120,500 230,474 300,455 C370,436 396,427 430,415 L1100,536")} .p-r{offset-path:path("M-60,198 L1260,352")} .veh{opacity:0;offset-rotate:auto;offset-distance:0%;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--corridor-t)} @supports not (offset-path: path("M0 0 H1")){.veh{display:none}} .sig{animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--corridor-t)} .sig-elm{animation-name:sig-elm} .sig-front{animation-name:sig-front} /* Elm red 38-56% · Front red 56-73% — offset, never in sync */ @keyframes sig-elm{0%,37.9%{fill:#43B75D}38%,56%{fill:#FE1A00}56.1%,100%{fill:#43B75D}} @keyframes sig-front{0%,55.9%{fill:#43B75D}56%,73%{fill:#FE1A00}73.1%,100%{fill:#43B75D}} /* eastbound: queue-and-release at the Elm light (stop %s measured on the real path) */ .e1{animation-name:drv-e1}.e2{animation-name:drv-e2}.e3{animation-name:drv-e3} .e4{animation-name:drv-e4}.e5{animation-name:drv-e5}.dog{animation-name:drv-dog} @keyframes drv-e1{0%{offset-distance:0%}38%{offset-distance:83.3%}56.5%{offset-distance:83.3%}80%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-e2{0%{offset-distance:0%}41%{offset-distance:79.5%}58%{offset-distance:79.5%}82%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-e3{0%{offset-distance:0%}44%{offset-distance:75.7%}59.5%{offset-distance:75.7%}84%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-e4{0%{offset-distance:0%}36%{offset-distance:70%}61%{offset-distance:70%}86%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-e5{0%{offset-distance:0%}34%{offset-distance:64.5%}63%{offset-distance:64.5%}88%{offset-distance:100%}100%{offset-distance:100%}} /* the hotdog car hits every green */ @keyframes drv-dog{0%{offset-distance:0%}74%{offset-distance:100%}100%{offset-distance:100%}} /* westbound: queue at the Front St light */ .w1{animation-name:drv-w1}.w2{animation-name:drv-w2}.w3{animation-name:drv-w3} .w4{animation-name:drv-w4}.w5{animation-name:drv-w5}.t1{animation-name:drv-t1} @keyframes drv-w1{0%{offset-distance:0%}55%{offset-distance:56.4%}72.5%{offset-distance:56.4%}92%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-w2{0%{offset-distance:0%}58%{offset-distance:53.3%}74%{offset-distance:53.3%}94%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-w3{0%{offset-distance:0%}61%{offset-distance:50.2%}75.5%{offset-distance:50.2%}96%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-w4{0%{offset-distance:0%}53%{offset-distance:47.1%}78%{offset-distance:47.1%}97%{offset-distance:100%}100%{offset-distance:100%}} @keyframes drv-w5{0%{offset-distance:0%}51%{offset-distance:44%}80%{offset-distance:44%}98%{offset-distance:100%}100%{offset-distance:100%}} /* the local who turns off at Front St */ @keyframes drv-t1{0%{offset-distance:0%}78%{offset-distance:100%}100%{offset-distance:100%}} /* the rowing shell: long lazy loop downstream */ .shell{opacity:1;animation:drv-shell 55s linear infinite} @keyframes drv-shell{0%{offset-distance:0%}100%{offset-distance:100%}} /* traffic density: JS sets data-traffic + data-rush on from Conshy time. Lights and vehicles share --corridor-t so the choreography never desyncs. */ :root[data-traffic="heavy"] .mapscene{--corridor-t:42s} :root[data-traffic="heavy"] .e1,:root[data-traffic="heavy"] .e2,:root[data-traffic="heavy"] .e3, :root[data-traffic="heavy"] .w1,:root[data-traffic="heavy"] .w2,:root[data-traffic="heavy"] .w3{opacity:1} :root[data-traffic="heavy"][data-rush="pm"] .e4,:root[data-traffic="heavy"][data-rush="pm"] .e5{opacity:1} :root[data-traffic="heavy"][data-rush="am"] .w4,:root[data-traffic="heavy"][data-rush="am"] .w5{opacity:1} :root[data-traffic="moderate"] .mapscene{--corridor-t:30s} :root[data-traffic="moderate"] .e1,:root[data-traffic="moderate"] .e2, :root[data-traffic="moderate"] .w1,:root[data-traffic="moderate"] .w2,:root[data-traffic="moderate"] .t1{opacity:1} :root[data-traffic="light"] .mapscene{--corridor-t:22s} :root[data-traffic="light"] .e1,:root[data-traffic="light"] .w1,:root[data-traffic="light"] .t1{opacity:1} :root[data-traffic="empty"] .mapscene{--corridor-t:20s} :root[data-traffic="empty"] .dog{opacity:1} :root[data-night="true"] .dog{opacity:1} /* weather slows the whole corridor down (lights included — even time moves slower in the rain) */ :root[data-weather="rain"] .veh,:root[data-weather="rain"] .sig{animation-duration:calc(var(--corridor-t)*1.5)} :root[data-weather="snow"] .veh,:root[data-weather="snow"] .sig{animation-duration:calc(var(--corridor-t)*2)} :root[data-weather="rain"] .map-water{fill:#7FA3C4} :root[data-weather="snow"] .map-water{fill:#B9D3E8} :root[data-weather="snow"] .shell{display:none} /* nobody sculls in a blizzard */ :root[data-night="true"] .veh:not(.shell){filter:drop-shadow(0 0 5px rgba(255,212,89,.85))} /* current shimmer */ .shim{animation:shimmer 14s linear infinite} .shim.s2{animation-duration:19s;animation-delay:-6s} @keyframes shimmer{to{stroke-dashoffset:-232}} /* reduced motion: a quiet parked scene, lights resting on green */ @media (prefers-reduced-motion: reduce){ .e1{offset-distance:60%;opacity:1} .w1{offset-distance:72%;opacity:1} .dog{offset-distance:36%;opacity:1} .shell{offset-distance:45%;opacity:1} } .map-cap{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:1.1rem} .map-cap .wx{position:static;background:var(--cream);color:var(--ink);border:1px dashed rgba(19,33,72,.3);backdrop-filter:none} .map-note{font-size:.82rem;color:rgba(19,33,72,.55)} /* wordmark */ .wm{width:min(520px,78vw);margin:0 auto 1.4rem;filter:drop-shadow(0 6px 24px rgba(19,33,72,.25));cursor:pointer} .wm svg{width:100%;height:auto;overflow:visible} /* ink only; mask rects keep their own black/white fills */ .wm .wm-top,.wm .wm-script,.wm .wm-swash{fill:#fff} .wm .wm-top{opacity:0;transform:translateY(-14px)} .loaded .wm .wm-top{animation:settle .55s ease-out .1s forwards} @keyframes settle{to{opacity:1;transform:translateY(0)}} /* The handwritten Conshy: skeleton strokes inside the reveal masks draw the ink along the true pen route (spec: design-refs/logo-handwriting-spec.md). Default state is fully revealed, so any failure mode = static logo, never a missing one. .loaded runs the write; animation-fill-mode:backwards hides the ink during each stroke's delay. */ .loaded .sk1{animation:sk-draw .28s cubic-bezier(.3,0,.2,1) .5s backwards} .loaded .sk2{animation:sk-run .62s linear .78s backwards} .loaded .sky1{animation:sk-draw .22s cubic-bezier(.3,0,.2,1) 1.4s backwards} .loaded .sky3{animation:sk-y .52s linear 1.6s backwards} .loaded .sky2{animation:sk-draw .08s cubic-bezier(.3,0,.2,1) 1.62s backwards} .loaded .sk3{animation:sk-draw .35s cubic-bezier(.45,0,.75,.5) 2.32s backwards} .loaded .sk4{animation:sk-draw .08s linear 2.7s backwards} .loaded .skf{animation:sk-fillin .3s linear 2.82s backwards} /* dashes start at 105 (gap 110) so the round cap can't peek out before the pen lands */ @keyframes sk-draw{from{stroke-dashoffset:105}to{stroke-dashoffset:0}} /* pen dynamics: quick through "on", slow into the s, up-down the h */ @keyframes sk-run{0%{stroke-dashoffset:105}26%{stroke-dashoffset:60}58%{stroke-dashoffset:38}78%{stroke-dashoffset:18}100%{stroke-dashoffset:0}} /* brisk out the y: down the stem, round the loop */ @keyframes sk-y{0%{stroke-dashoffset:105}30%{stroke-dashoffset:72}55%{stroke-dashoffset:40}78%{stroke-dashoffset:16}100%{stroke-dashoffset:0}} @keyframes sk-fillin{from{opacity:0}to{opacity:1}} /* replay: the signature, signed again (hover or tap; JS toggles .replay) */ .wm.replay .sk1{animation:sk-draw .28s cubic-bezier(.3,0,.2,1) 0s backwards} .wm.replay .sk2{animation:sk-run .62s linear .28s backwards} .wm.replay .sky1{animation:sk-draw .22s cubic-bezier(.3,0,.2,1) .9s backwards} .wm.replay .sky3{animation:sk-y .52s linear 1.1s backwards} .wm.replay .sky2{animation:sk-draw .08s cubic-bezier(.3,0,.2,1) 1.12s backwards} .wm.replay .sk3{animation:sk-draw .35s cubic-bezier(.45,0,.75,.5) 1.82s backwards} .wm.replay .sk4{animation:sk-draw .08s linear 2.2s backwards} .wm.replay .skf{animation:sk-fillin .3s linear 2.32s backwards} /* postmark countdown stamp */ .postmark{position:relative;width:158px;height:158px;margin:-30px auto 1.6rem;transform:rotate(-8deg) scale(0);color:#fff;z-index:3} .loaded .postmark{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) 2.87s forwards} @keyframes stamp{to{transform:rotate(-8deg) scale(1)}} .postmark .ring{position:absolute;inset:0;border:2.5px dashed rgba(255,255,255,.9);border-radius:50%} .postmark .ring::after{content:"";position:absolute;inset:9px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%} .postmark svg{position:absolute;inset:0;width:100%;height:100%} .postmark svg text{fill:#fff;font-family:var(--font-body);font-weight:700;font-size:10.5px;letter-spacing:.22em} .postmark .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .postmark .num b{font-family:var(--font-display);font-size:2.9rem;line-height:1} .postmark .num span{font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;max-width:90px;line-height:1.35;margin-top:.25rem} .hero-sub{font-size:1.15rem;max-width:44ch;margin:0 auto 1.8rem;text-shadow:0 1px 10px rgba(19,33,72,.3)} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* live chips: weather + bridge report */ .chips{position:absolute;left:24px;bottom:24px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:8px} .wx{display:none;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700} .wx.on{display:inline-flex} /* ================= AIRMAIL DIVIDER ================= */ .airmail{height:14px;background:repeating-linear-gradient(-45deg,var(--sky) 0 22px,#fff 22px 34px,var(--sun) 34px 56px,#fff 56px 68px)} /* ================= SECTIONS ================= */ .section{padding:84px 0} .section-tight{padding:60px 0} .center{text-align:center} .swash-rule{width:130px;margin:.8rem auto 0;display:block} .swash-rule path{fill:var(--accent)} /* product print cards */ .grid-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:2.4rem} .print{background:#fff;border-radius:6px;padding:14px 14px 18px;box-shadow:0 3px 14px rgba(19,33,72,.13);text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease;position:relative} .print:nth-child(even){transform:rotate(.7deg)} .print:nth-child(odd){transform:rotate(-.6deg)} .print:hover{transform:rotate(0) translateY(-6px);box-shadow:0 16px 34px rgba(19,33,72,.2);z-index:2} .print img{border-radius:3px;aspect-ratio:1/1.05;object-fit:cover;background:var(--cream)} .print h3{font-size:1.15rem;margin:.8rem 0 .1rem} .print .price{font-weight:700;color:var(--sky-hi)} .print .tag{position:absolute;top:22px;left:-9px;background:var(--accent);color:var(--ink);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .7rem;border-radius:3px;box-shadow:0 2px 8px rgba(19,33,72,.25)} /* postcard-pack designed card (no photo needed) */ .pc-art{aspect-ratio:1/1.05;border-radius:3px;background:linear-gradient(180deg,var(--sky) 0 58%,var(--sun) 58% 62%,var(--cream) 62%);position:relative;overflow:hidden} .pc-art .pc-word{position:absolute;top:16%;left:0;right:0;text-align:center;color:#fff;font-family:var(--font-script);font-size:1.9rem;transform:rotate(-4deg)} .pc-art .pc-small{position:absolute;bottom:10%;left:0;right:0;text-align:center;color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .pc-art .pc-stampbox{position:absolute;top:8px;right:8px;width:34px;height:40px;border:2px dashed rgba(255,255,255,.8);border-radius:2px} /* what is conshy */ .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .facts{display:grid;gap:14px} .fact{display:flex;gap:14px;align-items:baseline;border-bottom:1px dashed rgba(19,33,72,.18);padding-bottom:12px} .fact b{font-family:var(--font-display);font-size:1.6rem;color:var(--sky-hi);min-width:86px;text-align:right} .fact span{font-size:.98rem} /* best-of teaser + cards */ .grid-best{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:2.2rem} .best-card{background:var(--cream);border-radius:var(--radius);padding:26px;border:1px solid rgba(19,33,72,.07)} .best-card .cat{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-hi)} .best-card h3{margin:.4rem 0 .3rem;font-size:1.25rem} .best-card p{font-size:.95rem} .highlight-card{grid-column:1/-1;background:var(--ink);color:#fff;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between} .highlight-card .cat{color:var(--sun)} .highlight-card h3{font-size:1.5rem} /* gift band */ .gift{background:var(--sun);padding:66px 0} .gift-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .gift h2{font-size:clamp(1.7rem,3.6vw,2.4rem)} .gift p{max-width:52ch} /* newsletter — postcard back */ .postcard-back{background:var(--cream);border:1px solid rgba(19,33,72,.14);border-radius:8px;box-shadow:var(--shadow);max-width:760px;margin:2.2rem auto 0;padding:34px;display:grid;grid-template-columns:1.2fr .9fr;gap:30px;position:relative;transform:rotate(-.5deg)} .postcard-back::before{content:"";position:absolute;top:24px;bottom:24px;left:55%;border-left:1.5px solid rgba(19,33,72,.22)} .pcb-left p{font-family:var(--font-script);font-size:1.5rem;line-height:1.5;transform:rotate(-.8deg);color:#2b3a66} .pcb-right{display:flex;flex-direction:column;gap:14px;padding-left:26px} .pcb-stamp{align-self:flex-end;width:64px;height:76px;border:2px dashed rgba(19,33,72,.4);border-radius:3px;display:flex;align-items:center;justify-content:center} .pcb-stamp img{width:44px;height:44px} .pcb-right input{border:0;border-bottom:1.5px solid rgba(19,33,72,.35);background:transparent;padding:.55rem .1rem;font-family:var(--font-body);font-size:1rem;color:var(--ink)} .pcb-right input:focus{outline:none;border-bottom-color:var(--sky-hi)} /* ================= FOOTER ================= */ footer{background:var(--ink);color:#fff;padding:60px 0 40px;margin-top:0} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .foot-grid h4{font-family:var(--font-display);margin-bottom:.7rem;font-size:1rem;letter-spacing:.04em} .foot-grid a{color:var(--haze);text-decoration:none;display:block;padding:.18rem 0;font-size:.95rem} .foot-grid a:hover{color:#fff} .foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:1rem} .foot-brand img{width:44px;height:44px} .smallprint{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;font-size:.82rem;color:var(--haze);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ================= INNER PAGES ================= */ .page-head{background:linear-gradient(180deg,var(--hero-top),var(--hero-bottom));color:#fff;padding:84px 0 60px;text-align:center} .page-head h1{font-size:clamp(2.2rem,5vw,3.4rem)} .page-head p{max-width:52ch;margin:0.6rem auto 0;text-shadow:0 1px 8px rgba(19,33,72,.3)} .faq-item{border-bottom:1px dashed rgba(19,33,72,.2);padding:22px 0} .faq-item h3{font-size:1.15rem;margin-bottom:.4rem} details.faq-item summary{cursor:pointer;font-family:var(--font-display);font-size:1.15rem;list-style:none} details.faq-item summary::after{content:"+";float:right;color:var(--sky-hi);font-size:1.3rem} details[open].faq-item summary::after{content:"–"} details.faq-item p{margin-top:.6rem} .prose{max-width:64ch;margin:0 auto} .prose p{margin-bottom:1.1rem;font-size:1.05rem} /* shop */ .shop-note{background:var(--cream);border-radius:var(--radius);padding:18px 22px;font-size:.95rem;margin-top:1.4rem;border:1px dashed rgba(19,33,72,.25)} .swatches{display:flex;gap:6px;flex-wrap:wrap;margin:.5rem 0} .swatch{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(19,33,72,.2)} /* ---- catalog spreads ---- */ .spread{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:78px 0;border-bottom:1.5px dashed rgba(19,33,72,.18)} .spread:last-of-type{border-bottom:0} .spread.flip .spread-img{order:2} .spread-img{position:relative} .spread-img img{border-radius:6px;box-shadow:var(--shadow);background:var(--cream)} .spread-img::after{content:"";position:absolute;inset:-10px;border:1.5px solid rgba(19,33,72,.1);border-radius:10px;pointer-events:none} .item-no{display:flex;align-items:center;gap:14px;font-family:var(--font-display);color:var(--sky-hi);font-size:.95rem;letter-spacing:.16em;margin-bottom:.7rem} .item-no::after{content:"";flex:1;border-top:2px solid var(--sun);max-width:90px} .spread h2{font-size:clamp(1.7rem,3.4vw,2.4rem)} .spread .story{margin:.9rem 0 1.1rem;font-size:1.07rem;max-width:46ch} .spec{list-style:none;margin:0 0 1.4rem;font-size:.95rem} .spec li{padding:.4rem 0;border-bottom:1px dotted rgba(19,33,72,.22);display:flex;justify-content:space-between;gap:18px} .spec li b{font-weight:700;white-space:nowrap} .buy-line{display:inline-flex;align-items:baseline;gap:12px} .buy-line .price-big{font-family:var(--font-display);font-size:1.6rem;color:var(--ink)} /* back pages */ .backpages{background:var(--cream);padding:78px 0} .backpages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:2.2rem} @media (max-width:820px){ .spread{grid-template-columns:1fr;gap:30px;padding:54px 0} .spread.flip .spread-img{order:0} } /* ================= RESPONSIVE ================= */ @media (max-width:820px){ .two-col{grid-template-columns:1fr;gap:34px} .foot-grid{grid-template-columns:1fr} .postcard-back{grid-template-columns:1fr;transform:none} .postcard-back::before{display:none} .pcb-right{padding-left:0} .nav-links{gap:14px} .nav-links a.hide-m{display:none} .hero{min-height:76vh} .sun{width:84px;height:84px;top:6%;right:6%} } /* ================= MOTION SAFETY ================= */ @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} .wm .wm-top{opacity:1;transform:none} .postmark{transform:rotate(-8deg) scale(1)} } /* no-JS fallback: everything visible (reveal masks default to fully drawn) */ .no-js .wm .wm-top{opacity:1;transform:none} .no-js .postmark{transform:rotate(-8deg) scale(1)}