/* giyotin_v2 (2026-10-08): giyotin_v1 plus the giyotin team's update (his PDF). Served at giyotin.solac.studio/v2; v1 stays at the root.
 w5 the cut: the logo's own gap (25.5 deg, rising to the right) is the layout device. Every surface is split by the blade. Ground is the logo's ink itself. */
:root {
  --ink: #231F20; --black: #0d0b0b; --deep: #060505; --fg: #F2EFEA; --muted: #A8A29D; --dim: #6b6560; --line: rgba(242,239,234,.16);
  --red: #BE260D; --red-text: #E8452C;
  --head: "Archivo", Inter, system-ui, sans-serif; --sans: Inter, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --tan: 0.477; /* tan 25.5 deg */
}
html, body { background: var(--ink); color: var(--fg); font: 400 16px/1.5 var(--sans); overflow-x: hidden; }
.wrap { width: min(1320px, calc(100% - 96px)); margin: 0 auto; }
.k { font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--red-text); }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 26px 48px; position: relative; z-index: 6; }
.nav .logo { width: 76px; height: 76px; }
.nav ul { display: flex; gap: 34px; font: 800 13px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; }
.nav ul a.on { color: var(--red-text); }

/* hero: a frame under, an ink plate over, cut along the blade */
.hero { position: relative; height: 900px; margin-top: -128px; overflow: hidden; }
.hero .under { position: absolute; inset: 0; }
.hero .under .ph { position: absolute; inset: 0; aspect-ratio: auto; --ph: radial-gradient(90% 90% at 78% 70%, #3a2d2b 0%, #171213 45%, #090707 100%); }
.hero .plate { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% calc(50% - 23.85vw), 0 calc(50% + 23.85vw)); }
.hero .blade { position: absolute; left: -10%; right: -10%; top: 50%; height: 4px; background: var(--red); transform: rotate(-25.5deg); transform-origin: center; z-index: 4; }
.hero .copy { position: absolute; left: 48px; top: 190px; z-index: 5; }
/* every hero text across the cut (his notes 2026-10-05): two copies, one per side of the blade, clipped like the plate; past the cut
   the texts turn cream white with a soft shadow, readable on any frame of the showreel (his pick C: "C'yi daha çok beğendim"), and
   wherever a screen puts the line ("bir cihazdan baktığımda çizgiye değiyor bir cihazdan baktığımda değmiyor") */
.hero .cut-top, .hero .cut-bot { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero .cut-top { clip-path: polygon(0 0, 100% 0, 100% calc(50% - 23.85vw), 0 calc(50% + 23.85vw)); }
.hero .cut-bot { clip-path: polygon(0 calc(50% + 23.85vw), 100% calc(50% - 23.85vw), 100% 100%, 0 100%); }
.hero .cut-top a, .hero .cut-bot a { pointer-events: auto; }
.hero .lbl { position: absolute; z-index: 2; font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; color: rgba(242,239,234,.72); }   /* base.css's .ph .lbl, now that the label rides the cut layers */   /* a link is hit only inside its own side's clip */
.hero .cut-bot .k, .hero .cut-bot h1, .hero .cut-bot h1 .r, .hero .cut-bot .tag, .hero .cut-bot .sub p, .hero .cut-bot .play,
.hero .cut-bot .lbl { color: var(--fg); text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6); }
.hero h1 { font: 900 min(96px, 6.6vw)/.86 var(--head); letter-spacing: -.04em; text-transform: uppercase; }   /* his four lines (2026-10-05) at 96, so "ready for delivery." keeps one line */
.hero h1 span { display: block; }
.hero h1 .r { color: var(--red-text); }
.hero .sub { position: absolute; right: 48px; bottom: 60px; z-index: 5; width: 460px; text-wrap: balance; text-align: right; }
.hero .sub p { font: 400 17px/1.5 var(--sans); color: var(--fg); }
.hero .sub .play { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font: 800 12px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; }
.hero .sub .play::before { content: ""; width: 0; height: 0; border-left: 14px solid var(--red-text); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.hero .reel-lbl { left: auto; right: 48px; bottom: auto; top: 150px; }
.hero .tag { position: absolute; left: 48px; bottom: 60px; z-index: 5; font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* slats: services as parallelograms sharing the same angle */
.slats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0 48px; margin-top: -6px; position: relative; z-index: 5; }
.slats div { background: var(--black); padding: 30px 22px 36px 36px; margin-left: -1px; clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%); min-height: 220px; }
.slats div:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); padding-left: 28px; }
.slats div:last-child { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
.slats i { font: 500 11px/1 var(--mono); color: var(--red-text); font-style: normal; letter-spacing: .1em; }
.slats h3 { margin-top: 36px; font: 900 19px/1.05 var(--head); text-transform: uppercase; letter-spacing: -.01em; }
.slats p { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* work: frames with the cut */
section.block { padding: 120px 0 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
h2 { margin-top: 14px; font: 900 72px/.9 var(--head); letter-spacing: -.035em; text-transform: uppercase; }
.head .more { font: 800 12px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); }
.cut { position: relative; overflow: hidden; }
.cut .ph { aspect-ratio: 16 / 9; }
.cut .top { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% calc(50% - 0.2385 * var(--w)), 0 calc(50% + 0.2385 * var(--w))); }
.cut .top .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.cut .line { position: absolute; left: -20%; right: -20%; top: 50%; height: 3px; background: var(--red); transform: rotate(-25.5deg); z-index: 4; }
.cut.shift .top { transform: translate(-14px, -8px); }
.cut.shift .bottom-ph { transform: translate(14px, 8px); }
.cut.shift .line { height: 4px; }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wgrid figure.big { grid-column: 1 / -1; }
.wgrid figcaption { margin-top: 16px; display: flex; justify-content: space-between; gap: 16px; }
.wgrid figcaption b { display: block; font: 900 26px/1 var(--head); text-transform: uppercase; letter-spacing: -.02em; }
.wgrid figcaption span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }
.wgrid figcaption .yr { font: 500 12px/1 var(--mono); color: var(--dim); margin-top: 6px; }

