/* Tyave | Editorial home and guided discovery. Calm motion follows meaningful state changes. */
:root {
  --work-paper:#f8f3e9;
  --work-cream:#fffaf0;
  --work-sand:#eadcc7;
  --work-olive:#dce3cf;
  --work-moss:#3f523b;
  --work-rule:#cec0aa;
  --work-wash:#f1e8d8;
  --work-gap:clamp(1.6rem,5vw,5rem);
}

.home-page,.research-page,.journey-page { background:var(--work-paper); }
.home-nav { min-height:76px; }
.home-nav .brand { font-size:2.7rem; }
.home-nav .nav-start { display:inline-flex;align-items:center;gap:.6rem;text-underline-offset:.3em; }
.home-nav .nav-start span { color:var(--clay); }

.home-hero { display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);gap:var(--work-gap);align-items:center;padding-block:clamp(2rem,5vw,4.7rem); }
.home-hero h1 { font-size:clamp(4rem,6.6vw,5.85rem);line-height:.91;letter-spacing:-.062em;text-wrap:initial; }
.home-hero h1 > span { display:block; }
.home-hero-copy > p { font-size:clamp(1.02rem,1.55vw,1.22rem);max-width:34ch;margin:1.6rem 0 1.3rem; }
.home-hero-actions { display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center; }
.home-hero-actions > a:not(.button) { font-size:.92rem; }
.home-hero-copy small { display:block;margin-top:1.1rem;color:var(--muted);font-size:.82rem; }
.home-specimen { min-width:0;background:var(--work-sand);padding:clamp(.55rem,1.65vw,1.4rem);border:1px solid var(--work-rule); }
.home-specimen img { display:block;width:100%;height:clamp(420px,42vw,610px);object-fit:cover;object-position:center 48%; }
.home-specimen figcaption { display:flex;justify-content:space-between;flex-wrap:wrap;gap:.2rem 1rem;padding:.75rem .15rem 0;font-size:.76rem;color:var(--muted); }
.home-specimen figcaption span:first-child { color:var(--ink);font-weight:500; }
.field-sheet { min-width:0;margin:0;background:var(--work-olive);border:1px solid var(--work-moss);padding:clamp(1.3rem,4vw,3.5rem); }
.field-sheet figcaption { font-size:.88rem;font-weight:600;color:var(--work-moss);padding-bottom:.65rem;border-bottom:1px solid var(--work-moss); }
.field-sheet blockquote { margin:clamp(1.2rem,3vw,2.5rem) 0;font:400 clamp(2.15rem,4.1vw,4rem)/1.02 var(--display);letter-spacing:-.043em;text-wrap:balance; }
.field-sheet > p { max-width:41ch; }
.field-sheet dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin:1.4rem 0 0;padding-top:.75rem;border-top:1px solid var(--work-moss); }
.field-sheet dt { font:600 .8rem/1.25 var(--body);color:var(--work-moss); }
.field-sheet dd { font-size:.87rem;color:var(--ink); }

.examples { background:var(--work-olive); }
.examples-inner { display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:var(--work-gap);align-items:start;padding-block:clamp(3rem,7vw,6rem); }
.examples-intro p,.home-offer > div > p { margin-top:1rem;max-width:37ch; }
.example-picker { border:0;margin:0;padding:0;min-inline-size:0; }
.example-picker legend { margin:0 0 .55rem;font-size:.86rem;font-weight:600; }
.example-options { display:flex;flex-wrap:wrap;gap:.5rem; }
.example-options label { display:inline-flex;position:relative;cursor:pointer; }
.example-options input { position:absolute;inline-size:1px;block-size:1px;opacity:0; }
.example-options span { padding:.6rem .82rem;border:1px solid var(--work-moss);border-radius:3rem;font-size:.86rem;display:flex;align-items:center;min-height:44px; }
.example-options label:hover span { background:var(--work-cream); }
.example-options input:checked + span { color:var(--white);background:var(--work-moss); }
.example-options input:focus-visible + span { outline:3px solid var(--clay);outline-offset:3px; }
.example-case { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem;border-top:1px solid var(--work-moss); }
.example-case > div { padding:1rem 1rem .25rem 0; }
.example-case > div + div { border-left:1px solid var(--work-moss);padding-inline:1rem 0; }
.example-case h3 { font-size:1.65rem;margin:0 0 .45rem; }
.example-case p { color:var(--ink); }

