@charset "UTF-8";
/* ==========================================================================
   TRAVELNEST — About us
   Loaded after style.css and destination.css: tokens, top bar, breadcrumb,
   page header, the "Four answers" planner and the footer come from those two.
   Everything between the season band and the paperwork lives here.
   --------------------------------------------------------------------------
   01. Page tweaks
   02. A year with us — four seasons
   03. How we work — four steps
   04. The office — six ID cards
   05. Guides on the ground — five regions
   06. Licence & guarantees — four papers
   07. Responsive — 1500 / 1200 / 1000 / 760 / 430
   --------------------------------------------------------------------------
   Unlike the destination pages this design is authored in fixed pixels at any
   width (only the nav and footer scale), so the values below are literal px.
   ========================================================================== */

/* ==========================================================================
   01. Page tokens and shared-block tweaks
   ========================================================================== */

/* the crumb sits tight under the nav rule, as on every other page */
.crumbs--about {
  margin-top: -8px;
  padding-top: 0;
}

/* this page prints its strips a touch tighter than the destination pages */
.page-about .letterhead { gap: 20px; padding: 20px 0 16px; }

/* the staff number tab prints white on ink, unlike the paper tabs */
.page-about { --ab-tab-num: #FFFFFF; }

/* on dark paper everything sitting on terracotta turns near-black, and the
   structural rules soften — the strips keep their full-strength bottom rule */
[data-theme="dark"] .page-about { --ab-tab-num: #1A1A1A; }

[data-theme="dark"] .yearstrip { border-top-color: rgba(var(--ink-rgb), 0.22); }

[data-theme="dark"] .yearband__rail,
[data-theme="dark"] .gcol__head,
[data-theme="dark"] .letterhead__tag { border-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .gregion {
  border-top-color: rgba(var(--ink-rgb), 0.45);
  border-bottom-color: rgba(var(--ink-rgb), 0.45);
}

/* the enquiry block is the Europe planner frozen at the 1920 reference;
   below 1500 it scales again so nothing runs past the gutter */
.page-about .planner { --u: 19.2px; }

@media (max-width: 1500px) {
  .page-about .planner { --u: 1.28vw; }
}

/* ==========================================================================
   02. A year with us — four seasons
   ========================================================================== */

.yearband { padding: 0 0 64px; }

.yearband__head {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 42px 0 26px;
}

.yearband__stack {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  min-width: 0;
}

.yearband__stack .display--about { font-size: 92px; }

.yearband__stack .script--about {
  font-size: 66px;
  padding-top: 0;
  padding-bottom: 18px;
}

.yearband__note {
  margin: 0 0 0 auto;
  max-width: 380px;
  padding-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

/* the year in four figures */
.yearstrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 var(--gutter) 22px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.22);
}

.yearcell {
  flex: 1 1 200px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 13px 20px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.22);
}

.yearcell:first-child { padding-left: 0; border-left: 0; }
.yearcell:last-child { padding-right: 0; }

.yearcell__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}

.yearcell__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* four seasons, four photographs */
.frames {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 var(--gutter);
}

.frame { display: flex; flex-direction: column; }

.frame--hot {
  background: var(--accent);
  color: var(--ab-on-accent-deep);
}

.frame__shot {
  position: relative;
  display: block;
  height: 480px;
  overflow: hidden;
}

.frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.frame__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, transparent 52%);
  pointer-events: none;
}

.frame--hot .frame__scrim {
  background: linear-gradient(to top, rgba(192, 82, 27, 0.82) 0%, transparent 52%);
}

.frame__no {
  position: absolute;
  left: 16px;
  top: 16px;
  background: rgba(192, 82, 27, 0.92);
  color: var(--ab-on-accent-deep);
  padding: 4px 11px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.frame--hot .frame__no {
  background: var(--ab-on-accent-deep);
  color: var(--accent);
}

.frame__cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--ab-on-accent-deep);
}

.frame__months {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  opacity: 0.9;
}

.frame__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.frame__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px 0;
}

.frame + .frame .frame__body {
  padding-left: 18px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
}

.frame--hot .frame__body { padding-left: 18px; border-left: 0; }

.frame__who {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.85;
  text-wrap: pretty;
}

.frame--hot .frame__who { opacity: 1; }

.frame__note {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.65;
  text-wrap: pretty;
}

.frame--hot .frame__note { opacity: 0.9; }

.frame__foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.35);
}

.frame--hot .frame__foot { border-top-color: rgba(255, 255, 255, 0.55); }

