/* Out of Office signup page, in the homepage's "studio grid" look (2026-10-29; replaces design A
   of 2026-10-22). White and stone sections take turns, one font (Inter), headings with a black
   first line and a cherry second line, white cards that float on a soft shadow, photos in plain
   rounded rectangles (no arches). Written mobile first; 760px and 980px bring in the columns. */

:root{
  --ink:#1C1715; --muted:#6B625D; --cherry:#7A1E2C; --cherry-deep:#4E111C; --butter:#F3E28A;
  --stone:#F6F2EC; --line:rgba(28,23,21,.12); --foot:#2A0A10;
  --gutter:max(24px,calc((100vw - 1180px) / 2));
  --lift:inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(28,23,21,.04),0 2px 4px rgba(28,23,21,.04),0 8px 18px rgba(28,23,21,.06),0 26px 48px -18px rgba(28,23,21,.18);
  --lift-hover:inset 0 1px 0 rgba(255,255,255,.9),0 2px 2px rgba(28,23,21,.04),0 6px 10px rgba(28,23,21,.05),0 16px 30px rgba(28,23,21,.08),0 40px 70px -24px rgba(28,23,21,.24);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.65 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--cherry)}
img{display:block;max-width:100%}
p{text-wrap:pretty}

/* Header: a plain white bar with a hairline, the same as the homepage */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gutter);background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--ink)}
.logo span{font-weight:800;letter-spacing:.16em;font-size:15px}
.logo i{font-family:'Fraunces',Georgia,serif;font-size:21px;color:var(--cherry)}
.top-r{display:flex;align-items:center;gap:18px}
.top-note{display:none;font-size:15px;font-weight:500;color:var(--muted)}
.top-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--cherry);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s}
.top-btn:hover{background:var(--cherry-deep)}
.top-btn:focus-visible,.foot a:focus-visible,.fine a:focus-visible,.logo:focus-visible{outline:3px solid var(--cherry);outline-offset:3px}
.foot a:focus-visible{outline-color:var(--butter)}

