:root { --hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; --sea: #526d68; --chalk:#edf0e7; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
main { width:100%; }
.house-inner { width:min(1440px,calc(100% - 112px)); margin-inline:auto; }
.site-header { width:min(1440px,calc(100% - 112px)); height:94px; }
.house-nav { display:flex; gap:32px; font-size:13px; }
.house-nav a { text-decoration:none; padding:12px 0; }
.house-nav a:hover { color:var(--accent); }
.cart-toggle { border:0; background:none; display:flex; align-items:center; gap:10px; font-size:13px; padding:10px; }
.cart-toggle span { min-width:20px; font-variant-numeric:tabular-nums; }
.shop-section { padding-top:28px; padding-bottom:40px; }
.shop-section h1 { font-size:44px; }
.rack-stage { height:clamp(440px,calc(100vh - 300px),670px); }
.shop-layout { align-items:center; grid-template-columns:minmax(0,1fr) 300px; }
.has-product-photos .panel-content { min-height:540px; }
.product-photo-button { height:170px; }
.product-panel:has(.product-gallery) .product-heading { font-size:24px; }
.product-panel:has(.product-gallery) .description { font-size:13px; }
.product-panel:has(.product-gallery) .view-button { margin-top:10px; min-height:36px; padding:8px 0; background:none; color:var(--ink); font-size:12px; }
.product-panel .view-button .ui-icon { filter:none; }
.purchase-row { margin-top:16px; display:flex; gap:8px; }
.purchase-row select { min-width:78px; width:78px; border:1px solid var(--line); background:transparent; padding:10px 8px; font:13px var(--sans); border-radius:0; }
.add-button { min-height:43px; border:0; background:var(--ink); color:white; flex:1; font-size:13px; }
.add-button:hover { background:var(--sea); }
.panel-navigation { margin-top:15px; padding-top:12px; }
.scribble, .handwritten { font-family:var(--hand); font-weight:400; }
.scribble { font-size:24px; line-height:1.35; }
.band-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:48px; }
.band-heading h2 { font:400 44px/1.15 var(--serif); margin:12px 0 0; }
.band-heading>.scribble { color:var(--accent); transform:rotate(-3deg); padding-bottom:7px; }
.photo-wall { background:#e4e9e3; padding:65px 0 76px; border-top:1px solid #d5dbd4; box-shadow:inset 0 12px 22px -24px #364a37; }
.wall-collage { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:34px 32px; align-items:center; padding:15px 15px 28px; }
.polaroid { margin:0; display:block; border:0; padding:12px 12px 0; border-radius:1px; background:#fafaf4; box-shadow:2px 5px 7px #34443823,0 1px 2px #34443824; transform:rotate(var(--tilt)); position:relative; transition:transform .3s,box-shadow .3s; width:100%; text-align:left; grid-column:span 3; }
.polaroid:hover { transform:rotate(0deg) translateY(-6px); box-shadow:3px 12px 18px #34443830; z-index:2; }
.polaroid::before { content:""; position:absolute; left:34%; top:-13px; width:34%; height:30px; background:#d0bf8cad; box-shadow:0 1px 1px #5f583322; transform:rotate(-4deg); z-index:1; clip-path:polygon(2% 0,98% 4%,100% 94%,1% 100%,3% 70%,0 50%); }
.polaroid img { width:100%; aspect-ratio:1; object-fit:cover; object-position:var(--position,center); }
.polaroid.contain img { object-fit:contain; background:white; }
.polaroid .photo-caption { display:block; font:22px/1.2 var(--hand); min-height:66px; padding:17px 3px 15px; color:#33433c; text-align:center; }
.polaroid:nth-child(1) { grid-column:span 4; grid-row:span 2; }
.polaroid:nth-child(1) img { aspect-ratio:.88; }
.polaroid:nth-child(2) { grid-column:span 4; }
.polaroid:nth-child(2) img { aspect-ratio:1.4; }
.polaroid:nth-child(3) { grid-column:span 3; margin-left:20px; }
.polaroid:nth-child(4) { grid-column:span 4; }
.polaroid:nth-child(4) img { aspect-ratio:1.2; }
.wall-postcard { grid-column:span 4; align-self:center; padding:20px 25px; border:1px solid #6c85796b; transform:rotate(-3deg); background:#d1ded5; min-height:155px; }
.wall-postcard h3 { font:29px/1.15 var(--hand); margin:0 0 10px; }
.wall-postcard p { font:13px/1.7 var(--sans); max-width:270px; }
.wall-sticker { grid-column:span 2; text-align:center; transform:rotate(9deg); }
.wall-sticker img { height:100px; width:100px; object-fit:contain; margin:auto; }
.wall-sticker span { display:block; font:16px var(--hand); margin-top:8px; }
.wall-board-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(360px,.75fr); gap:38px; align-items:start; }
.wall-board-layout .wall-collage { height:590px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,270px); gap:26px 22px; align-items:start; overflow:visible; padding:22px 16px 24px; }
.wall-board-layout .polaroid { grid-column:auto; grid-row:auto; width:100%; height:270px; margin:0; padding:10px 10px 0; }
.wall-board-layout .polaroid:nth-child(n) { grid-column:auto; grid-row:auto; margin:0; }
.wall-board-layout .polaroid:nth-child(n) img { width:100%; height:205px; aspect-ratio:auto; object-fit:cover; object-position:var(--position,center); }
.wall-board-layout .polaroid .photo-caption { min-height:0; padding:12px 2px 10px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wall-board-layout .wall-postcard,.wall-board-layout .wall-sticker { grid-column:auto; width:218px; min-height:0; align-self:center; }
.wall-board-layout .wall-postcard { height:235px; padding:22px; }
.wall-board-layout .wall-sticker { padding-top:44px; }
.wall-notices { min-width:0; }
.wall-notices-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:0 4px 16px; }
.wall-notices-heading h3 { margin:6px 0 0; font:700 italic 28px/1.1 var(--serif); }
.wall-notices-heading .eyebrow { font-family:monospace; font-size:10px; }
.wall-board-layout .corkboard { height:544px; padding:20px 18px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:15px; align-content:stretch; overflow:visible; border-width:9px; }
.wall-board-layout .notice { grid-column:span 1; min-height:0; padding:13px; overflow:hidden; }
.wall-board-layout .notice h3 { margin:12px 0 7px; font-size:19px; line-height:1.05; }
.wall-board-layout .notice p { display:none; }
.wall-board-layout .notice .notice-foot { margin-top:8px; padding-top:7px; font-size:9px; }
.wall-board-layout .notice img { height:74px; margin-top:7px; }
.wall-board-layout .notice.drop { grid-row:auto; }
.wall-board-layout .notice.drop img { height:72px; }
.wall-board-layout .notice.social { padding:12px; }
.wall-board-layout .notice.social img { height:74px; }
.notice-section { padding:70px 0 78px; background:#e9ece8; }
.corkboard { border:11px solid #9a7450; border-bottom-color:#7d5c3f; outline:1px solid #70593f; padding:42px 36px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:28px; align-items:center; box-shadow:inset 0 3px 10px #45372640,0 7px 14px #243c3320; background-color:#aa8a62; background-image:radial-gradient(ellipse at 20% 40%,#4f382b55 0 1px,transparent 2px),radial-gradient(ellipse at 80% 70%,#efcc9855 0 2px,transparent 3px),radial-gradient(ellipse at 40% 90%,#71513644 0 2px,transparent 4px); background-size:7px 9px,13px 11px,19px 17px; }
.corkboard { background-image:url("assets/cork-texture.png"); background-size:620px; }
.notice { position:relative; display:block; color:#263b36; grid-column:span 2; background:#f8f7ee; border:0; text-decoration:none; padding:24px; box-shadow:3px 5px 7px #34241640; transform:rotate(var(--tilt)); transition:transform .25s; text-align:left; width:100%; }
.notice:hover { transform:rotate(0deg) translateY(-4px); }
.notice::before { content:""; position:absolute; top:8px; left:50%; width:9px; height:9px; background:#8c4140; border-radius:50%; box-shadow:1px 2px 2px #2c201e70,inset 1px 1px 1px #ffffff80; }
.notice h3 { font:32px/1.08 var(--hand); margin:18px 0 14px; }
.notice p { font:20px/1.35 var(--hand); white-space:pre-line; }
.notice small { font:10px/1.5 var(--sans); display:block; }
.notice .notice-foot { margin-top:22px; border-top:1px solid #43534630; padding-top:12px; font-size:12px; }
.notice img { width:100%; height:180px; object-fit:cover; margin-top:15px; }
.notice.drop { grid-row:span 2; }
.notice.drop img { height:240px; object-fit:contain; background:white; }
.notice.giveaway { background:#e7d26b; }
.notice.social { padding:14px; }
.notice.social h3 { margin:8px 0 12px; }
.notice.social img { height:150px; }
.notice.upcoming { background:#d9e4e8; }
.notice.brand { background:#f0dfdb; }
.forecast-section { padding:90px 0 100px; background:#dbe4e4; border-top:1px solid #c8d3d2; }
.forecast-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:100px; align-items:center; max-width:1170px; }
.forecast-intro h2 { font:400 52px/1.08 var(--serif); margin:18px 0 28px; }
.forecast-intro>.scribble { color:#547069; transform:rotate(-4deg); }
.forecast-intro img { object-fit:contain; margin:28px 0; transform:rotate(8deg); }
.forecast-footnote { font-size:12px; color:#687b76; }
.beach-sign { background:#e5bc37; padding:22px; border:7px solid #dbb338; box-shadow:3px 7px 0 #c4a034,7px 14px 18px #294c4424; border-radius:28px 28px 5px 5px; transform:rotate(1deg); }
.sign-top { display:flex; align-items:center; gap:17px; flex-wrap:wrap; margin-bottom:20px; color:#234b54; }
.sign-top h3 { font:900 27px/.95 var(--sans); margin:0; max-width:160px; }
.sign-top>span:last-child { font-size:9px; margin-left:auto; }
.sign-badge { border:2px solid #234b54; border-radius:50%; width:60px; height:60px; display:grid; place-content:center; text-align:center; font:800 11px/1.2 var(--sans); flex-shrink:0; }
.chalkboard { background:#2e3c39; color:var(--chalk); padding:23px 25px; box-shadow:inset 1px 2px 5px #0005; min-height:440px; }
.forecast-tabs { display:flex; gap:16px; padding-bottom:14px; border-bottom:1px solid #e9eee46b; }
.forecast-tabs button { background:none; border:0; padding:5px 0; font:17px var(--hand); color:#c2d1c8; border-bottom:2px solid transparent; }
.forecast-tabs button[aria-selected=true] { border-color:#e5bc37; color:#fff6c9; }
.forecast-copy h4 { font:27px var(--hand); margin:23px 0 19px; }
.forecast-copy dl { margin:0; }
.forecast-copy dl>div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid #e9eee436; padding:12px 0; font:18px/1.3 var(--hand); }
.forecast-copy dt { color:#c2d1c8; }
.forecast-copy dd { margin:0; text-align:right; }
.forecast-copy p { font:15px/1.5 var(--hand); margin:18px 0; color:#d1dacc; }
.forecast-link { border:0; background:none; color:#f4dc84; font:17px var(--hand); padding:0; text-align:left; }
.sign-links { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:18px; }
.sign-links a { font-size:11px; text-decoration:none; border-bottom:1px solid #51634155; padding-bottom:5px; }
.site-footer { padding:28px 0; margin-top:0; border:0; }
.site-footer a { text-decoration:none; }
dialog { color:var(--ink); }
dialog::backdrop { background:#1d302c99; backdrop-filter:blur(3px); }
body:has(dialog[open]) { overflow:hidden; }
.dialog-close { position:absolute; top:16px; right:16px; z-index:2; }
.story-dialog { width:min(1060px,calc(100vw - 90px)); max-height:calc(100vh - 60px); padding:0; border:0; background:#f6f5ee; }
.story-layout { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; }
.story-image { width:100%; height: min(640px,calc(100vh - 80px)); object-fit:contain; background:#e2e8e1; }
.story-copy { padding:55px 36px 35px; }
.story-copy h2 { font:36px/1.1 var(--hand); margin:18px 0; }
.story-copy>p:not(.eyebrow) { font:14px/1.7 var(--sans); color:#66776e; }
.story-product { border-top:1px solid var(--line); margin-top:25px; padding-top:22px; }
.story-product strong { font:24px/1.2 var(--serif); display:block; margin:10px 0; }
.story-product .add-button { padding:12px 18px; }
.story-product .view-button { margin-top:14px; }
.note-dialog { width:470px; border:0; padding:52px 42px 40px; background:#f7f5e8; box-shadow:0 15px 40px #10231c40; }
.note-dialog h2 { font:36px/1.12 var(--hand); margin:22px 0; }
.note-dialog p:not(.eyebrow) { font:19px/1.55 var(--hand); white-space:pre-line; }
.note-dialog a { display:block; margin-top:24px; font-size:14px; }
.receipt-drawer { position:fixed; inset:0 0 0 auto; margin:0; border:0; padding:0; width:440px; max-width:100%; height:100%; max-height:100%; background:transparent; overflow-y:auto; }
.receipt-drawer[open] { animation:receipt-in .4s cubic-bezier(.2,.7,.3,1); }
@keyframes receipt-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
.receipt-paper { position:relative; background:#fcfbef; min-height:100%; padding:58px 34px 40px; border-left:1px solid #cccbbd; box-shadow:-10px 0 30px #172c291a; }
.receipt-brand { text-align:center; font:900 38px var(--serif); }
.receipt-subtitle { text-align:center; font:10px monospace; margin-top:3px; }
.receipt-paper h2 { font:32px var(--hand); text-align:center; margin:28px 0 12px; }
.receipt-meta { font:10px monospace; text-align:center; margin-bottom:28px; }
.receipt-items { border-block:1px dashed #8c9689; min-height:110px; }
.receipt-item { padding:22px 0; border-bottom:1px dashed #bac1b3; }
.receipt-item:last-child { border:0; }
.receipt-line { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; font:21px/1.25 var(--hand); }
.receipt-line strong { font-weight:400; max-width:240px; }
.receipt-line span { white-space:nowrap; }
.receipt-item small { display:block; margin-top:8px; font:12px monospace; color:#6b776c; }
.quantity { display:flex; align-items:center; gap:12px; margin-top:12px; }
.quantity input { width:42px; text-align:center; font:16px var(--hand); border:0; background:transparent; appearance:textfield; }
.quantity input::-webkit-inner-spin-button { appearance:none; }
.quantity .remove { margin-left:auto; }
.receipt-total { display:flex; justify-content:space-between; font:26px var(--hand); margin:25px 0 14px; }
.receipt-small { font:11px/1.6 var(--sans); color:#6d786b; margin:12px 0; text-align:center; }
.checkout-button { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; min-height:54px; padding:16px 20px; background:#293e37; color:white; font:600 15px var(--sans); margin-top:24px; }
.checkout-button img { filter:brightness(0) invert(1); }
.checkout-button:disabled { opacity:.4; cursor:not-allowed; }
.continue-shopping { display:block; border:0; background:none; margin:18px auto; padding:8px; font-size:12px; text-decoration:underline; }
.receipt-end { text-align:center; margin-top:35px; font:20px/1.5 var(--hand); }
.cart-empty { padding:34px 10px; text-align:center; font:23px var(--hand); }
@media(max-width:1250px) { .house-inner,.site-header { width:calc(100% - 64px); } .house-nav { gap:23px; } .shop-layout { grid-template-columns:minmax(0,1fr) 270px; } .shop-section h1 { font-size:39px; } .wall-collage { gap:28px 22px; } .polaroid .photo-caption { font-size:19px; } .forecast-layout { gap:55px; } .notice { padding:21px; } .notice h3 { font-size:28px; } .sign-top>span:last-child { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(max-height:850px) { .site-header { height:76px; } .shop-section { padding-top:20px; padding-bottom:20px; } .shop-section h1 { font-size:35px; } .has-product-photos .panel-content { min-height:500px; } .product-photo-button { height:112px; } .product-gallery { margin-bottom:6px; } .product-panel:has(.product-gallery) .product-heading { font-size:20px; line-height:1.08; } .product-panel:has(.product-gallery) .price { margin-top:6px; } .product-panel:has(.product-gallery) .description { font-size:12px; line-height:1.4; margin-top:7px; } .product-panel:has(.product-gallery) .product-options { margin-top:8px; } .purchase-row { margin-top:8px; } .product-panel:has(.product-gallery) .view-button { margin-top:6px; } .panel-navigation { margin-top:9px; } }