.home-offer { display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:var(--work-gap);padding-block:clamp(3rem,7.5vw,7rem); }
.home-deliverables { margin:0; }
.home-deliverables > div { border-top:1px solid var(--work-rule);padding:1rem 0; }
.home-deliverables > div:last-child { border-bottom:1px solid var(--work-rule); }
.home-deliverables dt { font-size:clamp(1.55rem,2.8vw,2.3rem); }
.home-deliverables dd { max-width:56ch; }
.participation-offer > div > a,.research-lead .button { margin-top:1.1rem; }
.moodboard-example { margin-top:1rem;font-size:.9rem; }
.moodboard-example summary { cursor:pointer;text-underline-offset:.2em;text-decoration:underline; }
.moodboard-example figure { margin:.8rem 0 0;max-width:26rem; }
.moodboard-example img { width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; }
.moodboard-example figcaption { padding:.45rem 0;color:var(--muted);font-size:.81rem; }
.home-process { background:var(--work-cream);border-block:1px solid var(--work-rule); }
.home-process > div { padding-block:clamp(3rem,6.2vw,6rem); }
.home-process ol,.research-method ol { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;list-style:none;padding:0;margin:1.75rem 0 0; }
.home-process li,.research-method li { border-top:1px solid var(--work-rule);padding-top:.85rem; }
.home-process li p,.research-method li p { margin-top:.6rem; }
.home-research { color:var(--ink);background:var(--work-sand); }
.home-research-inner { display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:end;gap:var(--work-gap);padding-block:clamp(2.8rem,5vw,5rem); }
.home-research-inner h2 { font-size:clamp(2.6rem,4.6vw,4.6rem); }
.home-research-inner a { display:inline-block;margin-top:1.1rem; }
.home-research-inner .button { display:inline-flex; }

.research-lead { display:grid;grid-template-columns:minmax(0,1.23fr) minmax(0,.77fr);gap:var(--work-gap);align-items:end;padding-block:clamp(3rem,7vw,7rem); }
.research-lead h1 { font-size:clamp(3.25rem,7vw,6.7rem); }
.research-lead > div > p { margin-top:1.25rem;max-width:45ch;font-size:1.15rem; }
.research-lead aside { background:var(--work-olive);border-left:4px solid var(--work-moss);padding:1.4rem; }
.research-lead aside h2 { font-size:2rem; }
.research-lead aside p { margin-top:.75rem;color:var(--ink); }
.research-method { padding-block:clamp(3rem,6vw,6rem); }
.community-band { background:var(--work-olive); }
.community-band .home-deliverables > div { border-color:var(--work-moss); }
.research-identity { background:var(--work-cream);border-block:1px solid var(--work-rule); }
.research-faq { display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:var(--work-gap);padding-block:clamp(2.8rem,6vw,6rem); }
.research-faq details { border-bottom:1px solid var(--work-rule);padding:.9rem 0; }
.research-faq details:first-child { border-top:1px solid var(--work-rule); }
.research-faq summary { cursor:pointer;font-weight:600; }
.research-faq p { margin:.65rem 0 .25rem; }

