/* About: the hero with the wall calendar scene, alternating editorial spreads, the perforation divided
   belief and never-does column, the pull quote interlude on the seal, the identity card and the store CTA.
   Generous type at wide widths keeps the measure readable while the spreads fill the page. */

/* Hero --------------------------------------------------------------------------- */
.about-hero { position: relative; background: var(--cream); overflow: hidden; }
.about-hero__grid { display: grid; gap: var(--sp-5); padding-top: clamp(2.5rem, 4vw + 1rem, 6rem); padding-bottom: clamp(1rem, 2vw, 3rem); align-items: center; }
@media (min-width: 900px) { .about-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 6rem); } }
.about-hero__copy h1 { margin-bottom: var(--sp-4); }
.about-hero__lead { max-width: 52ch; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.55rem); line-height: 1.45; }
.about-hero__scene { position: relative; min-height: clamp(420px, 62vh, 760px); border-radius: var(--r-card); overflow: hidden; background: var(--cream); }
/* from 1200px the scene runs to the right edge of the viewport (the wall keeps going), the calendar stays in the column */
@media (min-width: 1200px) {
  .about-hero__scene { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap-max)) / 2)); border-radius: var(--r-card) 0 0 var(--r-card); min-height: clamp(520px, 70vh, 900px); }
}
.about-hero__scene canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 899px) { .about-hero__scene { min-height: clamp(300px, 52vh, 480px); } }
/* the settled DOM wall (reduced motion, no WebGL, mobile) */
.about-wall { position: absolute; inset: 0; }
.about-wall[hidden] { display: none; }
.about-wall__pin { position: absolute; left: 50%; top: 9%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--graphite); box-shadow: var(--tag-shadow); z-index: 2; }
.about-wall__page { position: absolute; left: 50%; top: 8%; width: min(56%, 520px); aspect-ratio: 0.86; transform: translateX(-50%) rotate(-1.5deg); transform-origin: 50% 0; background: var(--paper); border-radius: 3px; box-shadow: var(--shadow-2); padding: 8% 6% 6%; display: grid; grid-template-rows: auto 1fr; gap: 6%; }
.about-wall__page::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--graphite); border-radius: 3px 3px 0 0; }
.about-wall__month { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 0.6rem + 1.4vw, 1.6rem); }
.about-wall__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; align-content: start; }
.about-wall__grid i { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--hair); border-radius: 2px; }
.about-wall__grid i::before { content: attr(data-n); position: absolute; left: 3px; top: 1px; font-size: clamp(0.5rem, 0.3rem + 0.4vw, 0.8rem); font-weight: 600; color: var(--graphite); }
.about-wall__grid i.pad { border-color: transparent; }
.about-wall__grid i.today { border-color: var(--graphite); }
.about-wall__grid i b { position: absolute; left: 15%; right: 15%; bottom: 12%; height: 32%; background: var(--paper); border: 1px solid var(--graphite); border-top-width: 3px; border-radius: 2px; }
.about-wall__grid i b.paper { background: #F3EBDD; border-color: var(--shadow); }
.about-wall__counter { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; display: flex; align-items: flex-end; justify-content: center; gap: 6%; padding-bottom: 6%; }
/* the pool of morning light on the counter under the sorted mail */
.about-wall__counter::before { content: ''; position: absolute; left: -10%; right: -10%; top: 10%; bottom: 0; background: radial-gradient(ellipse at 50% 80%, #EDE2CF 0%, rgba(237, 226, 207, 0.75) 40%, rgba(237, 226, 207, 0) 72%); pointer-events: none; }
.about-wall__counter .stack { position: relative; display: grid; gap: 3px; width: 20%; max-width: 260px; }
.about-wall__counter .stack i { display: block; height: 8px; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 2px; box-shadow: var(--tag-shadow); }
.about-wall__counter .stack i:first-child { position: relative; height: 34px; background: #FFFDF8; overflow: hidden; }
/* the top envelope: a flap crease, and on the middle stack the window envelope */
.about-wall__counter .stack i:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 1px solid var(--hair); transform-origin: 0 0; transform: translateY(12px) skewY(-8deg); width: 52%; }
.about-wall__counter .stack i:first-child::after { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--hair); transform-origin: 100% 0; transform: translateY(12px) skewY(8deg); width: 52%; left: auto; }
.about-wall__counter .stack:nth-child(2) i:first-child { height: 40px; }
.about-wall__counter .stack:nth-child(2) i:first-child::before { top: auto; bottom: 22%; left: 14%; width: 44%; height: 34%; border: 1px solid var(--hair); background: rgba(200, 214, 224, 0.55); transform: none; border-radius: 1px; }
.about-wall__counter .stack:nth-child(2) i:first-child::after { top: 22%; right: 12%; width: 18%; height: 26%; border: 0; background: var(--marigold); transform: none; left: auto; border-radius: 1px; }
.js:not(.rm) .about-wall__page { animation: wall-sway 6s var(--ease-headsup) infinite alternate; }
@keyframes wall-sway { from { transform: translateX(-50%) rotate(-1.8deg); } to { transform: translateX(-50%) rotate(1.2deg); } }

/* Spreads ------------------------------------------------------------------------ */
.about-spread__grid { align-items: center; }
.about-photo { margin: 0; aspect-ratio: 3 / 2; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text { display: grid; gap: var(--sp-3); }
.about-text p { max-width: 60ch; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.45rem); line-height: 1.55; margin: 0; }
.about-text .eyebrow { margin: 0; }
.about-text .dropcap::first-letter { font-size: 3.9em; line-height: 0.78; padding-right: 0.14em; }
.about-product { margin: 0; width: min(100%, 440px); justify-self: center; }
.about-product img { width: 100%; height: auto; }
@media (min-width: 1440px) { .about-product { width: min(100%, 560px); justify-self: start; } }
@media (min-width: 1920px) { .about-product { width: min(100%, 680px); } .about-text p { max-width: 64ch; } }

/* The belief and the never-does list, divided by the perforation --------------------- */
.about-belief__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .about-belief__grid { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 5rem); align-items: stretch; } }
.about-belief__col { display: grid; gap: var(--sp-4); align-content: start; }
.about-belief__title { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.9rem); margin: 0; }
.about-belief__body { max-width: 58ch; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.45rem); line-height: 1.55; margin: 0; }
.about-belief__perf { position: relative; }
.about-perf-v { display: none; width: 16px; height: 100%; margin: 0; }
.about-perf-h .div { margin: 0; }
@media (min-width: 900px) { .about-perf-v { display: block; } .about-perf-h { display: none; } }
.never-list { display: grid; gap: var(--sp-3); max-width: 58ch; }
.never-list li { display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--hair); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.5; }
.never-list li:last-child { border-bottom: 1px solid var(--hair); }
.never-list .icon { margin-top: 0.15em; stroke: var(--graphite); }