/* about + contact: one plate cut in two */
.plate2 { position: relative; margin-top: 120px; min-height: 820px; overflow: hidden; }
.plate2 .bg { position: absolute; inset: 0; background: var(--black); clip-path: polygon(0 0, 100% 0, 100% calc(50% - 23.85vw), 0 calc(50% + 23.85vw)); }
.plate2 .bg2 { position: absolute; inset: 0; background: var(--deep); clip-path: polygon(100% calc(50% - 23.85vw), 100% 100%, 0 100%, 0 calc(50% + 23.85vw)); }
.plate2 .bl { position: absolute; left: -10%; right: -10%; top: 50%; height: 4px; background: var(--red); transform: rotate(-25.5deg); z-index: 3; }
.plate2 .about { position: relative; z-index: 4; padding: 96px 48px 64px; max-width: 720px; }
.plate2 .about p.lead { margin-top: 24px; font: 700 34px/1.2 var(--head); letter-spacing: -.02em; text-transform: uppercase; }
.plate2 .about p.body { margin-top: 20px; color: var(--muted); max-width: 52ch; }
.plate2 .facts { display: flex; gap: 40px; margin-top: 28px; }
.plate2 .facts div b { display: block; font: 900 36px/1 var(--head); }
.plate2 .facts div span { display: block; margin-top: 6px; font: 500 10px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* his note 2026-10-05 (4, "uygun yere, revizyon notundaki yerine göre"): the three ways of working stand between about and contact,
   cut like the slats; contact follows them in the flow, on the right */
.plate2 .models { position: relative; z-index: 4; padding: 0 48px; }
.plate2 .mgrid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.plate2 .mgrid div { background: rgba(35,31,32,.92); padding: 30px 40px 36px 44px; margin-left: -1px; clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%); min-height: 200px; }
.plate2 .mgrid div:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); padding-left: 28px; }
.plate2 .mgrid div:last-child { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
.plate2 .mgrid i { font: 500 11px/1 var(--mono); color: var(--red-text); font-style: normal; letter-spacing: .1em; }
.plate2 .mgrid h3 { margin-top: 32px; font: 900 22px/1 var(--head); text-transform: uppercase; letter-spacing: -.01em; }
.plate2 .mgrid p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.plate2 .contact { position: relative; z-index: 4; margin: 0 48px 0 auto; padding: 72px 0 80px; width: 620px; max-width: calc(100% - 96px); text-align: right; }
.plate2 .contact .mail { display: inline-block; margin-top: 18px; font: 900 50px/1 var(--head); letter-spacing: -.03em; text-transform: lowercase; }
.plate2 .contact dl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; text-align: right; }
.plate2 .contact dt { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); }
.plate2 .contact dd { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }

footer { padding: 36px 48px; display: flex; justify-content: space-between; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
footer .logo { width: 44px; }

/* work page */
.page { position: relative; padding: 40px 0 60px; }
.page h1 { font: 900 170px/.86 var(--head); letter-spacing: -.045em; text-transform: uppercase; }
.page h1 .r { color: var(--red-text); }
.page .filters { margin-top: 40px; display: flex; gap: 28px; font: 800 12px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); align-items: center; }
.page .filters a.on { color: var(--fg); border-bottom: 3px solid var(--red); padding-bottom: 6px; }
.page .filters .count { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--dim); letter-spacing: .14em; }
.open { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.open .meta { padding-top: 6px; }
.open .meta h2 { font-size: 56px; }
.open .meta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 28px; }
.open .meta dt { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); }
.open .meta dd { margin-top: 8px; color: var(--muted); font-size: 14px; }
.open .meta p { margin-top: 24px; color: var(--muted); font-size: 14px; }
.open .stills { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wgrid figure.hover .top { transform: translate(-8px, -5px); }
.wgrid figure.hover .bottom-ph { transform: translate(8px, 5px); }
.wgrid figure.hover figcaption b { color: var(--red-text); }
.wgrid .hint { grid-column: 1 / -1; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

@media (max-width: 720px) {
  .wrap { width: calc(100% - 40px); }
  .nav { padding: 16px 20px; }
  .nav .logo { width: 54px; height: 54px; }
  .nav ul { display: none; }
  .hero { height: 700px; margin-top: -86px; }
  .hero .copy { left: 20px; top: 96px; }
  .hero h1 { font-size: 36px; }
  .hero .reel-lbl { display: none; }
  .hero .sub { right: 20px; left: 20px; width: auto; bottom: 90px; text-align: left; }
  .hero .sub p { font-size: 15px; }
  .hero .reel-lbl { left: auto; right: 48px; bottom: auto; top: 150px; }
.hero .tag { bottom: 24px; left: 20px; }
  .slats { grid-template-columns: 1fr 1fr; padding: 0 20px; gap: 6px; }
  .slats div, .slats div:first-child, .slats div:last-child { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: 20px 18px 24px 24px; min-height: 0; margin-left: 0; }
  .slats h3 { margin-top: 20px; font-size: 16px; }
  .slats p { font-size: 12px; }
  section.block { padding-top: 64px; }
  h2 { font-size: 42px; }
  .head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .wgrid { grid-template-columns: 1fr; }
  .wgrid figcaption b { font-size: 20px; }
  .cut.shift::after { font-size: 9px; }
  .plate2 { margin-top: 64px; min-height: 0; }
  .plate2 .bg { clip-path: polygon(0 0, 100% 0, 100% calc(50% - 23.85vw - 120px), 0 calc(50% + 23.85vw - 120px)); }
  .plate2 .bg2 { clip-path: polygon(100% calc(50% - 23.85vw - 120px), 100% 100%, 0 100%, 0 calc(50% + 23.85vw - 120px)); }
  .plate2 .bl { top: calc(50% - 120px); }
  .plate2 .about { padding: 48px 20px 40px; }
  .plate2 .about p.lead { font-size: 22px; }
  .plate2 .facts { gap: 24px; flex-wrap: wrap; }
  .plate2 .facts div b { font-size: 26px; }
  .plate2 .models { padding: 0 20px; }
  .plate2 .mgrid { grid-template-columns: 1fr; gap: 6px; }
  .plate2 .mgrid div, .plate2 .mgrid div:first-child, .plate2 .mgrid div:last-child { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: 20px 24px 24px; min-height: 0; margin-left: 0; }
  .plate2 .mgrid h3 { margin-top: 16px; font-size: 16px; }
  .plate2 .mgrid p { font-size: 13px; }
  .plate2 .contact { width: auto; max-width: none; margin: 0; text-align: left; padding: 72px 20px 48px; }
  .plate2 .contact .mail { font-size: 26px; }
  .plate2 .contact dl { grid-template-columns: 1fr 1fr; text-align: left; }
  footer { padding: 24px 20px; flex-direction: column; gap: 14px; }
  .page h1 { font-size: 80px; }
  .page .filters { flex-wrap: wrap; gap: 14px 18px; }
  .page .filters .count { margin-left: 0; flex-basis: 100%; }
  .open { grid-template-columns: 1fr; gap: 24px; }
  .open .meta h2 { font-size: 36px; }
  .open .stills { grid-template-columns: 1fr 1fr; }
}

/* demo images: a real still instead of the dark placeholder ground */
.ph.img::before { background: var(--im) center / cover no-repeat; }
.ph.img::after { opacity: .06; }
.hero .under .ph.img::before { background-position: 62% 40%; filter: brightness(.8); }
p.demo { margin: -24px 0 36px; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.page p.demo { margin: 22px 0 0; }
.open .stills { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .open .stills { grid-template-columns: 1fr 1fr; } }

/* 2026-10-08, the giyotin team's update (his PDF): the headline's first word carries the weight, the rest is an italic serif, as
   in their "style 01 · swiss grid" reference; the last line keeps the blade's red. The serif is Instrument Serif italic (OFL),
   kept with the other fonts in /proposals/_shared/fonts. */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: block; src: url("/proposals/_shared/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: block; src: url("/proposals/_shared/fonts/instrument-serif-italic-latin.woff2") format("woff2"); }
.hero h1 b { font-weight: 900; }
.hero h1 em { font: italic 400 .8em/.86 "Instrument Serif", Georgia, serif; text-transform: none; letter-spacing: -.01em; color: var(--muted); margin-left: .08em; }
.hero h1 .r b { color: var(--fg); }
.hero h1 .r em { color: var(--red-text); }
.hero .cut-bot h1 em { color: inherit; opacity: .78; }
@media (min-width: 721px) and (max-width: 1200px) { .slats { grid-template-columns: repeat(3, 1fr); row-gap: 6px; } .plate2 .mgrid { grid-template-columns: repeat(2, 1fr); row-gap: 6px; } }

/* his v2 notes 2026-10-08: the first screen fits a wide screen whole; one real work; the address on one wide block; the foot links work */
.hero { height: max(640px, 100svh); }
@media (min-width: 721px) { .hero .under .ph.img::before { background: linear-gradient(to bottom, #181314 22vh, rgba(24,19,20,0) 42vh), var(--im) left 0 top 22vh / 120% auto no-repeat, #181314; } }   /* Umami: both faces below the blade, the marks below the fold, the still's top edge fades into the ground */
.plate2 .contact dl { grid-template-columns: 1fr; }
.plate2 .contact .addr dd { font-size: 15px; }
footer .flinks a { color: inherit; text-decoration: none; }
footer .flinks a:hover { color: var(--fg); }
html { scroll-behavior: smooth; }

/* the update's order (their notes): hero, How we work, Our pipeline, then the work and About. How we work is the strip under the hero */
.slats.four { grid-template-columns: repeat(4, 1fr); }
.slats.four::before, .slats.six::before { content: "How we work"; position: absolute; left: 48px; top: -27px; z-index: 1; padding: 8px 14px 7px; background: var(--black); font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--red-text); }
.pipe { margin-top: 110px; }
.pipe .wrap { margin-bottom: 22px; }
.pipe .slats { margin-top: 0; }
@media (min-width: 721px) and (max-width: 1200px) { .slats.four { grid-template-columns: repeat(2, 1fr); row-gap: 6px; } }
@media (max-width: 720px) { .slats.four::before, .slats.six::before { left: 20px; } .pipe { margin-top: 60px; } }

/* his notes 2026-10-08 (2): How we work stands BELOW the hero, not on it; Our pipeline's label is the same black tab; About gets a design
   of its own now the cards left it: the blade line as a headline (strong + italic serif, like the hero) with the intro above the cut,
   the two other paragraphs as two numbered pillars below it on the right, then contact */
.slats.four { margin-top: 64px; }
.pipe .wrap { margin-bottom: 0; }
.pipe .wrap .k { display: inline-block; padding: 8px 14px 7px; background: var(--black); margin-left: -48px; transform: translateX(48px); }
.pipe { margin-top: 90px; }
.pipe .slats { margin-top: 0; }
.plate2 .about { max-width: 900px; padding-top: 110px; }
.plate2 .about h2.lead { margin-top: 26px; font: 900 min(64px, 4.6vw)/1.02 var(--head); letter-spacing: -.035em; text-transform: uppercase; }
.plate2 .about h2.lead b { display: block; font-weight: 900; }
.plate2 .about h2.lead em { display: block; font: italic 400 1.1em/1 "Instrument Serif", Georgia, serif; text-transform: none; letter-spacing: -.01em; color: var(--red-text); }
.plate2 .about p.intro { margin-top: 26px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--fg); }
.plate2 .pillars { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; width: min(980px, calc(100% - 96px)); margin: 120px 48px 0 auto; }
.plate2 .pillars i { font: 500 11px/1 var(--mono); color: var(--red-text); font-style: normal; letter-spacing: .1em; }
.plate2 .pillars h3 { margin-top: 18px; font: 900 22px/1.1 var(--head); text-transform: uppercase; letter-spacing: -.01em; }
.plate2 .pillars p { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.plate2 .pillars > div { border-top: 2px solid var(--red); padding: 22px 26px 28px; background: var(--deep); }
@media (max-width: 720px) {
  .slats.four { margin-top: 48px; }
  .plate2 .about { padding-top: 56px; }
  .plate2 .about h2.lead { font-size: 30px; }
  .plate2 .pillars { grid-template-columns: 1fr; width: auto; margin: 64px 20px 0; gap: 36px; }
}

/* his catch: the two labels sat on different lines (one on the strip's edge, one on the page's centred column); both are now the
   same tab drawn by the strip itself, at the strip's own left edge */
.slats.six::before { content: "Our pipeline"; }
.pipe { margin-top: 118px; }

/* his notes: on a phone held upright How we work lost its cards past the first ones (the four-across rule came after the phone's
   own two-across rule and won); on a phone both strips are two across, as the pipeline was before */
@media (max-width: 720px) { .slats.four, .slats.six { grid-template-columns: 1fr 1fr; } }
.block .head .k + h2 { display: none; }

/* his note: the two About boxes lose their numbers and stand at the screen's centre */
.plate2 .pillars { margin: 120px auto 0; width: min(1080px, calc(100% - 96px)); grid-template-columns: 1fr 1fr; }
.plate2 .pillars h3 { margin-top: 0; }
@media (max-width: 720px) { .plate2 .pillars { width: auto; margin: 64px 20px 0; grid-template-columns: 1fr; } }

/* giyotin_v3 (2026-10-12), Oguz's V3 dump: About is the blade line and one paragraph; The team is new (portraits in black and white,
   IMDb and LinkedIn as small buttons under each name); Our pipeline follows the team; Contact is its own plate with Deliveries */
.plate2:not(.endplate) { min-height: 620px; }
.plate2.endplate { margin-top: 110px; min-height: 520px; }
.plate2.endplate .contact { padding-top: 120px; }
.team .people { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.team .person { border-top: 2px solid var(--red); padding-top: 28px; }
.team .face { width: 168px; height: 168px; border-radius: 50%; background: var(--im) center / cover no-repeat, var(--deep); filter: grayscale(1); }
.team .face.none { display: grid; place-items: center; font: 900 44px/1 var(--head); letter-spacing: -.02em; color: var(--dim); }
.team h3 { margin-top: 26px; font: 900 30px/1 var(--head); text-transform: uppercase; letter-spacing: -.02em; }
.team .role { margin-top: 10px; font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); }
.team .person p { margin-top: 16px; max-width: 52ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
.team .links { display: flex; gap: 10px; margin-top: 20px; }
.team .links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; background: var(--black); font: 800 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.team .links a:hover { color: var(--red-text); }
.team .links .ic { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; background: var(--fg); color: var(--black); font: 900 10px/1 var(--head); letter-spacing: 0; text-transform: none; }
.team + .pipe { margin-top: 140px; }
@media (max-width: 720px) {
  .team .people { grid-template-columns: 1fr; gap: 40px; }
  .team .face { width: 128px; height: 128px; }
  .team h3 { font-size: 24px; }
  .plate2.endplate .contact { padding-top: 72px; }
}