.journey { width:min(calc(100% - 2.5rem),740px);padding-top:clamp(1.45rem,4vw,3rem); }
.route-map { list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:0 0 1rem;padding:0; }
.route-map li { display:flex;gap:.5rem;align-items:center;min-width:0;border-bottom:2px solid var(--work-rule);padding:.45rem .15rem .6rem;color:var(--muted);font-size:.87rem;line-height:1.2; }
.route-map li span { display:grid;place-items:center;flex:none;width:1.55rem;height:1.55rem;border:1px solid var(--work-rule);border-radius:50%;font-size:.72rem; }
.route-map [data-state="current"] { color:var(--clay);border-color:var(--clay);font-weight:600; }
.route-map [data-state="current"] span { background:var(--clay);color:var(--white);border-color:var(--clay); }
.route-map [data-state="done"] { color:var(--work-moss);border-color:var(--work-moss); }
.route-map [data-state="done"] span { background:var(--work-olive);border-color:var(--work-moss); }
.journey .question-area { background:var(--work-cream);border:1px solid var(--work-rule);border-radius:.55rem;padding:clamp(1rem,4vw,2.3rem); }
.journey .question { font-size:clamp(2.2rem,4.7vw,3.7rem);line-height:1.02;margin:0 0 1rem; }
.journey .question:focus-visible { outline-offset:6px; }
.journey .choices { gap:.55rem; }
.journey .choice { background:var(--work-paper); }
.journey .choice:has(input:checked) { background:var(--work-olive);border-color:var(--work-moss); }
.journey .choice:focus-within { outline:2px solid var(--work-moss);outline-offset:2px; }
.journey .field textarea { min-height:9rem;background:var(--white);padding:.8rem; }
.journey .actions { gap:.8rem 1.15rem; }
.journey .actions .text-button { min-height:44px; }
.journey .actions a.text-button { display:inline-flex;align-items:center; }
.identity-invite { background:var(--work-wash);border-left:3px solid var(--work-moss);margin:1.25rem 0;padding:.7rem 1rem; }
.identity-invite h2 { font:600 1rem/1.4 var(--body);letter-spacing:0;margin:0; }
.identity-invite p { margin:.3rem 0!important;font-size:.89rem; }
.identity-invite .text-button { min-height:44px; }
.journey .identity-progress { color:var(--work-moss);font-size:.82rem;font-weight:600;margin:0 0 .6rem; }
.answer-count { justify-self:end;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums; }
.answer-example { margin:.75rem 0 1rem;font-size:.9rem;color:var(--work-moss); }
.answer-example summary { cursor:pointer;text-decoration:underline;text-underline-offset:.2rem; }
.answer-example p { margin-top:.4rem!important; }
.journey-note { margin-top:.8rem;background:var(--work-wash);border:1px solid var(--work-rule); }
.journey-note[data-ready="true"] { background:var(--work-olive);border-color:var(--work-moss); }
.journey-note summary { padding:.75rem 1rem; }
.journey-note .tip-preview { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.journey-note[open] .tip-preview { display:none; }
.note-content { padding:0 1rem 1rem; }
.note-content h2 { font-family:var(--body);font-size:.9rem;font-weight:600;margin:.8rem 0 .3rem;letter-spacing:0; }
.note-content p { padding:0; }
.note-content dl { display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .75rem;margin:.1rem 0;font-size:.86rem; }
.note-content dt { font:600 .86rem/1.45 var(--body);margin:0; }
.note-content dd { color:var(--forest); }
.journey-meta { display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem; }
.journey-meta p { margin:.55rem 0 0!important;font-size:.77rem; }
.journey-meta #save-state:empty { display:none; }
.journey .error:empty { display:none; }
.journey-progress { margin:.25rem 0 .75rem!important;color:var(--work-moss);font-size:.8rem; }
.journey-checkpoint { margin:1rem 0;padding:.8rem 1rem;background:var(--work-olive);border-left:3px solid var(--work-moss); }
.journey-checkpoint p { margin:0!important;color:var(--forest);font-size:.9rem; }
.answer-suggestions { display:flex;flex-wrap:wrap;gap:.35rem .8rem; }
.answer-suggestions button { min-height:40px;font-size:.8rem; }
.journey .field-label { margin:1rem 0 .55rem!important;font-weight:600;font-size:.9rem;color:var(--ink); }

@media (max-width:900px) {
  .home-hero { gap:1.45rem; }
  .home-hero h1 { font-size:clamp(3.5rem,7.4vw,5.4rem); }
  .home-specimen img { height:clamp(350px,50vw,510px); }
}
@media (max-width:690px) {
  .home-nav { min-height:64px; }
  .home-nav nav { display:none; }
  .home-nav .brand { font-size:2.3rem; }
  .home-hero,.examples-inner,.home-offer,.home-research-inner,.research-lead,.research-faq { grid-template-columns:minmax(0,1fr);gap:1.45rem; }
  .home-hero { padding-top:1.75rem; }
  .home-hero h1 { font-size:clamp(3.25rem,10.4vw,5.2rem); }
  .home-hero-copy > p { margin:.95rem 0 1rem; }
  .home-hero-actions { gap:.7rem 1rem; }
  .home-specimen img { height:clamp(270px,65vw,400px); }
  .field-sheet blockquote { text-wrap:initial; }
  .home-process ol,.research-method ol { grid-template-columns:minmax(0,1fr);gap:1rem; }
  .research-lead > div > p { font-size:1rem; }
  .journey { width:calc(100% - 1.65rem); }
  .route-map li { gap:.25rem;font-size:.74rem; }
  .route-map li span { width:1.3rem;height:1.3rem; }
}
@media (max-width:400px) {
  .example-options span { font-size:.77rem; }
  .example-case { grid-template-columns:minmax(0,1fr); }
  .example-case > div + div { padding:1rem 0 0;border-left:0;border-top:1px solid var(--work-moss);margin-top:.75rem; }
  .home-page .foot { gap:.75rem; }
  .home-page .foot a:not(.brand) { font-size:.75rem; }
}