/* About and Contact: /about/ and /contact/.
   Built on the deals page system (deals.css: df-page, df-heading, df-underline,
   df-feature, df-signup) like the careers pages. The only decoration is the
   brand doodle set (WebP copies sized for these pages in assets/img/about/);
   every surface is a flat token colour. Only the pieces those two files have
   no equivalent for live here. ab- is About, ct- is Contact; the hero art and
   the section rhythm are shared. */

.ab-page, .ct-page { padding-bottom: 0; overflow-x: clip; }
.ab-page ::selection, .ct-page ::selection { background: var(--tud-color-accent-tint-border); color: var(--tud-color-text-primary); }
.ab-page :is(a, button):focus-visible, .ct-page :is(a, button):focus-visible { outline: 3px solid var(--site-accent-text); outline-offset: 4px; }
.ab-section { margin-top: 104px; }
.ab-section > .df-section-title { margin-bottom: 32px; }

.ab-hero { margin-bottom: 0; }
.df-heading.ab-hero p, .df-heading.ct-hero p { max-width: 54ch; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }
.ab-textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 5px; }

/* ---------- Hero ----------
   The heading art is a doodle on its own, larger than the deals heading
   sticker and tipped the same way, standing on a short hand-drawn ground line
   in the accent colour so it reads as placed rather than floating. */

.ab-hero-art { position: relative; flex: 0 0 300px; width: 300px; height: 300px; }
.ab-hero-art > .theme-art { position: absolute; inset: 0 0 18px; transform: rotate(4deg); }
.ab-hero-art img { width: 100%; height: 100%; object-fit: contain; }
.ab-hero-art::after { content: ''; position: absolute; left: 18%; right: 14%; bottom: 6px; height: 3px; border-radius: 3px; background: var(--site-accent-text); opacity: .7; transform: rotate(-2deg); }
.ct-hero-art { height: 240px; }
.ct-hero-art > .theme-art { transform: rotate(-3deg); }
.ct-hero-art::after { display: none; }

/* ---------- Why we exist ---------- */

.ab-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: end; margin-top: 112px; }
.ab-why-copy p { margin-top: 18px; max-width: 58ch; color: var(--tud-color-text-secondary); font-size: 18px; line-height: 1.65; }
.ab-pull { padding-top: 22px; border-top: 2px solid var(--tud-color-text-primary); }
.ab-pull-line { font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.ab-pull p + p { margin-top: 16px; max-width: 42ch; font-size: 18px; line-height: 1.55; }

/* ---------- Vision and mission ----------
   The page's one loud moment: two flat panels carrying the two statements at
   display size, offset so they read as a pair rather than a row of cards.
   Vision is the accent itself, whose text is ink in both themes (the token's
   text-on-accent); mission is a deal panel pastel that follows the theme. Each
   carries one doodle in its heading row, clear of the statement. */

.ab-creed { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px 28px; align-items: start; margin-top: 112px; }
.ab-statement { position: relative; padding: clamp(32px, 4vw, 52px) clamp(30px, 4vw, 52px) clamp(40px, 4.8vw, 60px); border-radius: 20px; color: var(--tud-color-text-primary); }
.ab-statement--vision { color: var(--tud-color-text-on-accent); background: var(--tud-color-accent-base); }
.ab-statement--mission { margin-top: 96px; }
.ab-statement-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ab-statement h2 { padding-bottom: 6px; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.ab-statement-art { flex: none; display: block; width: 104px; height: 96px; margin: -8px -6px 0 0; }
.ab-statement-art img { width: 100%; height: 100%; object-fit: contain; }
.ab-statement--vision .ab-statement-art { transform: rotate(8deg); }
.ab-statement--mission .ab-statement-art { transform: rotate(-5deg); }
.ab-statement p { margin-top: 18px; max-width: 21ch; font-size: clamp(27px, 3vw, 40px); font-weight: 800; line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; }
.ab-statement--mission p { max-width: 19ch; }

/* The panels rise into place as they scroll in: the one authored motion.
   They are fully visible by default; the animation only runs where the
   browser drives it from scroll and the visitor has not asked for less. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-statement { animation: ab-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .ab-statement-art { animation: ab-tip linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
}
@keyframes ab-rise { from { transform: translateY(40px); } to { transform: none; } }
@keyframes ab-tip { from { rotate: -14deg; scale: .86; } to { rotate: 0deg; scale: 1; } }

/* ---------- What we believe ----------
   Four beliefs, not a sequence, so no numbers: a doodle tile on the deal
   panel colours and the careers page's ruled list. */

.ab-beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; padding: 0; list-style: none; }
.ab-beliefs li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; align-items: start; padding-block: 26px; border-top: 2px solid var(--tud-color-border-strong); }
.ab-tile { display: grid; place-items: center; width: 76px; height: 76px; padding: 10px; border-radius: 14px; }
.ab-tile img { width: 100%; height: 100%; object-fit: contain; }
.ab-beliefs h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.ab-beliefs p { margin-top: 8px; max-width: 44ch; color: var(--tud-color-text-secondary); font-size: 16px; line-height: 1.6; }
.ab-beliefs a { font-weight: 700; white-space: nowrap; }

