/* Stage 1 homepage: a smaller, warmer front door for Dad Said… */

.stage1-main{max-width:none;margin:0;padding:0 0 34px}
.stage1-main>section{margin-top:0}
.stage1-main .wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.brand-dots{color:var(--accent)}

/* Small, uncluttered header */
.nav nav{flex-wrap:nowrap}
.nav nav a{font-size:14px}
.tools{gap:7px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:7px 13px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.chip:hover,.iconbtn:hover{border-color:var(--ink)}
.chip kbd{font:11px var(--mono);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:16px;display:grid;place-items:center;padding:0}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:70}

/* Welcome */
.welcome{display:grid;grid-template-columns:1.03fr .97fr;gap:clamp(24px,5vw,68px);align-items:center;padding-top:46px;padding-bottom:44px}
.welcome-copy{padding:12px 0 14px}
.welcome-copy h1{font-size:clamp(48px,6.3vw,82px);line-height:.91;letter-spacing:-.035em;margin:20px 0 18px;max-width:8.5em}
.welcome-copy h1 em{font-style:italic;color:var(--accent)}
.welcome-copy p{color:var(--muted);font-size:clamp(17px,1.7vw,20px);max-width:28em;margin:0 0 22px}
.welcome-link{display:inline-flex;align-items:center;gap:12px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding:0 0 5px}
.welcome-link span{font-size:21px;transition:transform .2s}
.welcome-link:hover span{transform:translateY(4px)}
.welcome-photo{margin:0;position:relative;isolation:isolate;transform:rotate(1.2deg)}
.welcome-photo:before{content:"";position:absolute;inset:13px -12px -12px 13px;border:2px solid var(--accent);border-radius:26px;z-index:-1;transform:rotate(-2deg)}
.welcome-photo img{display:block;width:100%;aspect-ratio:1.72;object-fit:cover;object-position:65% 50%;border-radius:24px;box-shadow:0 18px 44px #33271922}
.welcome-photo figcaption{position:absolute;left:16px;bottom:15px;background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 14px;font:16px/1.15 var(--serif);box-shadow:0 5px 18px #0002;transform:rotate(-1deg)}
.welcome-photo figcaption span{color:var(--accent)}
.photo-stamp{position:absolute;right:-13px;top:-15px;background:var(--sun);color:#16130e;border:1px solid #16130e;border-radius:50%;width:82px;height:82px;display:grid;place-items:center;text-align:center;font:italic 17px/1 var(--serif);transform:rotate(9deg);box-shadow:0 4px 0 #b88a00}

/* Section heading and daily pair */
.today{padding-top:34px;padding-bottom:22px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}
.section-heading h2{font-size:clamp(38px,5vw,61px);letter-spacing:-.025em;margin:11px 0 0}
.section-heading h2 em{font-style:italic;color:var(--accent)}
.today-date{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-bottom:7px}
.daily-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.daycard{min-width:0;min-height:350px;padding:clamp(22px,3vw,34px);border-radius:28px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.jokecard{background:var(--surface);border:1px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.quotecard{background:#234a3b;color:#fff9ec;border:1px solid #234a3b;box-shadow:7px 7px 0 var(--accent)}
html[data-theme=night] .jokecard{box-shadow:7px 7px 0 var(--accent)}
html[data-theme=night] .quotecard{background:#dce8d8;color:#1c3027;border-color:#dce8d8}
.daycard:after{content:"";position:absolute;width:180px;height:180px;border:1px solid currentColor;border-radius:50%;opacity:.08;right:-80px;top:-92px;pointer-events:none}
.daycard-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.daylabel{font:11px var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:7px 11px;border-radius:99px;background:var(--sun);color:#16130e;white-space:nowrap}
.quotecard .daylabel{background:#f4eddf;color:#234a3b}
html[data-theme=night] .quotecard .daylabel{background:#234a3b;color:#fff9ec}
.little-note{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.62;text-align:right}
.daycard blockquote{font:clamp(34px,3.8vw,52px)/1.02 var(--serif);letter-spacing:-.02em;margin:32px 0 10px;max-width:15em}
.jokecard .punchline{font:italic clamp(32px,3.4vw,45px)/1.05 var(--serif);color:var(--accent);margin:3px 0 12px}
.punchline[hidden]{display:none}
.jokecard.revealed .punchline{animation:stage-pop .35s cubic-bezier(.2,1.5,.4,1)}
.jokecard.drum #daily-quote{opacity:.55}
.dots{display:none;font:44px/1 var(--serif);letter-spacing:.12em}
.jokecard.drum .dots{display:block}
.dots span{animation:stage-blink .65s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes stage-blink{50%{opacity:.18}}
@keyframes stage-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.card-bottom{margin-top:auto;padding-top:25px}
.cat,.dq-origin{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7;display:block;min-height:1em}
.actions{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:13px}
.primary-btn,.quote-btn{font-size:14px;padding:11px 17px;box-shadow:none}
.primary-btn{background:var(--accent);color:#16130e}
.quote-btn{background:var(--sun);color:#16130e}
.text-btn{border:0;background:transparent;padding:7px 0;color:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px}
.text-btn:hover{text-decoration-color:currentColor}
.next-btn{margin-left:auto;white-space:nowrap}
.quote-meaning{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s,margin .3s;font-size:16px;line-height:1.45;margin:0;max-width:37em}
.quote-meaning.open{max-height:170px;opacity:.88;margin:0 0 8px}
.quote-meaning b{display:block;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#ffcf67;margin-bottom:7px}
html[data-theme=night] .quote-meaning b{color:#8a4c27}
.daily-footnote{margin:17px 4px 0;text-align:center;color:var(--muted);font-size:13px}

/* The three destinations */
.explore{padding-top:60px;padding-bottom:30px}
.explore-heading{margin-bottom:20px}
.explore-heading>p{max-width:230px;color:var(--muted);font-size:15px;margin:0 0 5px;text-align:right}
.explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.explore-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:23px;min-height:290px;display:flex;flex-direction:column;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s}
.explore-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 12px 28px #33271912}
.explore-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:var(--bg2);font-size:27px;margin-bottom:17px;transform:rotate(-4deg)}
.explore-kicker{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.explore-card h3{font-size:clamp(29px,3vw,38px);margin:6px 0 8px}
.explore-card>p{margin:0 0 13px;color:var(--muted);font-size:15px;line-height:1.5;max-width:29em}
.jokes-card{background:#fff8e9}
.quotes-card{background:#e6eee2}
.stories-card{background:#f5e7df}
html[data-theme=night] .jokes-card{background:#29231b}
html[data-theme=night] .quotes-card{background:#1e2d25}
html[data-theme=night] .stories-card{background:#30231f}
.category-links{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 15px}
.category-links a{font-size:11px;text-decoration:none;padding:5px 9px;border:1px solid #cdbd9f;border-radius:99px;color:#4c4234;background:#fffdf7}
.category-links a:hover{background:#16130e;color:#fffaf0;border-color:#16130e}
.quote-sample,.story-sample{font:italic 20px/1.1 var(--serif);color:var(--ink);margin:4px 0 18px}
.story-sample{font-style:normal;color:#765044}
.card-link{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:13px;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent);font-weight:700;text-decoration:none;font-size:14px}
.card-link span{font-size:20px;transition:transform .2s}
.card-link:hover span{transform:translateX(4px)}

/* Compact contribution panel */
.share-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,66px);align-items:center;padding-top:62px;padding-bottom:45px}
.share-intro h2{font-size:clamp(40px,5vw,60px);margin:12px 0}
.share-intro h2 em{font-style:italic;color:var(--accent)}
.share-intro>p{color:var(--muted);font-size:16px;max-width:29em}
.share-intro .share-promise{font-size:13px;border-left:3px solid var(--accent);padding-left:12px;margin-top:18px}
.submission-card{background:var(--surface);border:1px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.submission-tabs{display:flex;gap:6px;padding:13px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.submission-tabs button{border:1px solid transparent;background:transparent;color:var(--muted);padding:8px 12px;border-radius:99px;font-size:13px;font-weight:700;cursor:pointer}
.submission-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#memory-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.field textarea,.field input,.field select{width:100%;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--ink);padding:11px 13px;font-size:15px;min-width:0}
.field textarea{min-height:104px;resize:vertical}
.field textarea:focus,.field input:focus,.field select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.publish-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:12px;line-height:1.45}
.publish-consent input{margin-top:3px;accent-color:var(--accent);flex:none}
.send-row{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.send-row .btn{padding:11px 17px}
.help-t{font-size:12px;color:var(--muted)}
.notice{display:none;grid-column:1/-1;background:var(--bg2);border-radius:12px;padding:11px 13px;font-size:14px}
.notice[style*="display: block"]{display:block}

.small-signoff{text-align:center;padding:18px 0 12px}
.small-signoff p{font:italic clamp(24px,3vw,34px)/1.15 var(--serif);margin:0;color:var(--muted)}
.small-signoff span{display:block;font:italic 22px var(--serif);color:var(--accent);margin-top:4px}

/* Search */
dialog.finder-d{border:1px solid var(--ink);border-radius:24px;padding:0;width:min(680px,calc(100vw - 28px));max-height:82vh;background:var(--surface);color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
dialog.finder-d::backdrop{background:#12100dcc;backdrop-filter:blur(4px)}
.fd-in{display:flex;flex-direction:column;max-height:82vh}
.fd-search{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.fd-search>span{font-size:23px}
.fd-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:18px;outline:none}
.fd-res{overflow:auto;padding:12px 16px 18px;display:flex;flex-direction:column;gap:9px}
.res{background:var(--bg);border:1px solid var(--line);border-radius:15px;padding:13px 14px}
.res .k{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.res p{font:23px/1.12 var(--serif);margin:6px 0 0}
.res .a{color:var(--accent);font-style:italic}
.res .meaning{font:13px/1.45 var(--sans);color:var(--muted)}
.res button{margin:10px 8px 0 0}
.res .copy{padding:6px 11px}
.fd-empty{color:var(--muted);padding:14px 4px;font-size:14px}
.toast{z-index:100}

@media(max-width:900px){
  .welcome{grid-template-columns:1fr 1fr;gap:26px;padding-top:34px}
  .welcome-copy h1{font-size:clamp(44px,6vw,64px)}
  .daycard{min-height:330px}
  .explore-grid{grid-template-columns:1fr 1fr}
  .stories-card{grid-column:1/-1;min-height:230px}
  .share-section{grid-template-columns:1fr;gap:18px}
  .share-intro{max-width:660px}
}
@media(max-width:700px){
  header{top:6px;padding:0 7px}
  .nav{border-radius:22px;display:grid;grid-template-columns:1fr auto;gap:6px;padding:7px 9px 6px 11px}
  .nav nav{grid-column:1/-1;grid-row:2;order:0;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;width:100%;padding:2px 0 3px;scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{font-size:13px;padding:6px 10px}
  .brand strong{font-size:24px}
  .welcome{grid-template-columns:1fr;padding-top:29px;padding-bottom:22px;gap:28px}
  .welcome-copy h1{font-size:clamp(48px,11vw,70px);max-width:8em}
  .welcome-photo{width:calc(100% - 12px);margin:0 12px 10px 0}
  .welcome-photo img{aspect-ratio:1.8}
  .today{padding-top:28px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:6px}
  .today-date{padding:0}
  .section-heading h2{font-size:clamp(38px,9vw,52px)}
  .daily-pair{grid-template-columns:1fr;gap:14px}
  .daycard{min-height:300px;border-radius:23px;padding:22px}
  .daycard blockquote{font-size:clamp(34px,8vw,46px);margin-top:27px}
  .actions{gap:8px 12px}
  .next-btn{margin-left:0}
  .explore{padding-top:44px}
  .explore-heading>p{text-align:left;max-width:none}
  .explore-grid{grid-template-columns:1fr}
  .explore-card,.stories-card{grid-column:auto;min-height:245px}
  .share-section{padding-top:46px}
  #memory-form{grid-template-columns:1fr;padding:15px}
  .field.full,.publish-consent,.send-row,.notice{grid-column:1}
  .submission-tabs{flex-wrap:wrap}
  .stage1-main .wrap{width:calc(100% - 32px)}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.anchor-alias{display:block;position:relative;top:-92px;visibility:hidden;height:0}

.field[hidden]{display:none}
