/* About, round 3 (about-full-a|b|c.html): the whole page for each direction */
.av-sec { padding-block: clamp(90px, 14vh, 170px); color: #f3efe7; position: relative; }
.av-paper { color: #111; background: url(/assets/lab/img/lab/paper-2k.jpg) center / cover; }
.av-fix { position: absolute; z-index: 2; display: block; }
.av-fix img { display: block; width: 100%; height: auto; }
.av-tink { position: absolute; height: auto; }
.av-label { position: relative; display: inline-block; width: clamp(200px, 22vw, 340px); rotate: var(--r); vertical-align: middle; margin-left: 0.4em; }
.av-label img { display: block; width: 100%; height: auto; }
.av-people { padding-block: clamp(90px, 14vh, 170px); }

/* Why Bretzel, A's close: the question, answered big */
.av-why { padding-block: clamp(100px, 16vh, 200px); color: #f3efe7; }
.av-why__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px clamp(30px, 6vw, 100px); align-items: center; }
.av-why .st-kicker { grid-column: 1 / -1; }
.av-why__q { font: 400 clamp(56px, 9vw, 160px)/0.88 var(--hero); text-transform: uppercase; letter-spacing: -0.04em; }
.av-why__q em { font-style: normal; color: var(--orange); }
.av-why__p { font: 400 clamp(17px, 1.4vw, 22px)/1.55 var(--sans); max-width: 40ch; grid-column: 1; }
.av-why__bz { grid-column: 2; grid-row: 2 / 4; width: min(100%, 420px); rotate: 8deg; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.4)); }

/* A · the recipe */
.aa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.aa-step { position: relative; border-top: 2px solid var(--orange); padding-top: 22px; }
.aa-n { font: 600 12px/1 var(--sans); letter-spacing: 0.16em; color: var(--orange); }
.aa-verb { font: 400 clamp(56px, 7.4vw, 128px)/0.9 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; margin: 14px 0 6px; }
.aa-note { display: block; height: clamp(26px, 2.4vw, 38px); width: auto; margin: 6px 0 18px; rotate: -2deg; }
.aa-step p { font: 400 16px/1.55 var(--sans); max-width: 34ch; opacity: 0.82; }
/* A · the route */
.aa-city { font: 400 clamp(64px, 11.5vw, 210px)/0.9 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; }
.aa-city--2 { text-align: right; color: var(--orange); }
.aa-via { font: 600 13px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; text-align: center; margin: clamp(20px, 4vh, 40px) 0;
  display: flex; align-items: center; gap: 20px; } .aa-via::before, .aa-via::after { content: ''; flex: 1; border-top: 2px dashed currentColor; opacity: 0.5; }
.aa-city .av-label { font-size: 16px; }
.aa-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 70px); margin-top: clamp(50px, 8vh, 90px); max-width: 1000px; }
.aa-story p { font: 400 clamp(17px, 1.35vw, 21px)/1.6 var(--sans); }

/* B · what we fix: the printed line, the word taped over */
.bf-lines { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: clamp(36px, 7vh, 80px); }
.bf-line { font: 400 clamp(34px, 6.2vw, 112px)/1 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; }
.bf-line:nth-child(2) { text-align: right; }
.bf-line .slot { position: relative; display: inline-block; color: rgba(17, 17, 17, 0.9); }
/* B · two cities */
.bc { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.bc-half { padding: clamp(80px, 14vh, 160px) clamp(24px, 5vw, 80px); min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; }
.bc-half--ba { background: #75AADB; color: #111; }
.bc-half--wg { background: var(--orange); color: #111; }
.bc-k { font: 600 12px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; }
.bc-city { font: 400 clamp(54px, 8.5vw, 150px)/0.88 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; hyphens: manual; }
.bc-txt { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 70px); padding-block: clamp(60px, 10vh, 110px); }
.bc-txt p { font: 400 clamp(18px, 1.6vw, 26px)/1.5 var(--sans); }
/* B · the bretzel, full bleed */
.bb { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; overflow: hidden; }
.bb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, 0.72)); }
.bb-in { position: relative; z-index: 1; padding: clamp(40px, 8vw, 120px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; }
.bb-q { font: 400 clamp(60px, 10vw, 180px)/0.86 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; }
.bb-in p { font: 400 clamp(17px, 1.4vw, 22px)/1.5 var(--sans); max-width: 34ch; }

/* C · P.S. */
.cp-ps { font: 400 clamp(90px, 16vw, 280px)/0.8 var(--hero); color: var(--orange); letter-spacing: -0.05em; }
.cp-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 40px); margin-top: clamp(-60px, -4vw, -20px); padding-left: 12%; }
.cp-note { width: 100%; height: auto; rotate: var(--r); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.3)); }
.cp-note:nth-child(even) { margin-top: 60px; }
/* C · the photo taped in, the story beside it */
.cs-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: clamp(50px, 7vw, 100px) clamp(24px, 5vw, 90px); color: #111; }
.cs-photo { position: relative; margin: 0; rotate: -2.5deg; background: #fff; padding: 12px 12px 40px; box-shadow: 0 2px 3px rgba(30, 24, 18, 0.2), 0 20px 36px rgba(30, 24, 18, 0.18); }
.cs-photo img { display: block; width: 100%; height: auto; }
.cs-tape { position: absolute; top: -18px; left: 50%; width: 140px; translate: -50% 0; rotate: var(--tr); }
.cs-txt p:not(.st-kicker) { font: 400 clamp(17px, 1.3vw, 20px)/1.6 var(--sans); margin-bottom: 1em; max-width: 46ch; }

@media (max-width: 900px) {
  .aa-steps, .aa-story, .bc, .bc-txt, .cs-sheet, .av-why__in { grid-template-columns: minmax(0, 1fr); }
  .av-why__bz { grid-column: 1; grid-row: auto; width: 60%; }
  .bc-half { min-height: 48vh; }
  .cp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; margin-top: 20px; }
  .av-label { display: block; margin: 12px 0 0; }
}
/* fixes after the first look */
.aa-verb { font-size: clamp(44px, 5.2vw, 92px); }
.av-why__q { font-size: clamp(50px, 7.2vw, 128px); }
.av-why__bz { width: min(100%, 340px); }
.cs-photo img.cs-tape { position: absolute; top: -22px; left: 50%; width: 38%; height: auto; }
.cs .av-title { font-size: clamp(34px, 3.6vw, 60px); }
.av-why__q { grid-column: 1 / -1; }
.av-why__bz { grid-row: 3; justify-self: end; margin-top: -6vw; }