/* ---------- How it works ----------
   A real sequence, so it is numbered: the numerals in Space Grotesk, joined
   by the dashed line the careers steps use. */

.ab-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 36px 0 0; list-style: none; counter-reset: ab-step; border-top: 1px solid var(--tud-color-border-strong); }
.ab-how li { position: relative; counter-increment: ab-step; }
.ab-how li::before { content: counter(ab-step); display: block; margin-bottom: 18px; color: var(--site-accent-text); font-family: var(--tud-font-secondary); font-size: 64px; font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ab-how li:not(:last-child)::after { content: ''; position: absolute; top: 30px; left: 58px; right: 8px; border-top: 1.5px dashed var(--site-control-border); }
.ab-how strong { display: block; font-size: 19px; line-height: 1.3; }
.ab-how span { display: block; margin-top: 8px; max-width: 32ch; color: var(--tud-color-text-secondary); line-height: 1.6; }

/* ---------- Brands and ambassadors ----------
   Two tickets in the deals page's featured-card shape, each one link. */

.ab-join { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ab-ticket.df-feature { grid-template-columns: minmax(0, 1fr) 150px; gap: 20px 24px; padding: 34px 34px 0; }
.ab-ticket h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.03em; }
.ab-ticket .df-feature-copy p { margin-top: 14px; max-width: 42ch; font-size: 17px; line-height: 1.55; }
.ab-ticket .df-feature-copy .ab-ticket-fine { font-size: 15px; font-weight: 600; }
.ab-ticket > .df-art { height: 150px; align-self: start; }
.ab-ticket > .df-art .theme-art img { padding: 0; }
.ab-ticket .df-feature-bottom { margin-top: 8px; }
.ab-ticket .df-feature-bottom svg { flex: none; transition: transform var(--tud-duration-fast) var(--tud-ease-standard); }
.ab-ticket:hover .df-feature-bottom svg { transform: translateX(4px); }

/* ---------- Who runs it ----------
   Room is left under the copy for a team strip (.ab-team) later. */

.ab-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 72px; padding-top: 36px; border-top: 1px solid var(--tud-color-border-strong); }
.ab-who > .df-section-title { margin-bottom: 0; }
.ab-who-copy p { max-width: 50ch; font-size: 18px; line-height: 1.6; }
.ab-who-copy p + p { margin-top: 12px; color: var(--tud-color-text-secondary); }
.ab-close { margin-top: 104px; margin-bottom: 96px; }

/* ---------- Contact: one slip per need ---------- */

.ct-hero-art { height: 250px; }
.ct-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
/* The doodle sits in the slip's top corner, out of the flow, so the address
   always gets the slip's full width and never breaks mid-word. */
