/* Postmello homepage — the selected desk-and-letters design. */
:root {
  --ink:#44392e; --paper:#faf5ec; --paper-deep:#eee5d6;
  --muted:#6e6255; --line:#d8cbb8; --mint:#e8ece2; --accent:#7b6249;
  --grain:url('/assets/paper-grain.png');
  font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper);
  font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--grain) repeat, var(--paper); background-size:128px; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-underline-offset:5px; }
button { font:inherit; }
p { font-size:1.0625rem; line-height:1.7; margin:0 0 20px; text-wrap:pretty; }
h1,h2,h3 { margin:0; font-weight:400; text-wrap:balance; }
h1,h2 { font-family:Lora,Georgia,serif; letter-spacing:-.045em; line-height:1.17; }
h1 { font-size:clamp(3.25rem,5.7vw,5.15rem); }
h2 { font-size:clamp(2.25rem,3.8vw,3.5rem); }
h3 { font-size:1.3rem; line-height:1.35; letter-spacing:-.02em; }
em { color:var(--accent); font-weight:400; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.section { padding-block:clamp(70px,8vw,108px); }
.eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:24px; line-height:1.5; color:var(--muted); }
.header { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:32px; }
.brand { flex-shrink:0; }
.brand img { width:185px; }
.header nav,.footer nav { display:flex; align-items:center; gap:32px; }
.header nav a,.footer nav a { font-size:.875rem; text-decoration:none; }
.header nav a { font-weight:500; }
.header nav a:hover,.footer nav a:hover { text-decoration:underline; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding-block:38px 60px; }
.hero-copy { padding-block:32px; }
.hero h1 em { color:#88694b; }
.hero-detail { font-size:1.1875rem; line-height:1.65; max-width:25em; margin:28px 0 0; }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:32px; }
.hero-actions span { font-size:.8125rem; line-height:1.65; color:var(--muted); }
.store { display:inline-block; }
.store img { width:150px; height:50px; }
.store:hover { opacity:.84; }
.hero-art { position:relative; aspect-ratio:1; min-width:0; }
.hero-art .letter { position:absolute; top:18%; width:99%; left:-6%; transform:rotate(-9deg); filter:drop-shadow(0 12px 12px #6b4f2d20); }
.hero-art .mailbox { position:absolute; width:45%; right:0; bottom:1%; filter:drop-shadow(2px 15px 13px #6b4f2d1c); }
.hero-art .butterfly { position:absolute; width:17%; right:2%; top:7%; transform:rotate(13deg); }
.text-link { font-size:.9375rem; font-weight:500; display:inline-flex; align-items:center; gap:25px; text-decoration:none; border-bottom:1px solid #b6a18b; padding-bottom:6px; margin-top:10px; }
.text-link:hover { border-color:var(--ink); }
.text-link span { font-size:1.125rem; }
.family { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; border-top:1px solid var(--line); }
.family h2 { margin-bottom:28px; }
.family>img { width:100%; border-radius:4px; box-shadow:0 8px 20px #7459381c; transform:rotate(2deg); }
.origin { padding-block:56px 80px; }
.origin-inner { display:grid; grid-template-columns:1fr 3fr; gap:55px; border-top:1px solid var(--line); padding-top:52px; }
.origin h2 { font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:26px; }
.origin p:not(.eyebrow) { max-width:660px; }
.signature { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:26px; }
.signature-person { display:flex; align-items:center; gap:16px; }
.signature-person>span { font-size:.9375rem; line-height:1.6; }
/* Patrick's portrait, pasted beside the name like the lunch-table photo is
   pinned beside the story: a white edge and a soft shadow, never a frame. */
.signature-portrait { width:72px; height:72px; flex-shrink:0; border-radius:50%; object-fit:cover; border:3px solid #fffdf8; box-shadow:0 8px 16px -8px #5a3f2099; }
.signature small { font-size:.75rem; color:var(--muted); }
.safety { background:var(--grain) repeat, var(--mint); background-size:128px; padding-block:70px; }
.safety-heading { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.safety-heading h2 { font-size:clamp(2rem,3.2vw,2.75rem); }
.safety-heading img { width:130px; max-height:100px; object-fit:contain; margin-right:5%; }
.safety-bottom { display:flex; justify-content:space-between; align-items:center; gap:50px; border-top:1px solid #bdc4b4; padding-top:25px; margin-top:20px; }
.safety-bottom a { white-space:nowrap; }
.pricing-heading { max-width:640px; margin:0 auto 40px; text-align:center; }
.pricing-heading p:last-child { margin-top:26px; }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:960px; margin:auto; }
.price-card { border:1px solid var(--line); border-radius:4px; padding:38px; background:var(--grain) repeat,#fffaf3; background-size:128px; box-shadow:0 4px 9px #74593808; }
.price-card h3 { font:3rem/1.2 Lora,Georgia,serif; letter-spacing:-.05em; }
.price-card h3 span { font:1rem 'DM Sans',sans-serif; letter-spacing:0; }
.price-explanation { font-size:.8125rem; margin-top:12px; color:var(--muted); }
.price-card ul { padding:22px 0 0; margin:24px 0 0; list-style:none; border-top:1px solid var(--line); }
.price-card li { padding-left:24px; position:relative; font-size:1rem; line-height:1.5; margin-bottom:14px; }
.price-card li:before { content:'✓'; position:absolute; left:0; color:#68745a; }
.faq { max-width:1000px; padding-bottom:90px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; list-style:none; cursor:pointer; font-size:1.125rem; padding:23px 0; }
.faq summary::-webkit-details-marker { display:none; }
.faq details p { font-size:1rem; max-width:800px; }
.faq details[open] summary span { transform:rotate(45deg); }
.closing { text-align:center; padding-block:62px 76px; border-top:1px solid var(--line); }
.closing>img { width:70px; height:70px; object-fit:contain; margin:0 auto 20px; }
.closing h2 { font-size:clamp(2.25rem,4vw,3.5rem); margin-bottom:32px; }
.closing>p:last-child { font-size:.8125rem; color:var(--muted); margin-top:16px; }
.footer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding-block:34px 44px; border-top:1px solid var(--line); text-align:center; }
.footer nav { width:100%; justify-content:center; flex-wrap:wrap; row-gap:16px; }
.footer .brand img { width:150px; }
.footer>span { font-size:.75rem; color:var(--muted); }
.concept-return { position:fixed; bottom:14px; left:14px; color:var(--ink); background:var(--paper); font:500 .8125rem/1.2 'DM Sans',sans-serif; padding:12px 16px; border:1px solid var(--line); border-radius:30px; text-decoration:none; box-shadow:0 3px 20px #44392e12; z-index:1000; }
.skip { position:fixed; top:-100px; left:20px; padding:15px; background:var(--paper); z-index:2000; }
.skip:focus { top:15px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #937247; outline-offset:5px; }
@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .header nav { gap:22px; }
  .hero { gap:30px; }
  .hero h1 { font-size:clamp(3rem,6vw,4.5rem); }
  .hero-detail { font-size:1.125rem; }
  .footer { flex-wrap:wrap; }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 40px); }
  .header { padding-block:24px; gap:18px; align-items:center; }
  .header .brand img { width:150px; }
  .header nav { gap:18px; }
  .header nav a { font-size:.875rem; }

  .hero { grid-template-columns:1fr; gap:8px; padding:26px 0 35px; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:clamp(2.8rem,9.5vw,4.1rem); }
  .hero-detail { margin-top:24px; max-width:27em; }
  .hero-actions { margin-top:25px; }
  .hero-art { width:min(95%,480px); margin-inline:auto; aspect-ratio:1.18; }
  .hero-art .letter { top:17%; left:-1%; width:95%; }
  .hero-art .mailbox { width:39%; right:1%; bottom:0; }
  .hero-art .butterfly { width:14%; top:9%; right:4%; }
  .section { padding-block:60px; }
  .family { grid-template-columns:1fr; gap:28px; }
    .family>img { width:97%; margin:10px auto 0; }
  .origin { padding:20px 0 55px; }
  .origin-inner { grid-template-columns:1fr; gap:0; padding-top:35px; }
  .origin h2 { font-size:2rem; }
  .signature { flex-direction:column; align-items:flex-start; gap:12px; }
  .safety-heading { gap:15px; }
  .safety-heading h2 { font-size:2rem; }
  .safety-heading img { width:70px; margin-right:0; }
    .safety-bottom { display:block; margin-top:8px; }
  .safety-bottom a { margin-top:20px; }
  .price-grid { grid-template-columns:1fr; }
  .price-card { padding:28px; }
  .pricing-heading { text-align:left; }
  .faq { padding-bottom:50px; }
  .faq summary { font-size:1rem; }
  .closing { padding-block:50px; }
  .closing h2 { font-size:2.2rem; }
  .footer { padding-bottom:75px; }
  .footer .brand { width:100%; }
  .footer nav { gap:20px; flex-wrap:wrap; }
}
@media(max-width:380px) {
  .header { flex-wrap:wrap; }
  .header nav { width:100%; justify-content:space-between; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* Original Postmello artwork: identity, stationery, collections, and family notes. */
.header .brand,.footer .brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.header .brand .brand-mark { width:46px; height:46px; object-fit:contain; }
.header .brand .brand-wordmark { width:177px; height:auto; }
.footer .brand .brand-mark { width:36px; height:36px; object-fit:contain; }
.footer .brand .brand-wordmark { width:150px; height:auto; }
.site-header .brand-mark { width:2.625rem; height:2.625rem; }
.header { gap:26px; }
.header nav { gap:26px; }
.opening .hero h1 { font-size:clamp(2.8rem,4.95vw,4.25rem); }
.fairy-showcase { margin-block:20px; color:#44392e; }
#desks .fairy-showcase { border-top:1px solid #d4c1a7; padding-top:64px; margin-top:65px; }
.fairy-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:45px; margin-bottom:46px; }
.fairy-heading h2 { font-family:var(--font-serif,Lora,Georgia,serif); font-size:clamp(2.2rem,3.7vw,3.25rem); line-height:1.2; letter-spacing:-.035em; font-weight:400; margin:0; }
.fairy-heading h2 em { font-weight:400; color:#80634e; }
.fairy-heading>p { max-width:360px; margin:0 0 4px; font-size:1rem; line-height:1.7; color:#6e6255; }
.fairy-spread { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.fairy-spread figure { margin:0; min-width:0; }
.fairy-paper-pair { display:flex; align-items:center; gap:4%; padding:12px 12px 24px; }
.fairy-paper-pair img { width:48%; aspect-ratio:3/4; height:auto; object-fit:contain; box-shadow:0 11px 18px #67573920; }
.fairy-paper-pair img:first-child { transform:rotate(-5deg); }
.fairy-paper-pair img:last-child { transform:rotate(4deg); }
.fairy-small-goods { display:grid; grid-template-columns:1fr 1fr; gap:32px 30px; }
.fairy-envelopes { grid-column:1/-1; }
.fairy-envelopes>div { display:flex; align-items:center; gap:5%; padding:4px 8px; }
.fairy-envelopes img { width:47.5%; height:auto; filter:drop-shadow(0 7px 7px #6757391c); }
.fairy-envelopes img:first-child { transform:rotate(-5deg); }
.fairy-envelopes img:last-child { transform:rotate(5deg); }
.fairy-stamps>div,.fairy-stickers>div { display:flex; gap:10px; align-items:center; justify-content:center; min-height:92px; }
.fairy-stamps img,.fairy-stickers img { width:calc((100% - 20px)/3); max-height:85px; object-fit:contain; filter:drop-shadow(0 3px 3px #67573918); }
.fairy-note { text-align:center; color:#806a55; font-size:.8125rem; line-height:1.6; margin:36px 0 0; }
.stationery-section { padding-block:82px 60px; }
.family-voices { padding-block:80px 24px; }
.voices-heading { text-align:center; margin-bottom:38px; }
.voices-heading h2 { font-size:clamp(2.2rem,3.5vw,3rem); }
.voices-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; max-width:1050px; margin:auto; }
.family-note { margin:0; min-width:0; padding:38px; display:flex; flex-direction:column; justify-content:space-between; min-height:310px; background:url('/assets/testimonial-paper.png') center/100% 100% no-repeat; filter:drop-shadow(0 8px 10px #67573916); }
.family-note:nth-child(2) { background-image:url('/assets/testimonial-paper-2.png'); }
.family-note blockquote { margin:0; }
.family-note blockquote p { font:400 1.3rem/1.65 Lora,Georgia,serif; letter-spacing:-.015em; margin:0 0 28px; }
.family-note figcaption { display:flex; align-items:center; gap:12px; font-size:.875rem; }
.family-note figcaption span { color:#6e6255; }
@media(max-width:1100px) {
  .header nav { gap:20px; }
  .header .brand { gap:9px; }
  .header .brand .brand-wordmark { width:150px; }
  .header .brand .brand-mark { width:42px; height:42px; }
  .fairy-spread { gap:30px; }
  .fairy-small-goods { gap:25px 20px; }
}
@media(max-width:760px) {
  .header { flex-wrap:wrap; gap:18px; }
  .header nav { width:100%; justify-content:space-between; gap:15px; }
  .header .brand .brand-mark { width:42px; height:42px; }
  .header .brand .brand-wordmark { width:158px; }
  .opening .hero h1 { font-size:clamp(2.5rem,8.4vw,3.6rem); }
  .fairy-heading { display:block; margin-bottom:32px; }
  .fairy-heading h2 { font-size:2.3rem; }
  .fairy-heading>p { margin-top:20px; }
  .fairy-spread { grid-template-columns:1fr; gap:30px; }
  .fairy-paper-pair { max-width:430px; margin:auto; }
  .fairy-small-goods { max-width:470px; width:100%; margin:auto; gap:25px; }
  .fairy-envelopes>div { padding-inline:10px; }
  .fairy-stamps img,.fairy-stickers img { max-height:74px; }
  .fairy-note { margin-top:25px; }
  .stationery-section { padding-block:55px 35px; }
  #desks .fairy-showcase { margin-top:40px; padding-top:40px; }
  .family-voices { padding-block:55px 0; }
  .voices-grid { grid-template-columns:1fr; gap:26px; }
  .family-note { padding:30px; min-height:260px; }
  .family-note blockquote p { font-size:1.1875rem; }
}

/* Pass five: one furnished desk, followed by distinct, continuous materials. */
:root {
  --paper:#fbf4e7;
  --ink:#443c32;
  --muted:#706454;
  --accent:#766049;
  --line:#d5c9b7;
  --mint:#dee6d8;
}
.header { padding-block:23px; }
.header-position { position:absolute; inset:0 0 auto; z-index:100; background:transparent; }
.header-position.is-docked { position:fixed; background:#fffdf9; box-shadow:0 2px 14px #44392e14; }
/* Docked, the lockup steps down to a utility strip: 92px -> 58px. The opening
   header can afford a 46px mark because it floats over the hero with nothing
   under it, but the docked one is an opaque bar sitting ON the page, and 92px
   of it is 92px taken off every section below. The desk film is 769px tall, so
   at 92px the bar and the film together wanted 948px of window - more than a
   laptop has - and the bar cropped the top of the desk at the one scroll
   position where the film was otherwise fully in view.
   The wordmark keeps its 5.12 aspect (width only; see the note on .brand). */
.header-position.is-docked .header { padding-block:11px; }
.header-position.is-docked .brand .brand-mark { width:36px; height:36px; }
.header-position.is-docked .brand .brand-wordmark { width:139px; }
/* The DOCKED height, not the opening one: an anchor always lands with the bar
   docked, so the taller opening lockup would push every target 34px low. */
html { scroll-padding-top:calc(var(--nav-dock-height,58px) + 20px); }
.opening .hero h1 {
  font-size:clamp(2.75rem,4.35vw,4.1rem);
  line-height:1.18;
  letter-spacing:-.04em;
}
.opening .hero h1 em { color:#7b644c; }
.opening .hero-detail {
  max-width:24em;
  margin-top:24px;
  font-size:1.375rem;
  line-height:1.5;
  color:#54483a;
  text-wrap:balance;
}
.opening .hero-actions { margin-top:28px; }
.opening .hero-actions span { font-size:1rem; line-height:1.5; color:#5d5143; }
.surface { display:flow-root; background-image:var(--grain); background-size:128px; }
.surface--stationery { background-color:#eddbbc; background-image:url('/assets/site/maple-wood.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; border-block:1px solid #d3bc98; }
.stationery-section { padding-block:82px 78px; }
.fairy-heading>p { max-width:375px; }
.fairy-spread { gap:64px; }
.surface--family { background-color:#e6edf0; border-top:1px solid #cad6dc; }
/* How it began sits straight after the film (2026-09-24): the headline is its
   story. Light paper, so it stands apart from the hero's tan above and the
   wood below. */
.surface--origin { background-color:#efe1cb; border-block:1px solid #ddc9a8; }
.family { border:0; padding-block:88px; }
.family>img { transform:rotate(1deg); }
.origin { padding-block:76px; }
.origin-inner { border:0; padding-top:0; }
.safety { background-color:#dae3cf; border-block:1px solid #c2ccb5; }
.surface--voices { background-color:#f8f1e4; border-top:1px solid #dccdb4; }
.family-voices { padding-block:76px 84px; }
.family-note { padding:42px; }
.surface--pricing { background-color:#fcf7ee; }
.pricing { padding-block:88px 60px; }
.price-card { background-color:#fffdf6; border-color:#d1c5b1; box-shadow:0 5px 16px #6e53380b; }
.price-explanation { font-size:.875rem; }
.surface--faq { background-color:#edf0e7; border-top:1px solid #d2d8c8; }
.faq { padding-block:70px 82px; }
.surface--closing { background-color:#e0e7d8; border-top:1px solid #c9d1c0; }
.closing { border:0; padding-block:64px 72px; }
.footer { border:0; padding-bottom:88px; }



@media (min-width:761px) and (max-width:1100px) {
  .fairy-spread { gap:35px; }
}
@media (max-width:60rem) {
  .header { padding-block:22px; }
}
@media (max-width:760px) {
  .stationery-section { padding-block:55px; }
  .fairy-spread { gap:30px; }
  .family { padding-block:58px; }
  .origin { padding-block:55px; }
  .family-voices { padding-block:55px 62px; }
  .family-note { padding:32px; }
  .pricing { padding-block:60px 40px; }
  .faq { padding-block:50px 58px; }
  .closing { padding-block:52px 58px; }
}

.surface--letters { background-color:#f6f3e9; }
.real-letters { padding-block:76px 82px; }
.letters-heading { text-align:center; margin-bottom:44px; }
/* One letter, large: the purple mountains (2026-09-24; the blue "leafy"
   page beside it went). */
.letter-examples { max-width:1000px; margin-inline:auto; }
.letter-examples img { width:100%; height:auto; }
@media(max-width:760px) {
  .real-letters { padding-block:55px 60px; }
  .letters-heading { text-align:left; margin-bottom:30px; }
}

@media(max-width:760px) {
  :root { --nav-height:122px; }
}

/* Large displays need the composition to grow with the desk, not just more wall. */
@media(min-width:1600px) {
  .header-position .header { width:min(1800px,calc(100% - 160px)); }
}

/* Mobile disclosure keeps every destination available. */
.menu-toggle { display:none; }
@media(max-width:760px) {
  .header { position:relative; }
  .header nav { flex-wrap:wrap; }
  .header.has-menu { flex-wrap:nowrap; justify-content:space-between; gap:12px; }
  .has-menu .menu-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:8px 14px; border:1px solid var(--line);
    border-radius:9px; background:#fffdf980; color:var(--ink);
    font:500 .875rem 'DM Sans',sans-serif; cursor:pointer;
  }
  .header.has-menu nav {
    display:none; position:absolute; top:calc(100% - 8px); right:0;
    width:min(280px,100%); padding:10px; border:1px solid var(--line);
    border-radius:12px; background:#fffdf9;
    box-shadow:0 12px 30px #44392e20;
  }
  .header.has-menu.is-menu-open nav { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .header.has-menu nav a { display:block; padding:13px 14px; border-radius:6px; }
  .header.has-menu nav a:hover { background:var(--paper); }
}

@media(max-width:760px) {
  .has-menu .menu-toggle { width:44px; padding:10px; border-color:transparent; background:transparent; }
  .menu-icon { position:relative; display:block; width:22px; height:18px; }
  .menu-icon span { position:absolute; left:0; width:22px; height:2px; border-radius:2px; background:currentColor; }
  .menu-icon span:nth-child(1) { top:1px; }
  .menu-icon span:nth-child(2) { top:8px; }
  .menu-icon span:nth-child(3) { top:15px; }
  .is-menu-open .menu-icon span:nth-child(1) { top:8px; transform:rotate(45deg); }
  .is-menu-open .menu-icon span:nth-child(2) { opacity:0; }
  .is-menu-open .menu-icon span:nth-child(3) { top:8px; transform:rotate(-45deg); }
}

/* One plan since 2026-09-26, and it is free: its card stands alone, centred,
   as wide as each card was when there were two. */
.price-card { display:flex; flex-direction:column; }
.price-card h3 { font-size:clamp(2rem,3vw,2.75rem); letter-spacing:-.035em; }
.plan-cost { margin-top:auto; padding-top:20px; }
.price-card .plan-price { margin:0; font:2rem/1.2 Lora,Georgia,serif; }
.price-grid--one { grid-template-columns:minmax(0,480px); justify-content:center; }

/* A paper note using the page’s serif/italic headings and two-column rhythm. */
.membership-promise {
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:36px;
  max-width:1040px; margin:42px auto 0; padding:32px 36px;
  border:1px solid #d1c5b1; border-radius:4px;
  background:var(--grain) repeat,#fff9ed; background-size:128px;
  box-shadow:0 5px 16px #6e53380b;
}
.membership-promise h3 { margin:0; font:400 clamp(1.5rem,2.7vw,2rem)/1.3 Lora,Georgia,serif; letter-spacing:-.035em; text-wrap:balance; }
.promise-copy p { margin:0; font-size:1rem; line-height:1.65; color:var(--muted); }
.membership-promise nav { display:flex; align-items:center; gap:18px; margin-top:10px; font-size:.875rem; }
.membership-promise nav a { display:inline-flex; align-items:center; min-height:44px; font-weight:500; text-underline-offset:4px; }
@media(max-width:760px) {
  .membership-promise { grid-template-columns:1fr; gap:18px; margin-top:32px; padding:24px; }
  .promise-copy p { font-size:.9375rem; }
}

/* Instagram: a few prints from the account, laid out like photographs under the
   copy - a paper mat, a slight turn each, a caption. The prints are hand-kept in
   index.html (the comment there says how); the row centres one print or three,
   and on a phone it becomes a strip that scrolls sideways. It sits before the
   closing so the download is still the page's last word. */
.surface--instagram { background-color:#fbf1de; border-top:1px solid #d9cbb1; }
.instagram { padding-block:76px 84px; }
.instagram-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:45px; margin-bottom:44px; }
.instagram-heading h2 { font-size:clamp(2.2rem,3.7vw,3.25rem); }
.instagram-blurb { max-width:400px; margin-bottom:6px; }
.instagram-blurb p { margin:0 0 6px; font-size:1rem; line-height:1.7; color:var(--muted); }
.instagram-prints { display:flex; justify-content:center; align-items:flex-start; gap:40px; padding:14px 0 10px; }
.instagram-print { display:block; flex:0 0 auto; width:300px; padding:10px 10px 12px; background:#fffdf8; border-radius:3px; box-shadow:0 12px 26px -12px #6e533852; text-decoration:none; transform:rotate(-2deg); transition:transform .25s ease,box-shadow .25s ease; }
.instagram-print:nth-child(even) { transform:rotate(2deg); }
.instagram-print:hover,.instagram-print:focus-visible { transform:translateY(-4px) rotate(0); box-shadow:0 18px 32px -12px #6e533866; }
.instagram-print img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; }
.instagram-caption { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:11px; font-size:.8125rem; line-height:1.4; color:var(--muted); }
.instagram-caption svg { width:10px; height:10px; flex-shrink:0; fill:currentColor; }
@media (prefers-reduced-motion:reduce) { .instagram-print { transition:none; } }
@media(max-width:1100px) {
  .instagram-prints { gap:28px; }
  /* Three 260px prints and their gaps are 836px, wider than an iPad's column
     in portrait: the row scrolled the whole page sideways. They shrink to fit. */
  .instagram-print { width:min(260px,calc((100% - 56px) / 3)); }
}
@media(max-width:760px) {
  .instagram { padding-block:55px 60px; }
  .instagram-heading { display:block; margin-bottom:28px; }
  .instagram-blurb { margin-top:18px; }
  /* Bleeds to the screen's edges (the wrap's 20px phone gutters, undone) so the strip
     reads as scrollable; auto margins on the ends centre a row that fits and
     still let a longer one scroll all the way, which justify-content cannot. */
  .instagram-prints { justify-content:flex-start; gap:22px; margin-inline:-20px; padding:14px 20px 18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .instagram-prints::-webkit-scrollbar { display:none; }
  .instagram-print { width:236px; scroll-snap-align:center; }
  .instagram-print:first-child { margin-left:auto; }
  .instagram-print:last-child { margin-right:auto; }
}

/* Instagram's own glyph, as its Brand Resource Center draws it: 30px in the
   footer and 32px by the follow link (the minimum is 29), at least half its
   size clear on every side, one solid colour - the page's ink - and never
   reshaped or rotated. Icon only in the footer; the aria-label has the words. */
.footer nav a { display:inline-flex; align-items:center; }
.footer-instagram { padding:8px; margin-inline:2px; border-radius:8px; }
.footer-instagram svg { display:block; width:30px; height:30px; }
.footer-instagram:hover { opacity:.72; }
.instagram-follow { display:inline-flex; align-items:center; gap:14px; margin-top:12px; font-size:.9375rem; font-weight:500; text-decoration:none; }
.instagram-follow svg { flex-shrink:0; width:32px; height:32px; }
.instagram-follow span:nth-child(2) { border-bottom:1px solid #b6a18b; padding-bottom:5px; }
.instagram-follow:hover span:nth-child(2) { border-color:var(--ink); }
.instagram-follow span:last-child { font-size:1.125rem; }

/* Pass six (2026-09-22): the film opens the page.
   The hero was an AI still life of the desk's objects, and the real desk - the
   film of a letter being made on it - waited two sections further down behind
   a play button. Between 17 and 22 September, 13 of about 500 visitors pressed
   it. Now the film IS the hero, playing muted on arrival (never for reduced
   motion or data saver, never off screen), with a pause and a sound button
   and nothing else. The loop is the site film without its brand card and end
   card: the headline beside it says both. */
.opening {
  padding-top:var(--nav-height,92px);
  background:
    radial-gradient(ellipse 58% 70% at 71% 42%,#fffaf1 0%,#fffaf100 70%),
    var(--grain) repeat,
    linear-gradient(#f7e9d3,#f2e1c7);
  background-size:auto,128px,auto;
  border-bottom:1px solid #e0cdb0;
}
.opening .hero {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;
  gap:clamp(36px,4.4vw,72px);
  width:min(1320px,calc(100% - 80px));
  padding:clamp(4px,1.5vh,24px) 0 clamp(40px,6vh,72px);
}
/* Seen whole in the first screen: the film takes the height left under the
   opening header, less some air, turned back into a 4:3 width plus the 18px
   of bezel. The 460px floor stops a short, wide window shrinking it to a stamp. */
.film {
  margin:0 auto;
  width:min(100%,max(460px,calc((100svh - var(--nav-height,92px) - 96px) * 4 / 3 + 18px)));
}
.film-screen {
  position:relative;
  overflow:hidden;
  border:9px solid #253532;
  border-radius:22px;
  background:#253532;
  box-shadow:0 34px 56px -30px #3c2a1888,0 12px 24px -16px #3c2a1844;
}
.film-screen>video { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#ead7b8; }
.film-controls { position:absolute; right:12px; bottom:12px; z-index:2; display:flex; gap:8px; }
.film-controls[hidden],.film-start[hidden] { display:none; }
.film-controls button,.film-start {
  display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:#3a322a; background:#fffaf2e8; box-shadow:0 2px 10px #2b1d0f33;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.film-controls button { width:42px; height:42px; }
.film-controls button:hover,.film-start:hover { background:#fff; }
.film-controls svg { width:16px; height:16px; fill:currentColor; }
.film .icon-play,.film .icon-sound,.film.is-paused .icon-pause,.film.has-sound .icon-muted { display:none; }
.film.is-paused .icon-play,.film.has-sound .icon-sound { display:block; }
.film-start { position:absolute; left:50%; top:50%; z-index:2; width:78px; height:78px; transform:translate(-50%,-50%); }
.film-start svg { width:28px; height:28px; margin-left:4px; fill:currentColor; }
/* While the big button offers the film, the small pair would only repeat it. */
.film-start:not([hidden]) ~ .film-controls { display:none; }
@media(min-width:1600px) {
  .opening .hero { width:min(1560px,calc(100% - 160px)); }
  .opening .hero h1 { font-size:clamp(4.1rem,3.9vw,5.25rem); }
  .opening .hero-detail { font-size:clamp(1.375rem,1.3vw,1.6875rem); }
  .opening .hero-actions .store img { width:clamp(150px,9vw,190px); height:auto; }
  .opening .hero-actions span { font-size:clamp(1rem,.95vw,1.1875rem); }
}
@media(max-width:1100px) {
  .opening .hero { width:calc(100% - 64px); }
  .opening .hero h1 { font-size:clamp(2.6rem,4.6vw,3.3rem); }
  .opening .hero-detail { font-size:1.25rem; line-height:1.5; margin-top:20px; }
  .opening .hero-actions { gap:15px; margin-top:22px; }
}
/* Tablet: one column, the words first. */
@media(max-width:1023px) {
  .opening .hero { grid-template-columns:minmax(0,1fr); width:min(760px,calc(100% - 64px)); gap:34px; padding-top:18px; }
  .opening .hero h1 { font-size:clamp(2.75rem,6.4vw,3.5rem); }
  .opening .hero-detail { max-width:30em; }
  .film { width:100%; }
}
/* Phone: the film straight under the headline and the download under the
   film, so the first screen of an in-app browser holds all three; the
   sentence follows. The words' wrapper steps aside (display:contents) so the
   film can sit between the headline and the button. */
@media(max-width:760px) {
  .opening .hero { display:flex; flex-direction:column; align-items:stretch; width:calc(100% - 40px); gap:0; padding:4px 0 44px; }
  .opening .hero-copy { display:contents; }
  .opening .hero h1 { order:1; font-size:clamp(2.5rem,10.6vw,3.25rem); }
  .film { order:2; margin-top:20px; }
  .opening .hero-actions { order:3; margin-top:20px; }
  .opening .hero-detail { order:4; margin-top:18px; font-size:1.1875rem; }
  .opening .hero-actions span { font-size:.9375rem; }
  .film-screen { border-width:5px; border-radius:14px; }
  .film-controls { right:7px; bottom:7px; gap:6px; }
  .film-controls button { width:34px; height:34px; }
  .film-controls svg { width:13px; height:13px; }
  .film-start { width:64px; height:64px; }
}

/* The iPhone (2026-09-24): in front of the film's lower-RIGHT corner, a little
   larger than the film's third, so the picture says "for iPhone and iPad"
   before the words do - and the film's two buttons move to the lower-left to
   make room. A still, so the film stays the only thing moving. It must NOT
   show the desk again (Patrick: the film already does, and the desk is
   cramped on a phone): it shows a letter being made, Patrick's own capture
   (iphone-letter-900.webp, turned a quarter to read upright). It hangs off
   the film only as far as the page margin allows at each width, so it never
   widens the page. */
.film { position:relative; }
.film-phone {
  position:absolute; right:-4%; bottom:-6%; z-index:3; width:44%;
  padding:5px; border-radius:26px; background:#253532;
  box-shadow:0 28px 44px -24px #3c2a18a3,0 10px 20px -12px #3c2a1866;
}
.film-phone img { display:block; width:100%; height:auto; border-radius:21px; }
.film-controls { right:auto; left:12px; }
@media(max-width:1023px) {
  .film-phone { right:-3%; }
}
@media(max-width:760px) {
  .film-phone { right:-2%; bottom:-12%; width:46%; padding:3px; border-radius:15px; }
  .film-phone img { border-radius:12px; }
  .film-controls { right:auto; left:7px; }
  .opening .hero-actions { margin-top:44px; }
}

/* Creativity, calm and safety (2026-09-24). After the film the page makes
   three promises, each in the site's own words. Creativity: their very own
   place, the collections, a little wonder on every page, and what kids make
   when there's room. Calm: connected, not always on. Safety: their
   independence, your boundaries. "Quiet" stays in the blog essay; on this page
   it read as a mood rather than a reason. The tiny all-caps labels went too: a
   heading that says what its section is needs nothing above it. */

/* Their very own place: the two best desks, large, rather than six small, and
   nothing else - no caption, no mat, no device. Each is the desk exactly as the
   app draws it, with a soft edge and a shadow. Tried and refused on 2026-09-24:
   a photo print on a paper mat ("they need to look like desk assets"), an iPad
   frame (too strong) and the desk's own nameplate as the caption (it pulls the
   eye off the desk). */
.surface--desks { background-color:#dbe5d7; border-block:1px solid #c8d0bf; }
.desk-gallery { padding-block:84px 80px; }
.desk-gallery-heading { text-align:center; margin-bottom:52px; }
.desk-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.6vw,52px); margin:0; padding:0; list-style:none; }
.desk-pair img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:0 26px 44px -26px #39462c8c,0 3px 8px #39462c1a; }
.desk-more { margin:46px 0 0; text-align:center; }
.desk-more .text-link { margin-top:0; gap:12px; }
@media(max-width:760px) {
  .desk-gallery { padding-block:56px; }
  .desk-gallery-heading { text-align:left; margin-bottom:30px; }
  .desk-pair { grid-template-columns:1fr; gap:24px; }
  .desk-pair img { border-radius:10px; }
  .desk-more { margin-top:32px; text-align:left; }
}

/* The collections: every one of them, in a rail that scrolls sideways
   (2026-09-24) - a showcase, not a price list; pricing keeps one line about
   what they cost. The rail runs to the window's edges but starts on the page's
   margin (--gutter is the .wrap margin at each width) and fades out at both
   edges. A finger or a trackpad scrolls it; assets/site.js adds two arrows for
   a mouse, which has no sideways wheel. */
.surface--collections { background-color:#fcf7ee; }
.collections { --gutter:max(48px,calc((100% - 1200px) / 2)); padding-block:80px 72px; }
.collections-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:38px; }
.collections-aside { display:flex; align-items:flex-end; padding-bottom:8px; }
.rail-arrows { display:flex; gap:10px; flex-shrink:0; }
.rail-arrows[hidden] { display:none; }
.rail-arrow { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid #cbbda7; border-radius:50%; background:#fffdf9; color:var(--ink); font-size:1.125rem; line-height:1; cursor:pointer; transition:border-color .2s ease,opacity .2s ease; }
.rail-arrow:hover:not(:disabled) { border-color:var(--ink); background:#fff; }
.rail-arrow:disabled { opacity:.35; cursor:default; }
.collection-rail {
  --fade:min(96px,var(--gutter));
  display:flex; gap:clamp(20px,2.6vw,38px); margin-top:38px; padding:22px var(--gutter) 12px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-padding-inline:var(--gutter); scroll-snap-type:x proximity; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
}
.collection-rail::-webkit-scrollbar { display:none; }
.collection-rail:focus-visible { outline:3px solid #937247; outline-offset:-3px; }
.collection-rail img { -webkit-user-drag:none; user-select:none; }
@media(hover:hover) and (pointer:fine) { .collection-rail { cursor:grab; } }
.collection-rail.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.collection-rail figure { flex:0 0 auto; width:clamp(172px,15.5vw,216px); margin:0; text-align:center; scroll-snap-align:start; }
.collection-rail img { width:100%; height:196px; object-fit:contain; filter:drop-shadow(0 9px 8px #67573924); }
.collection-rail figcaption { margin-top:18px; font:400 1.1875rem/1.3 Lora,Georgia,serif; letter-spacing:-.015em; }
@media(max-width:1100px) {
  .collections { --gutter:32px; }
  .collection-rail img { height:170px; }
}
@media(max-width:760px) {
  .collections { --gutter:20px; padding-block:56px 50px; }
  .collections-heading { display:block; }
  .rail-arrows { display:none; }
  .collection-rail { gap:18px; margin-top:24px; padding-top:16px; scroll-snap-type:x mandatory; }
  .collection-rail figure { width:clamp(124px,36vw,164px); }
  .collection-rail img { height:132px; }
  .collection-rail figcaption { margin-top:12px; font-size:1.0625rem; }
}

/* Calm: connected, not always on - with the old "the letter arrives" layout
   and its paddleboard letter. */
.surface--calm { background-color:#e1e9ed; border-top:1px solid #cbd7dd; }
.calm { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; padding-block:88px; }
.calm h2 { font-size:clamp(2.1rem,3.8vw,3.3rem); margin-bottom:28px; }
.calm-art { padding:20px 10px 25px; }
.calm-art img { transform:rotate(-3deg); filter:drop-shadow(0 14px 14px #74593826); }
.calm-copy p { max-width:26em; }
.calm-copy p:first-of-type { font:400 clamp(1.25rem,1.8vw,1.5rem)/1.45 Lora,Georgia,serif; letter-spacing:-.02em; }
@media(max-width:760px) {
  .calm { grid-template-columns:1fr; gap:28px; padding-block:60px; }
  .calm-art { width:94%; margin:auto; padding-top:20px; }
  .calm h2 { font-size:2.25rem; }
}

/* Safety: four facts and no paragraphs; the safety page has the rest. */
.safety-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin:42px 0 0; padding:0; list-style:none; }
.safety-list li { border-top:1px solid #bdc4b4; padding-top:22px; font:400 clamp(1.2rem,1.6vw,1.4rem)/1.35 Lora,Georgia,serif; letter-spacing:-.02em; text-wrap:balance; }
.safety .safety-bottom { justify-content:flex-start; border-top:0; padding-top:0; margin-top:34px; }
@media(max-width:1100px) {
  .safety-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 32px; }
}
@media(max-width:760px) {
  .safety-list { grid-template-columns:1fr; gap:0; margin-top:28px; }
  .safety-list li { padding:16px 0; }
  .safety-list li:last-child { border-bottom:1px solid #bdc4b4; }
}

/* Pricing: one line for the collections under the free card, and the note on
   prices under that. (The subgrid that lined up two cards' prices went with
   the second card, 2026-09-26.) */
.collections-line { max-width:960px; margin:30px auto 0; text-align:center; font:400 clamp(1.15rem,1.6vw,1.35rem)/1.4 Lora,Georgia,serif; letter-spacing:-.02em; }
.price-note { max-width:960px; margin:10px auto 0; text-align:center; font-size:.75rem; line-height:1.5; color:var(--muted); }
/* The download under the card (2026-09-27): readers who reached "Postmello
   is free." had no button until the closing, and most stopped before it. */
.pricing-download { margin-top:28px; text-align:center; }
@media(max-width:760px) {
  .collections-line, .price-note, .pricing-download { text-align:left; }
}

/* The labels that stay (Pricing, the FAQ, Instagram) are there to be read:
   sentence case at body size, not tiny tracked capitals. */
.eyebrow { font-size:.9375rem; letter-spacing:.01em; text-transform:none; color:var(--accent); margin-bottom:16px; }

/* How it began, beside a snapshot of the first desk in use: a print on a paper
   mat, turned a little, like the letters elsewhere on the page. The photo keeps
   every rule for pictures of children here - framed below the chin, never a
   blurred face, and the written names blurred. */
.origin-inner { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:center; gap:64px; }
.origin-photo { margin:0; padding:10px 10px 12px; background:#fffdf8; border-radius:3px; box-shadow:0 18px 34px -18px #5a3f2085; transform:rotate(1.5deg); }
.origin-photo img { width:100%; height:auto; border-radius:2px; }
@media(max-width:760px) {
  .origin-inner { grid-template-columns:1fr; gap:34px; }
  .origin-photo { width:min(100%,340px); margin-inline:auto; }
}