/* 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; }

/* Written about Addabill */
.about-press h2 { margin-top: var(--sp-2); }
.about-press__grid { list-style: none; padding: 0; margin: var(--sp-5) 0 0; --cols: 1; --cols-md: 2; --cols-lg: 4; }
.about-press__item { display: flex; flex-direction: column; gap: var(--sp-2); }
.about-press__pub { color: var(--shadow); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.about-press__title { margin: 0; font-size: var(--fs-h4); line-height: 1.3; }
.about-press__link::before { content: ''; position: absolute; inset: 0; }
.about-press__item { position: relative; }