/* The pull quote interlude on the seal ------------------------------------------------ */
.about-quote { min-height: clamp(560px, 74vh, 860px); display: grid; align-items: center; background: var(--oat); }
.about-quote__media { position: absolute; inset: 0; }
.about-quote__media img { width: 100%; height: 100%; object-fit: cover; }
.about-quote__inner { position: relative; z-index: 2; padding: var(--band-y) 0; display: grid; justify-items: center; gap: var(--sp-5); text-align: center; }
.about-quote__seal { width: clamp(150px, 16vw, 240px); }
.about-seal { width: 100%; height: auto; transform: rotate(-6deg); transition: transform var(--t-slow) var(--ease-headsup); }
.about-seal .d { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform var(--t-base) var(--ease-headsup) calc(0.25s + var(--i) * 0.025s); }
.about-seal.is-in, .rm .about-seal { transform: rotate(0); }
.about-seal.is-in .d, .rm .about-seal .d { transform: scale(1); }
.about-quote__text { margin: 0; max-width: 24ch; }
.about-quote__text p { margin: 0; font-size: clamp(1.9rem, 1.2rem + 3.2vw, 4.6rem); }

/* The company ---------------------------------------------------------------------------- */
.about-company__grid { align-items: center; }
.about-company__card { position: relative; overflow: hidden; padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; gap: var(--sp-3); }
.about-company__card h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); margin: 0; }
.about-company__card p { max-width: 42ch; margin: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
.about-company__card a { color: var(--graphite); font-weight: 600; }
.about-company__seal { position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; opacity: 0.16; pointer-events: none; }

/* The store CTA ---------------------------------------------------------------------------- */
.about-cta__inner { display: grid; gap: var(--sp-5); align-items: center; padding: clamp(1.5rem, 1rem + 2.5vw, 4rem); border: 1.5px dashed var(--hair-strong); border-radius: var(--r-card); background: var(--paper); }
@media (min-width: 900px) { .about-cta__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 6rem); } }
.about-cta__lead { margin: 0; max-width: 52ch; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.55rem); }
.about-cta__actions { display: grid; gap: var(--sp-3); justify-items: start; }
@media (min-width: 900px) { .about-cta__actions { justify-items: end; text-align: right; } }
.about-cta__actions p { margin: 0; }