/* September composition pass. The native editor remains rgb(97.6% 96.9% 94.9%).
   A single material family contains the demos; the prose has its own hierarchy. */
:root {
  --ground: #eae9e4;
  --sheet: #fdfcf9;
  --ink: #302f29;
  --muted: #69675e;
  --caption-ink: #3b3931;
  --caption-muted: #68665d;
}
html { background: var(--ground); scroll-behavior: auto; }
body { background: var(--ground); }
main { overflow: clip; }
section { scroll-margin-top: 32px; }

/* A close contact edge, a fine uncoated surface, and room around the sheet. */
#unify, .filing-scene, .return-scene {
  width: 92%; max-width: 1440px; margin: 56px auto;
  background: var(--sheet) !important;
  border: 1px solid rgb(87 80 65 / .08);
  border-radius: 1px;
}
html:not([data-paper=flat]) #unify,
html:not([data-paper=flat]) .filing-scene,
html:not([data-paper=flat]) .return-scene {
  box-shadow: 0 1px 1px rgb(63 57 42 / .09), 0 5px 9px -7px rgb(63 57 42 / .18), 0 18px 30px -27px rgb(63 57 42 / .22);
}
#unify::before, .filing-scene::before, .return-scene::before {
  background-image: url('fine-stock.svg'); background-size: 512px 512px;
}
html[data-paper=fine] #unify::before,
html[data-paper=fine] .filing-scene::before,
html[data-paper=fine] .return-scene::before { opacity: .5; }
html[data-paper=smooth] #unify::before,
html[data-paper=smooth] .filing-scene::before,
html[data-paper=smooth] .return-scene::before { opacity: .1; }
.filing-scene::before { background-position: 137px 83px; }
.return-scene::before { background-position: 289px 211px; }
#unify::after, .filing-scene::after, .return-scene::after {
  background: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
}
#unify { margin-top: 38px; padding-top: 68px; }
#unify .unify-title { margin-bottom: 40px; }
.unify-title h2 { font-size: clamp(42px, 4vw, 60px); line-height: 1.12; }
.unify-title em { font-size: clamp(27px, 2.7vw, 39px); margin-top: 14px; }
.filing-scene, .return-scene { padding-top: 68px; padding-bottom: 38px; }
.filing-scene > header { padding-inline: 0; width: calc(100% - 80px); max-width: 1260px; margin-bottom: 42px; }
.filing-scene h2, .return-scene h2 { font-size: clamp(43px, 4vw, 60px); line-height: 1.1; }
.filing-scene header p { max-width: 37ch; margin-top: 20px; font-size: 21px; line-height: 1.5; }
.eyebrow { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.scene-controls, #unify .merge-controls { color: #69665c; }
.scene-controls button, #unify .merge-controls button { color: inherit; border-color: #aaa49480; }
.return-scene .prepared { color: #716d63; }

/* The first interlude names the experience. The next one explains a relation. */
.stay { max-width: 1040px; margin: auto; padding: 84px 28px 98px; text-align: center; }
.stay h2 { font-size: clamp(39px, 3.7vw, 54px); line-height: 1.16; text-wrap: balance; }
.stay p { max-width: 49ch; font: 23px/1.55 var(--serif); margin: 28px auto 0; color: var(--muted); }
.stay small { display: none; }
.sentence-bridge {
  max-width: 1040px; margin: auto; padding: 100px 40px 100px;
  display: grid; grid-template-columns: minmax(0, 640px) 220px; gap: 25px 48px;
  text-align: left; align-items: start;
}
.sentence-bridge > div { display: contents; }
.sentence-bridge h2 { grid-column: 1; font: 45px/1.16 var(--serif); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.sentence-bridge .bridge-thought { grid-column: 1; grid-row: 2; }
.sentence-bridge .bridge-thought { max-width: 40ch; font: 23px/1.5 var(--serif); color: var(--muted); margin: 0; }
.sentence-bridge aside { grid-column: 2; grid-row: 2; padding-top: 3px; }
.sentence-bridge aside p { font: 15px/1.65 -apple-system,BlinkMacSystemFont,sans-serif; color: #65645b; margin: 0; }
.sentence-bridge aside p + p { margin-top: 15px; }
.sentence-bridge aside em { font: italic 21px/1.4 var(--serif); color: #56554b; }

/* Philosophy has one reading column and its own pause, ahead of the craft. */
.philosophy { padding: 110px 28px 100px; }
.philosophy-inner { display: block; max-width: 700px; text-align: left; }
.philosophy .eyebrow { display: block; margin: 0 0 26px; }
.philosophy h2 { font: 58px/1.1 var(--serif); letter-spacing: -.035em; margin: 0 0 30px; }
.philosophy p { max-width: 40ch; font: 24px/1.55 var(--serif); color: var(--muted); margin: 0 0 24px; }
.philosophy em { font: italic 28px/1.35 var(--serif); color: #444439; }

/* A small platform signature introduces a spacious, image-led craft sequence. */
.closing-story { background: linear-gradient(180deg, var(--ground) 0%, var(--ground) 42%, #eae7de 76%, #e4dece 100%); }
.native-section { display: flex; justify-content: center; align-items: baseline; gap: 28px; flex-wrap: wrap; padding: 34px 24px 112px; }
.native-section h2 { font: 500 21px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: -.025em; }
.native-section p { font: 16px/1.5 -apple-system,BlinkMacSystemFont,sans-serif; color: var(--muted); }
.craft-section { width: 88%; max-width: 1280px; margin: 0 auto; padding: 0 0 64px; }
.craft-section header { display: block; padding: 0; margin: 0 0 48px; max-width: 850px; }
.craft-section header .eyebrow { margin: 0 0 24px; font-size: 11px; line-height: 1.5; }
.craft-section h2 { font: 64px/1.1 var(--serif); letter-spacing: -.035em; }
.craft-section h2 em { color: #787367; }
.native-capture { border-radius: 10px; border-color: rgb(51 45 32 / .09); box-shadow: 0 1px 3px #302c2308, 0 25px 48px -34px #302c2338; }
.craft-section figcaption { color: #686257; margin: 18px 0 0; font-size: 12px; }
.craft-detail { display: grid; grid-template-columns: 330px minmax(0, 410px); gap: 90px; align-items: center; max-width: 830px; margin: 92px auto 35px; }
.craft-detail-crop { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; background: var(--app-paper); border-radius: 2px; }
.craft-detail-crop img { position: absolute; width: 450%; max-width: none; height: auto; right: 0; top: -38px; }
.craft-detail-copy h3 { font: 37px/1.16 var(--serif); letter-spacing: -.025em; margin: 0 0 22px; }
.craft-detail-copy p { font: 17px/1.65 -apple-system,BlinkMacSystemFont,sans-serif; color: #666256; }
.craft-detail-copy small { display: block; margin-top: 25px; font: 12px/1.5 -apple-system,sans-serif; color: #686257; }

/* Warmth returns across the whole closing passage, before the landscape appears.
   The museum image itself is unchanged; the top washes into a related ground. */
.painted-invitation { height: clamp(620px, 47vw, 740px); background: transparent; }
.closing-painting {
  left: -1%; top: 0; width: 102%; height: 104%; object-position: 50% 55%;
  mask-image: linear-gradient(to bottom, transparent 0%, #00000014 13%, #00000080 30%, #000000e6 48%, #000 62%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #00000014 13%, #00000080 30%, #000000e6 48%, #000 62%);
}
.invitation-copy { padding-top: 108px; }
.invitation-copy h2 { font-size: clamp(48px, 5.3vw, 78px); margin-bottom: 12px; }
.invitation-copy .beta { margin-top: 32px; }
.painting-credit { background: #e4dece; padding-bottom: 96px; color: #625f53; }

/* Emphasis belongs to visibility. Nothing moves or becomes unreadable at rest. */
[data-attention] { --present-ink: var(--ink); --resting-ink: #69675e; }
[data-attention] h2, [data-attention] h3 { transition: color 650ms ease; }
[data-attention=quiet] h2, [data-attention=quiet] h3 { color: var(--resting-ink); }
[data-attention=present] h2, [data-attention=present] h3 { color: var(--present-ink); }
.filing-caption { --present-ink: var(--caption-ink); }
.filing-caption[data-filed=false] h3 { color: #736f65; }
.filing-caption[data-filed=true] h3 { color: var(--caption-ink); }
.filing-caption h3 { transition: color 700ms ease; }

/* The reader keeps its full measure; a narrow desktop uses a caption band. */
#unify { container: first-paper / inline-size; }
.centered-frame { min-width: 1100px; }
@container first-paper (max-width:1260px) {
  .centered-frame { height: 750px; }
}

@media(max-width:1559px) {
  .recall-stage { padding: 146px 24px 0; overflow-x: auto; }
  .recall-caption, .revisit-caption { top: 0; left: 50%; right: auto; transform: translateX(-50%); width: 640px; max-width: calc(100% - 80px); text-align: center; }
  .recall-caption h3, .revisit-caption h3 { margin-bottom: 10px; }
  .recall-caption h3 br, .revisit-caption h3 br, .revisit-caption p br { display: none; }
  .recall-caption h3 br::after, .revisit-caption h3 br::after, .revisit-caption p br::after { content: ' '; }
  .recall-step { margin-top: 10px; }
}
@media(max-width:1199px) {
  #unify, .filing-scene, .return-scene { width: calc(100% - 48px); }
  .sentence-bridge { gap: 45px; padding-inline: 7%; grid-template-columns: minmax(0, 1fr) 205px; }
  .craft-section h2 { font-size: 56px; }
  .craft-detail { gap: 50px; }
}
@media(max-width:1090px) {
  .recall-caption, .revisit-caption { max-width: none; width: 550px; left: 536px; }
}
@media(max-width:760px) {
  .sentence-bridge { display: block; padding: 70px 8%; }
  .sentence-bridge h2 { margin-bottom: 25px; }
  .sentence-bridge h2 { font-size: 37px; }
  .sentence-bridge aside { margin-top: 28px; max-width: 30ch; }
  .philosophy h2 { font-size: 46px; }
  .native-section { gap: 12px 24px; padding-bottom: 80px; }
  .craft-section h2 { font-size: 43px; }
  .craft-detail { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 60px; }
  .craft-detail-crop { max-width: 350px; }
  .craft-detail-copy h3 { font-size: 32px; }
  .painting-credit { align-items: start; }
}
@media(prefers-reduced-motion:reduce) {
  [data-attention] h2, [data-attention] h3, .filing-caption h3 { transition: none; }
}