/* Shared type */
.tag{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:20px}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cherry);flex:none}
.h1{margin:0;font-weight:600;font-size:32px;line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.h1 span,.h2 span{display:block;color:var(--cherry)}
.h2{margin:0;font-weight:600;font-size:28px;line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.lead{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:31rem}

/* The white form card and its fields (the same as the homepage's) */
.card{background:#fff;border-radius:20px;padding:20px;box-shadow:var(--lift)}
.signup{display:flex;flex-wrap:wrap;gap:14px 12px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink);min-width:0}
.fld.half{flex:1 1 120px}
.fld.full{flex:1 1 100%}
.fld input{height:50px;width:100%;border:1px solid rgba(28,23,21,.18);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:400;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.fld input::placeholder{color:var(--muted)}
.fld input:focus{outline:none;border-color:var(--cherry);box-shadow:0 0 0 3px rgba(122,30,44,.16)}
.fld input[aria-invalid="true"]{border-color:#B3261E}
.btn{flex:1 1 100%;height:52px;border:0;border-radius:999px;background:var(--cherry);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 2px rgba(78,17,28,.2),0 10px 22px -10px rgba(78,17,28,.55);transition:background .2s,translate .2s var(--ease)}
.btn:hover{background:var(--cherry-deep)}
.btn:active{translate:0 1px}
.btn:focus-visible{outline:3px solid rgba(122,30,44,.35);outline-offset:3px}
button[disabled]{opacity:.7;cursor:progress}
.fine{flex:1 1 100%;margin:0;font-size:13px;color:var(--muted)}
.fine a{color:var(--cherry);text-underline-offset:2px}
.err{flex:1 1 100%;margin:0;font-size:14px;line-height:1.4;color:#B3261E;font-weight:600}
.err:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.done{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.done:focus{outline:none}

/* Hero: words and the form on the left, the café photo on the right */
.hero{display:grid;grid-template-columns:1fr}
.hero-copy{padding:36px var(--gutter) 40px;min-width:0}
.hero .card{margin-top:28px;max-width:560px}
.hero-art{display:none}
.photo{width:100%;height:100%;object-fit:cover;border-radius:24px}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding:0 var(--gutter)}
.facts div{padding:18px 0 20px}
.facts div:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
.facts div:nth-child(n+3){border-top:1px solid var(--line)}
.facts b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.facts span{display:block;font-size:14px;line-height:1.45;color:var(--muted)}

/* What lands in your inbox: four numbered cards on stone */
.inbox{background:var(--stone);padding:72px var(--gutter)}
.inbox-row{display:grid;gap:32px}
.inbox-intro p{margin:16px 0 0;color:var(--muted);max-width:26rem}
.topics{display:grid;gap:16px}
.topic{background:#fff;border-radius:22px;padding:24px 26px 26px;box-shadow:var(--lift);transition:box-shadow .35s var(--ease),translate .35s var(--ease)}
.topic:hover{box-shadow:var(--lift-hover);translate:0 -4px}
.num{display:block;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--cherry);margin-bottom:10px}
.topic h3{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.topic p{margin:0;color:var(--muted)}

/* About: the laptop photo with a caption, the quote beside it */
.about{background:#fff;padding:72px var(--gutter)}
.about-row{display:grid;gap:36px;align-items:center}
.host{margin:0;max-width:400px}
.host picture{display:block;overflow:hidden;aspect-ratio:380/460;box-shadow:var(--lift);border-radius:24px}
.host .photo{object-position:center top} /* crops the round plate at the bottom edge, which read as a glitch */
.host figcaption{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}
.host figcaption b{color:var(--ink);font-size:16px;font-weight:600}
.about-copy{max-width:560px}
.quote{margin:0 0 22px;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.025em}
.quote span{color:var(--cherry)}
.about-copy p:not(.quote){margin:0;color:var(--muted)}
mark{background:linear-gradient(transparent 12%,var(--butter) 12%,var(--butter) 88%,transparent 88%);color:var(--ink);font-weight:600;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Closing: the second form, centred on stone */
.closing{background:var(--stone);padding:72px var(--gutter) 88px;text-align:center}
.closing .card{max-width:560px;margin:32px auto 0;text-align:left}

/* Footer: dark cherry, the same as the homepage */
.foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:32px var(--gutter);background:var(--foot);color:rgba(255,246,230,.75);font-size:16px}
.foot .logo{color:#FFF6E6}
.foot .logo i{color:var(--butter)}
.foot a:not(.logo){color:rgba(255,246,230,.85)}

@media (prefers-reduced-motion:reduce){.topic:hover{translate:none}}

/* Tablet and up */
@media (min-width:760px){
  .top{padding:14px var(--gutter)}
  .top-note{display:inline}
  .top-btn{min-height:44px;padding:0 22px;font-size:15px}
  .h1{font-size:clamp(34px,3.4vw,46px)}
  .h2{font-size:clamp(30px,2.7vw,38px)}
  .hero-copy{padding:56px var(--gutter) 56px}
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts div{padding:22px 0 26px}
  .facts div+div{padding-left:24px;border-left:1px solid var(--line)}
  .facts div:nth-child(n+3){border-top:0}
  .inbox,.about{padding:104px var(--gutter)}
  .topics{grid-template-columns:1fr 1fr;gap:20px}
  .quote{font-size:clamp(24px,2.4vw,30px);line-height:1.22}
  .closing{padding:104px var(--gutter) 120px}
  .closing .card{padding:28px}
}

/* Laptop: the café photo comes back beside the form (dropped below 980px, Christina 2026-10-22) */
@media (min-width:980px){
  .hero{grid-template-columns:1.05fr .95fr;column-gap:24px}
  .hero-copy{padding:64px 24px 64px var(--gutter);align-self:center}
  .hero-art{display:block;padding:32px var(--gutter) 32px 0}
  .hero-art picture{display:block;overflow:hidden;height:clamp(560px,46vw,680px);border-radius:24px;box-shadow:var(--lift)}
  .hero-art .photo{object-position:30% 28%}
  .facts{grid-column:1/-1}
  .inbox-row{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:start}
  .inbox-intro{position:sticky;top:110px}
  .about-row{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:64px}
}