.ct-need { position: relative; min-width: 0; padding: 32px 32px 34px; border-radius: 16px; color: var(--tud-color-text-primary); }
.ct-need--students { grid-column: 1 / -1; padding: 44px 48px 46px; }
.ct-need h2, .ct-need-copy > h2 + p { padding-right: 132px; }
.ct-need--students .ct-need-copy { max-width: 640px; }
.ct-need--students h2, .ct-need--students .ct-need-copy > h2 + p { padding-right: 0; }
.ct-need--press { grid-column: 1 / -1; }
.ct-need h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.03em; }
.ct-need--students h2 { font-size: clamp(30px, 3.4vw, 42px); }
.ct-need-copy > p { margin-top: 10px; max-width: 48ch; font-size: 17px; line-height: 1.55; }
.ct-address { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 18px !important; }
.ct-address a { display: inline-block; padding-block: 6px; color: var(--tud-color-text-primary); font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-decoration: underline; text-decoration-color: var(--tud-color-accent-base); text-decoration-thickness: 3px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.ct-address a:hover { text-decoration-thickness: 4px; }
.ct-need--students .ct-address a { font-size: clamp(22px, 2.8vw, 34px); }
.ct-copy { min-height: 36px; padding: 6px 14px; border: 1.5px solid currentColor; border-radius: var(--tud-radius-pill); color: var(--tud-color-text-primary); background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; }
.ct-copy:hover { background: var(--tud-color-bg-surface); }
.ct-copy.is-done { border-color: transparent; background: var(--tud-color-bg-surface); }
.ct-more { font-size: 16px !important; }
.ct-more a { color: var(--tud-color-text-primary); font-weight: 700; text-underline-offset: 4px; }
.ct-more .ct-go { display: inline-flex; align-items: center; min-height: 44px; }
.ct-art { position: absolute; top: 26px; right: 26px; width: 118px; height: 110px; }
.ct-art img { width: 100%; height: 100%; object-fit: contain; }
.ct-need--students .ct-art { top: 50%; right: 64px; width: 230px; height: 200px; transform: translateY(-50%); }
.ct-status { min-height: 1px; }

.ct-follow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 56px; align-items: start; }
.ct-follow p { margin-top: 10px; color: var(--tud-color-text-secondary); font-size: 17px; }
.ct-follow > div > .df-section-title { margin-bottom: 0; }
.ct-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ct-social a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 14px; border: 1.5px solid var(--tud-color-border-strong); border-radius: var(--tud-radius-pill); color: var(--tud-color-text-primary); background: var(--tud-color-bg-surface); font-size: 15px; text-decoration: none; transition: border-color var(--tud-duration-fast) var(--tud-ease-standard), transform var(--tud-duration-fast) var(--tud-ease-standard); }
.ct-social a:hover { border-color: var(--tud-color-text-primary); transform: translateY(-2px); }
.ct-social svg { flex: none; }
.ct-social span { color: var(--tud-color-text-secondary); }
.ct-social strong { color: var(--tud-color-text-primary); font-weight: 700; }

.ct-fine { display: grid; gap: 10px; margin: 88px 0 96px; padding-top: 24px; border-top: 1px solid var(--tud-color-border-strong); color: var(--tud-color-text-secondary); font-size: 15px; line-height: 1.6; }
.ct-fine p { max-width: 66ch; }
.ct-fine a { font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .ab-join { grid-template-columns: 1fr; }
  .ab-creed { grid-template-columns: 1fr; gap: 20px; }
  .ab-statement { max-width: 640px; }
  .ab-statement--mission { justify-self: end; margin-top: 0; }
}