.frame__figure {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.frame--hot .frame__figure { color: var(--ab-on-accent-deep); }

.frame__meta { display: flex; flex-direction: column; }

.frame__routes {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.frame--hot .frame__routes { opacity: 0.85; }

.frame__regions {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.frame--hot .frame__regions { color: var(--ab-on-accent-deep); }

.yearband__rail {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 28px var(--gutter) 0;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.yearband__rail-text {
  max-width: 700px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.yearband__cta {
  margin-left: auto;
  background: var(--accent);
  color: var(--ab-on-accent-deep);
  padding: 15px 34px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.yearband__cta:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   03. How we work — four steps
   ========================================================================== */

.proc { padding: 0 0 72px; }

.proc__head {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 46px 0 34px;
}

.proc__stack {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.proc__note {
  margin: 0 0 0 auto;
  max-width: 400px;
  padding-bottom: 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

.proc__board { position: relative; margin: 0 var(--gutter); }

.proc__path {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 74px;
  pointer-events: none;
}

.proc__plane {
  position: absolute;
  right: 6px;
  top: -8px;
  width: 30px;
  height: 30px;
  color: var(--accent);
  transform: rotate(34deg);
}

.steps4 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 74px;
}

.pstep {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 30px;
}

.pstep--mid,
.pstep--end {
  padding-left: 30px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.2);
}

.pstep--end { padding-right: 0; }

.pstep__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.pstep__no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ab-on-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 19px;
  font-weight: 600;
}

.pstep__code {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.pstep__who {
  margin-left: auto;
  border: 2px solid rgba(var(--ink-rgb), 0.3);
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}

.pstep__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.pstep__text {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0.8;
  text-wrap: pretty;
}

.pstep__foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.4);
}

.pstep__figure {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}

.pstep__unit {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.pstep__tag {
  margin-left: auto;
  color: rgba(var(--ink-rgb), 0.55);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pstep__tag--accent { color: var(--accent); }

/* the last step is ours again, so it drops back to ink */

.pstep--end .pstep__no { background: var(--ab-tab-bg); color: var(--ab-tab-num); }

.pstep--end .pstep__code { color: var(--ink); }

.proc__foot {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 44px var(--gutter) 0;
  padding-top: 22px;
  border-top: 3px solid var(--ink);
}

.proc__foot-figure {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.proc__foot-text {
  max-width: 460px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.proc__cta {
  margin-left: auto;
  background: var(--accent);
  color: var(--ab-on-accent);
  padding: 16px 36px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out;
}

.proc__cta:hover { background: var(--ink); }

/* ==========================================================================
   04. The office — six ID cards
   ========================================================================== */

.staff { padding: 0 0 70px; }

.staff__head {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 44px 0 34px;
}

.staff__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.staff__stack .display--about { font-size: 92px; }

.staff__stack .script--about { font-size: 74px; }

.staff__note {
  margin: 0 0 0 auto;
  max-width: 400px;
  padding-bottom: 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

.staff__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 0 var(--gutter);
}

.scard {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--ab-card-border);
}

.scard--accent { border-color: var(--accent); }

.scard__photo {
  position: relative;
  flex: none;
  width: 196px;
  overflow: hidden;
  border-right: 2px solid var(--ab-card-border);
}

.scard--accent .scard__photo { border-right-color: var(--accent); }

/* the portrait fills its column so the card's height comes from the text */
.scard__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scard__no {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--ab-tab-bg);
  color: var(--ab-tab-num);
  padding: 5px 11px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.scard--accent .scard__no { background: var(--accent); color: var(--ab-on-accent); }

.scard__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent);
  color: var(--ab-on-accent);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

.scard__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px 16px;
}

.scard__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.scard__name {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.scard__role {
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scard__tenure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.scard__tenure .t { height: 8px; background: rgba(var(--ink-rgb), 0.16); }

.scard__tenure .t.is-on { background: var(--accent); }

.scard__since {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

.scard__yrs {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--accent);
  opacity: 1;
}

.scard__fact {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.8;
  text-wrap: pretty;
}

.scard__foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.35);
}

.scard--accent .scard__foot { border-top-color: rgba(var(--accent-rgb), 0.5); }

.scard__regions {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.scard__langs {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--accent);
  white-space: nowrap;
}

.staff__foot,
.guides__foot,
.papers__foot {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 40px var(--gutter) 0;
  padding-top: 22px;
  border-top: 3px solid var(--ink);
}

.guides__foot {
  margin-top: 34px;
  padding-top: 0;
  border-top: 0;
}

.papers__foot { margin-top: 36px; }

.staff__foot { align-items: center; }

.staff__foot-text,
.guides__foot-text,
.papers__foot-text {
  max-width: 520px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.staff__foot-text { max-width: none; }

.guides__foot-figure,
.papers__foot-figure {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.staff__cta,
.papers__cta {
  margin-left: auto;
  border: 2px solid var(--accent);
  padding: 15px 34px;
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.staff__cta:hover,
.papers__cta:hover {
  background: var(--accent);
  color: var(--cta-label);
}

.guides__cta {
  margin-left: auto;
  background: var(--accent);
  color: var(--ab-on-accent-deep);
  padding: 15px 34px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out;
}

.guides__cta:hover { background: var(--ink); }

/* ==========================================================================
   05. Guides on the ground — five regions
   ========================================================================== */

.guides { padding: 0 0 64px; }

.guides__head {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 44px 0 32px;
}

.guides__stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.guides__stack .display--about { font-size: 90px; }

.guides__stack .script--about { font-size: 72px; }

.guides__note {
  margin: 0 0 0 auto;
  max-width: 400px;
  padding-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

.gregion {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 var(--gutter);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

[data-theme="dark"] .gregion {
  border-top-color: rgba(var(--ink-rgb), 0.45);
  border-bottom-color: rgba(var(--ink-rgb), 0.45);
}

.gcol {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(var(--ink-rgb), 0.2);
}

.gcol--first { border-left: 0; }

.gcol__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 18px;
  border-bottom: 2px solid var(--ink);
}

[data-theme="dark"] .gcol__head { border-bottom-color: rgba(var(--ink-rgb), 0.45); }

.gcol--first .gcol__head { padding-left: 0; }

.gcol--last .gcol__head { padding-right: 0; }

.gcol__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.gcol__no {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.gcol__tag {
  border: 1px solid rgba(var(--ink-rgb), 0.4);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.gcol__count {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.gcol__name {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.05;
}

.gcol__years {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.gcol__list {
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}

.gcol--first .gcol__list { padding-left: 0; }

.gcol--last .gcol__list { padding-right: 0; }

.grow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
}

.grow + .grow { border-top: 1px dashed rgba(var(--ink-rgb), 0.3); }

.gdisc {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 21px;
  font-weight: 600;
}

/* the owner asked for faces here: the disc holds a portrait, the longest-serving
   guide in each region keeps the solid accent ring */

.gdisc__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.gdisc--lead {
  background: var(--accent);
  color: var(--ab-on-accent-deep);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.grow__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.grow__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.grow__meta {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  opacity: 0.6;
}

.grow__fact {
  padding-top: 2px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.75;
  text-wrap: pretty;
}

/* ==========================================================================
   06. Licence & guarantees — four papers
   ========================================================================== */

.papers { padding: 0 0 70px; }

.papers__head {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 44px 0 34px;
}

.papers__stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.papers__stack .display--about { font-size: 92px; }

.papers__stack .script--about { font-size: 74px; }

.papers__note {
  margin: 0 0 0 auto;
  max-width: 400px;
  padding-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

.papers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin: 0 var(--gutter);
}

.paper {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ab-card-border);
}

.paper--accent { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05); }

.paper__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  background: var(--ab-tab-bg);
  color: var(--ab-tab-ink);
  padding: 11px 18px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.paper--accent .paper__tab { background: var(--accent); color: var(--ab-on-accent-deep); }

.paper__cat { margin-left: auto; color: var(--ab-tab-accent); }

.paper--accent .paper__cat { color: inherit; }

.paper__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 22px;
}

.seal {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 104px;
  height: 104px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  transform: rotate(-8deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-align: center;
}

.seal--tilt { transform: rotate(8deg); }

.seal__line--mid {
  border-top: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  padding: 2px 8px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: normal;
}

.seal__line:last-child {
  font-size: 10px;
  letter-spacing: 0.22em;
  opacity: 0.8;
}

.paper__figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 104px;
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 86px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.paper--accent .paper__figure { color: var(--accent); }

.paper__figure-value { line-height: 1; }

.paper__figure-unit {
  line-height: normal;
  font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}

.paper__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paper__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paper__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
}

.paper__text {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.42;
  opacity: 0.8;
  text-wrap: pretty;
}

.paper__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 16px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.4);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.paper--accent .paper__meta { border-top-color: rgba(var(--accent-rgb), 0.5); }

.paper__label { opacity: 0.5; }

.paper__value {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--accent);
  white-space: nowrap;
}

.paper__second {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ==========================================================================
   07. Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .yearband__stack .display--about { font-size: 74px; }

  .display--about,
  .staff__stack .display--about,
  .guides__stack .display--about,
  .papers__stack .display--about {
    font-size: 74px;
  }

  .staff__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .papers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

  .frame__body,
  .frame + .frame .frame__body {
    padding: 18px 0 20px;
    border-left: 0;
  }

  .frame--hot .frame__body { padding: 18px 18px 20px; }

  .gregion { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gcol { border-left: 1px solid rgba(var(--ink-rgb), 0.2); }

  .gcol--first { border-left: 0; }

  .gcol--first .gcol__head,
  .gcol--first .gcol__list {
    padding-left: 22px;
  }

  .gcol--last .gcol__head,
  .gcol--last .gcol__list {
    padding-right: 22px;
  }
}

@media (max-width: 1000px) {
  .yearband { padding-bottom: 40px; }

  .yearband__head { padding: 26px 0 20px; gap: 14px; }

  .yearband__note {
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    font-size: 18px;
  }

  .yearcell { flex: 1 1 150px; padding: 12px 14px; }

  .yearcell__label { font-size: 14px; }

  .yearband__rail { margin-top: 22px; padding-top: 16px; gap: 14px; }

  .yearband__cta { margin-left: 0; padding: 13px 24px; font-size: 16px; }

  .display--about,
  .staff__stack .display--about,
  .guides__stack .display--about,
  .papers__stack .display--about {
    font-size: clamp(34px, 7vw, 56px);
  }

  .script--about,
  .staff__stack .script--about,
  .guides__stack .script--about {
    font-size: clamp(34px, 8vw, 56px);
    padding-top: 14px;
    white-space: normal;
  }

  .letterhead { gap: 12px; font-size: 13px; }

  .letterhead__code { display: none; }

  .proc,
  .staff,
  .guides,
  .papers {
    padding-bottom: 40px;
  }

  .proc__head,
  .staff__head,
  .guides__head,
  .papers__head {
    padding: 26px 0 20px;
    gap: 14px;
  }

  .proc__note,
  .staff__note,
  .guides__note,
  .papers__note {
    margin-left: 0;
    text-align: left;
    padding-bottom: 0;
    font-size: 18px;
  }

  .proc__path,
  .proc__plane {
    display: none;
  }

  .steps4 {
    grid-template-columns: 1fr;
    padding-top: 0;
    gap: 26px;
  }

  .pstep,
  .pstep--mid,
  .pstep--end {
    padding: 0;
    border-left: 0;
  }

  .pstep--mid,
  .pstep--end {
    padding-top: 24px;
    border-top: 1px solid rgba(var(--ink-rgb), 0.2);
  }

  .proc__foot,
  .staff__foot,
  .guides__foot,
  .papers__foot {
    margin-top: 28px;
    padding-top: 20px;
    gap: 14px;
  }

  .proc__cta,
  .staff__cta,
  .guides__cta,
  .papers__cta {
    margin-left: 0;
    padding: 13px 24px;
    font-size: 16px;
  }

  .staff__grid,
  .papers__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .scard__photo { width: 132px; }

  .scard__name { font-size: 28px; }

  .gregion { grid-template-columns: minmax(0, 1fr); }

  .gcol { border-left: 0; }

  .gcol + .gcol { border-top: 1px solid rgba(var(--ink-rgb), 0.2); }

  .gcol__head,
  .gcol--first .gcol__head,
  .gcol--last .gcol__head,
  .gcol__list,
  .gcol--first .gcol__list,
  .gcol--last .gcol__list {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  .frames { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .frame__shot { height: 320px; }

  .frame__name { font-size: 34px; }

  .frame__meta { min-width: 0; }

  .frame__routes,
  .frame__regions { white-space: normal; }

  .letterhead { padding: 14px 0 12px; }

  .letterhead__tag { padding: 4px 10px; }

  .scard { flex-direction: column; }

  .scard__photo {
    width: 100%;
    height: 220px;
    border-right: 0;
    border-bottom: 2px solid var(--ab-card-border);
  }

  .scard--accent .scard__photo { border-bottom-color: var(--accent); }

  .paper__figure { font-size: 64px; }
}

@media (max-width: 430px) {
  .pstep__title { font-size: 26px; }

  .scard__photo { height: 190px; }

  .seal { width: 88px; height: 88px; }
}