@media (max-width: 900px) {
  .ab-hero-art { flex-basis: 200px; width: 200px; height: 200px; }
  .ct-hero-art { height: 170px; }
  .ab-why, .ab-who, .ct-follow { grid-template-columns: 1fr; }
  .ct-needs { grid-template-columns: 1fr; }
  .ct-need--students .ct-art { top: 30px; right: 30px; width: 140px; height: 124px; transform: none; }
  .ct-need--students h2, .ct-need--students .ct-need-copy > h2 + p { padding-right: 150px; }
  .ab-why { gap: 36px; }
  .ab-beliefs { grid-template-columns: 1fr; }
  .ab-how ol { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .ab-how li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; }
  .ab-how li::before { grid-row: span 2; margin: 0; font-size: 48px; }
  .ab-how li:not(:last-child)::after { top: 52px; bottom: -20px; left: 16px; right: auto; border-top: 0; border-left: 1.5px dashed var(--site-control-border); }
}

@media (max-width: 600px) {
  .ab-section { margin-top: 72px; }
  .ab-section > .df-section-title { margin-bottom: 22px; }
  /* On a phone every doodle is centred in its own block, above its text,
     never beside it: the hero art over the heading, the statement and ticket
     doodles over their headings, the belief tiles over their lines and the
     contact doodles at the top of their slips. The text stays left aligned. */
  .df-heading.ab-hero, .df-heading.ct-hero { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .df-heading.ab-hero .ab-hero-art, .df-heading.ct-hero .ab-hero-art { position: relative; top: auto; right: auto; flex: none; align-self: center; width: 150px; height: 150px; margin: 0 0 4px; transform: none; }
  .ct-hero .ab-hero-art { width: 176px; height: 124px; }
  .ab-hero-art::after { bottom: 4px; height: 2px; }
  .df-heading.ab-hero h1, .df-heading.ct-hero h1 { padding-right: 0; font-size: clamp(34px, 10.4vw, 46px); }
  .ab-actions { gap: 4px 20px; margin-top: 24px; }
  .ab-actions .btn { width: 100%; }
  .ab-why { margin-top: 72px; gap: 28px; }
  .ab-why-copy p, .ab-pull p + p, .ab-who-copy p { font-size: 17px; }
  .ab-creed { margin-top: 64px; gap: 28px; }
  .ab-statement { padding: 26px 24px 32px; border-radius: 16px; }
  .ab-statement-head { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .ab-statement-art { align-self: center; width: 92px; height: 84px; margin: 0; }
  .ab-statement p { margin-top: 14px; font-size: clamp(25px, 7vw, 30px); }
  .ab-beliefs li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 24px; }
  .ab-tile { justify-self: center; width: 72px; height: 72px; padding: 9px; border-radius: 14px; }
  .ab-beliefs h3 { font-size: 18px; }
  .ab-ticket.df-feature { grid-template-columns: minmax(0, 1fr); padding: 24px 22px 0; gap: 14px; }
  .ab-ticket > .df-art { grid-row: 1; justify-self: center; width: 150px; height: 110px; }
  .ab-ticket .df-feature-copy p { font-size: 16px; }
  .ab-close { margin-top: 72px; margin-bottom: 56px; }
  .ab-close .btn { width: 100%; }

  .ct-needs { grid-template-columns: 1fr; gap: 16px; margin-top: 4px; }
  .ct-need, .ct-need--students { display: flex; flex-direction: column; padding: 24px 22px 26px; }
  .ct-need .ct-art, .ct-need--students .ct-art { position: static; order: -1; align-self: center; width: 104px; height: 92px; margin-bottom: 12px; transform: none; }
  .ct-need h2, .ct-need--students h2, .ct-need-copy > h2 + p, .ct-need--students .ct-need-copy > h2 + p { padding-right: 0; }
  .ct-need-copy > p { font-size: 16px; }
  .ct-need--students h2 { font-size: 32px; }
  .ct-address a, .ct-need--students .ct-address a { font-size: 20px; }
  /* One rhythm on every slip: the address, then Copy under it. */
  .ct-address { flex-direction: column; align-items: flex-start; }
  .ct-copy { min-height: 44px; padding-inline: 18px; }
  .ct-social { gap: 10px; }
  .ct-social li { flex: 1 1 100%; }
  .ct-social a { width: 100%; }
  .ct-fine { margin: 64px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-ticket .df-feature-bottom svg, .ct-social a { transition: none; }
}