@font-face {
  font-family: 'Instrument Serif';
  src: url('/matter/assets/instrument-serif-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/matter/assets/instrument-serif-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.matter-page {
  --paper: #ebe9e5;
  --ink: #111110;
  --surface: #d8d6d1;
  --accent: #d7ff45;
  --frame: clamp(20px, 3.1vw, 54px);
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
.matter-page p, .matter-page h1, .matter-page h2, .matter-page h3, .matter-page figure, .matter-page blockquote { margin: 0; }
.matter-page a { color: inherit; text-decoration: none; }
.matter-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.matter-page button { font: inherit; }
.matter-page a, .matter-page button { transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.matter-page a:focus-visible, .matter-page button:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
.matter-page a:active, .matter-page button:active { transform: translateY(2px); }
.frame { margin-inline: var(--frame); }
.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 20; top: 12px; left: var(--frame); width: auto; height: auto; padding: 12px 18px; margin: 0; clip: auto; background: var(--paper); color: var(--ink); }
.hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding-top: 40px; }
.hero-nav { display: flex; gap: clamp(25px, 4vw, 65px); font-size: 16px; line-height: 1.2; }
.hero-nav a { white-space: nowrap; }
.hero-nav a:hover { color: var(--accent); }

.hero { position: relative; height: clamp(730px, calc(100svh - 69px), 950px); overflow: hidden; isolation: isolate; }
.hero-role { position: absolute; top: 32px; left: var(--frame); background: var(--ink); padding: 15px 25px 19px 0; font-size: clamp(27px, 2.35vw, 36px); font-weight: 400; letter-spacing: -.035em; line-height: 1.14; }
.hero-intro { position: absolute; right: var(--frame); bottom: 47px; width: 260px; padding-left: 16px; background: var(--ink); }
.hero-intro p { font-size: 17px; line-height: 1.45; max-width: 235px; }
.contact-action { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; background: var(--accent); color: var(--ink) !important; padding: 15px 18px; max-width: 215px; font-size: 17px; font-weight: 600; }
.contact-action span { font-size: 25px; line-height: 1; }
.contact-action:hover { background: var(--paper); }

.work-section { padding-block: 96px 108px; background: var(--paper); color: var(--ink); }
.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 55px; }
.matter-page h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(62px, 8.5vw, 132px); font-weight: 400; font-style: italic; letter-spacing: -.055em; line-height: .94; }
.work-heading p { font-size: 18px; line-height: 1.4; padding-bottom: 5px; }
.work-composition { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: 6%; align-items: start; }
.project-index { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 15px; }
.project-index button { position: relative; display: block; width: 100%; border: 0; border-radius: 0; background: transparent; color: var(--ink); padding: 14px 52px 18px 14px; text-align: left; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(44px, 5.1vw, 78px); font-weight: 400; font-style: normal; letter-spacing: -.045em; line-height: .92; cursor: pointer; }
.project-index button > span:not(.index-arrow) { display: block; }
.project-index button:nth-child(2), .project-index button:nth-child(4) { padding-left: 11%; }
.project-index button[aria-pressed="true"] { background: var(--surface); font-style: italic; }
.project-index button:hover { background: #dfddd8; }
.project-index .index-arrow { position: absolute; right: 17px; top: 17px; font-family: Inter, Arial, sans-serif; font-size: 31px; line-height: 1; }
.project-preview { padding-top: 42px; }
.project-image { height: clamp(320px, 30.5vw, 460px); background: var(--surface); overflow: hidden; }
.project-image img {  }
.project-story { padding-top: 27px; }
.matter-page h3 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 450; line-height: 1.12; letter-spacing: -.04em; }
.project-story > p { max-width: 475px; margin-top: 22px; font-size: 18px; line-height: 1.5; }
.project-story > a { display: inline-flex; align-items: center; gap: 36px; margin-top: 28px; font-size: 17px; }
.project-story > a > span:last-child { font-size: 28px; line-height: 1; }
.project-story > a:hover { transform: translateX(5px); }
.project-fallback { display: grid; gap: 18px; margin-top: 32px; }
.project-fallback a { text-decoration: underline; text-underline-offset: 5px; }

.about-section { background: var(--ink); color: var(--paper); }
.about-composition{max-width:1536px;margin:auto;padding:100px clamp(24px,5vw,76px) 110px}
.about-intro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:12%;align-items:center}
.about-composition .about-title{font:italic 400 clamp(72px,8.2vw,126px)/.98 'Instrument Serif',Georgia,serif;letter-spacing:-.045em;margin:0 0 78px}
.team-metrics{display:grid;grid-template-columns:1fr 1fr 1.25fr;column-gap:44px;max-width:650px}
.about-composition .team-metric{margin:0}
.team-value{display:block;font:italic 400 clamp(66px,6.8vw,96px)/.9 'Instrument Serif',Georgia,serif;letter-spacing:-.055em;white-space:nowrap}
.team-value .team-percent{font-size:.62em;color:#d7ff45;letter-spacing:-.035em}
.team-label{display:block;margin-top:22px;font-size:16px;line-height:1.45}
.about-composition .team-ai-note{font-size:17px;line-height:1.6;margin:44px 0 0;max-width:42ch}
.about-composition .about-image{margin:0;justify-self:end;width:100%;max-width:350px;aspect-ratio:1122/1402}
.about-composition .about-image img{width:100%;height:100%;object-fit:cover;display:block}
.leadership-growth{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:12%;row-gap:52px;margin-top:150px;align-items:start}
.about-composition .leadership-statement{font:italic 400 clamp(48px,5.8vw,82px)/1.02 'Instrument Serif',Georgia,serif;letter-spacing:-.035em;margin:0}
.leadership-practices{grid-column:2;grid-row:1 / 3;display:grid;gap:42px;margin:0}
.leadership-practices dt{font-size:16px;line-height:1.4;color:#bcbcb4;margin-bottom:14px}
.leadership-practices dd{font-size:18px;line-height:1.55;margin:0;max-width:39ch}
.about-composition .leadership-close{grid-column:1;grid-row:2;max-width:33ch;font-size:22px;line-height:1.5;margin:0;align-self:end}
@media(max-width:1050px){
  .about-composition{padding:80px 40px}
.about-intro,.leadership-growth{column-gap:8%;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.team-metrics{gap:20px}
.team-label{font-size:15px}
.team-value{font-size:72px}
.about-composition .about-title{margin-bottom:64px}
.about-composition .team-ai-note{font-size:16px;margin-top:36px}
.leadership-growth{margin-top:120px;row-gap:40px}
.leadership-practices dd{font-size:17px}
.about-composition .leadership-close{font-size:20px}
.leadership-practices{gap:32px}}
@media(max-width:650px){
  .about-composition{padding:56px 22px 72px}
.about-intro{display:block}
.about-composition .about-title{font-size:70px;margin-bottom:48px}
.team-metrics{gap:20px;grid-template-columns:.85fr 1fr 1.1fr}
.team-value{font-size:60px}
.team-label{font-size:15px;line-height:1.4;margin-top:18px}
.about-composition .team-ai-note{font-size:16px;line-height:1.6;margin-top:32px}
.about-composition .about-image{margin-top:44px;width:72%;max-width:290px;aspect-ratio:4/3;margin-left:auto}
.leadership-growth{display:flex;flex-direction:column;gap:44px;margin-top:76px}
.about-composition .leadership-statement{font-size:46px;line-height:1.02}
.leadership-practices{gap:34px}
.leadership-practices dt{font-size:16px;margin-bottom:10px}
.leadership-practices dd{font-size:17px;line-height:1.55;max-width:36ch}
.about-composition .leadership-close{font-size:21px;line-height:1.5;margin-top:4px;max-width:30ch}}
@media(max-width:360px){
  .about-composition{padding-inline:20px}
.about-composition .about-title{font-size:64px}
.team-metrics{gap:12px;grid-template-columns:.9fr 1fr 1.2fr}
.team-value{font-size:54px}
.team-label{font-size:15px}
.about-composition .leadership-statement{font-size:40px}}

.contact-section { background: var(--surface); color: var(--ink); padding-block: 61px 45px; }
.contact-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 7%; align-items: end; }
.contact-composition h2 { grid-column: 1 / -1; font-size: 20.6vw; line-height: .9; letter-spacing: -.065em; margin-left: -.025em; }
.contact-image { grid-column: 1; grid-row: 2 / 4; width: 72%; height: 230px; overflow: hidden; margin-top: 20px !important; }
.contact-image img {  object-position: 50% 50%; }
.contact-details { grid-column: 2; display: flex; flex-direction: column; align-items: start; gap: 9px; padding-top: 28px; }
.contact-details .telegram-link { display: flex; gap: 36px; font-size: clamp(25px, 2.4vw, 36px); letter-spacing: -.035em; margin-bottom: 9px; }
.contact-details > a:not(.telegram-link) { font-size: 17px; }
.contact-details a:hover { transform: translateX(5px); }
.location { grid-column: 2; align-self: start; margin-top: 6px !important; font-size: 16px; line-height: 1.45; }
.closing-signature { grid-column: 2; justify-self: end; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 65px; line-height: .7; letter-spacing: -.04em; }

@media (min-width: 1700px) {
  .hero-intro { width: 310px; }
  .hero-intro p { max-width: 290px; }
}

@media (max-width: 1050px) {
  .hero { height: 760px; }
  .hero-role { top: 26px; font-size: 30px; padding: 15px 22px 18px 0; }
  .hero-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; bottom: 34px; left: var(--frame); right: var(--frame); width: auto; padding-left: 0; }
  .hero-intro p { font-size: 17px; max-width: 310px; }
  .contact-action { width: 210px; margin-top: 0; }
  .work-section { padding-block: 74px 82px; }
  .work-heading { margin-bottom: 38px; }
  .work-composition { gap: 5%; }
  .project-index button { font-size: 5.45vw; padding-right: 38px; }
  .project-index .index-arrow { right: 10px; font-size: 25px; }
  .project-preview { padding-top: 29px; }
  .project-image { height: 340px; }
  .project-story > p { font-size: 17px; }

  .contact-image { width: 100%; height: 230px; }
  .contact-details .telegram-link { font-size: 25px; gap: 20px; }
}

@media (max-width: 650px) {
  .matter-page { --frame: 20px; font-size: 16px; }
  .hero-top { align-items: start; gap: 18px; padding-top: 24px; }
  .hero-nav { flex-direction: column; gap: 0; align-items: end; line-height: 1.75; }
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 33px; }
  .hero-role { position: relative; order: 1; top: auto; left: auto; padding: 0; margin-inline: var(--frame); font-size: 25px; line-height: 1.12; }
  .hero-intro { position: relative; order: 3; inset: auto; width: auto; margin: 26px var(--frame) 0; gap: 18px; align-items: end; }
  .hero-intro p { font-size: 16px; max-width: 220px; line-height: 1.4; }
  .contact-action { width: 117px; min-width: 117px; padding: 13px; font-size: 16px; }
  .contact-action span { font-size: 21px; }
  .work-section { padding-block: 53px 59px; }
  .work-heading { display: block; margin-bottom: 27px; }
  .matter-page h2 { font-size: 64px; line-height: .95; }
  .work-heading p { font-size: 16px; line-height: 1.4; margin-top: 23px; padding-bottom: 0; }
  .work-composition { display: flex; flex-direction: column; gap: 25px; }
  .project-index { width: 100%; gap: 4px; padding-top: 0; }
  .project-index button { padding: 10px 36px 13px 11px; font-size: 42px; line-height: .94; }
  .project-index button > span:not(.index-arrow) { display: inline; }
  .project-index button > span:not(.index-arrow) + span:not(.index-arrow)::before { content: ' '; }
  .project-index button:nth-child(2), .project-index button:nth-child(4) { padding-left: 11%; }
  .project-index button[data-project="kubernetes"] { font-size: 35px; }
  .project-index button[data-project="kubernetes"] > span:not(.index-arrow) { display: block; }
  .project-index button[data-project="kubernetes"] > span:not(.index-arrow)::before { content: none; }
  .project-index .index-arrow { top: 13px; right: 9px; font-size: 23px; }
  .project-preview { width: 100%; padding-top: 0; }
  .project-image { height: 310px; width: 87%; margin-left: auto !important; }
  .project-story { padding-top: 25px; }
  .matter-page h3 { font-size: 29px; line-height: 1.1; }
  .project-story > p { max-width: 350px; margin-top: 20px; font-size: 16px; line-height: 1.45; }
  .project-story > a { font-size: 16px; margin-top: 23px; gap: 32px; }

  .contact-section { padding-block: 39px 38px; }
  .contact-composition { grid-template-columns: 1fr; gap: 26px; }
  .contact-composition h2 { grid-column: 1; font-size: 23vw; line-height: .95; margin-left: 0; }
  .contact-image { grid-column: 1; grid-row: auto; width: 65%; height: 170px; margin-top: 4px !important; justify-self: end; }
  .contact-details { grid-column: 1; grid-row: auto; gap: 11px; padding-top: 0; }
  .contact-details .telegram-link { font-size: 27px; gap: 28px; margin-bottom: 5px; }
  .contact-details > a:not(.telegram-link) { font-size: 16px; }
  .location { grid-column: 1; grid-row: auto; font-size: 16px; margin-top: 3px !important; }
  .closing-signature { grid-column: 1; grid-row: auto; font-size: 62px; margin-top: -7px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .matter-page a, .matter-page button { transition: none; }
  .matter-page a:active, .matter-page button:active, .project-story > a:hover, .contact-details a:hover { transform: none; }
}

/* Keep authored editorial offsets above the base text reset. */
@media(max-width:650px){.matter-page .hero-role{margin-inline:var(--frame)}}
.matter-page .hero-role,.matter-page .hero-intro{z-index:1}
.matter-page .hero-role,.matter-page .hero-intro{background:transparent}
.matter-page .project-preview{position:static}

@media(max-width:650px){.matter-page .hero-role{font-size:24px}.matter-page .project-preview{position:static}}

.matter-page .contact-section{background:var(--accent)}
.matter-page .hero-role{font-size:32px}
.matter-page .hero-intro p,.matter-page .project-story > p{font-size:18px}
@media(max-width:650px){.matter-page .hero-role{font-size:24px}.matter-page .hero-intro p,.matter-page .project-story > p{font-size:16px}}

/* One visible title, rendered by the browser as text. */
.matter-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;font-size:1px;line-height:1}
.matter-page .hero{background:#0c0d0b}

.matter-page .contact-image img{object-position:center}
@media(max-width:650px){.matter-page .hero-role{position:absolute;top:20px;order:0}.matter-page .hero-intro{margin-top:24px}}

@media(max-width:380px){.matter-page .hero-intro{display:block}.matter-page .hero-intro p{max-width:100%}.matter-page .contact-action{margin-top:20px;width:100%;max-width:none}}
.matter-page .hero-intro{left:var(--frame);right:var(--frame);bottom:32px;width:auto;padding:0;display:flex;justify-content:space-between;align-items:end;gap:40px}
.matter-page .hero-intro p{max-width:500px}
.matter-page .hero-intro .contact-action{width:215px;margin-top:0}
@media(max-width:650px){
 .matter-page .hero-intro{position:relative;inset:auto;order:4;margin:24px var(--frame) 0;gap:18px}
 .matter-page .hero-intro p{max-width:220px}
 .matter-page .hero-intro .contact-action{width:117px;min-width:117px}
}
@media(max-width:380px){.matter-page .hero-intro{display:block}.matter-page .hero-intro p{max-width:none}.matter-page .hero-intro .contact-action{margin-top:20px;width:100%;max-width:none}}

/* The viewBox follows the actual ink bounds: no typographic side bearings. */
.matter-page .hero{height:auto;min-height:0;display:flex;flex-direction:column;gap:0;overflow:hidden;padding-bottom:0}
.matter-page .hero-role{position:relative;inset:auto;margin:0;padding:0}
.matter-page .hero-word{position:relative;inset:auto;order:1;width:100%;margin-top:24px;flex:none}
.matter-page .hero-word h1{margin:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:48.39vw;line-height:1;color:#f1f1ed}
.matter-page .hero-word svg{display:block;width:100%;height:auto;overflow:visible}
.matter-page .hero-word text{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:500px;letter-spacing:0;fill:currentColor}
.matter-page .hero-intro{position:relative;inset:auto;order:2;margin:clamp(48px,4vw,80px) var(--frame) clamp(48px,4vw,80px);flex:1;align-items:end}
@media(max-width:650px){.matter-page .hero{min-height:0}.matter-page .hero-word{margin-top:36px}.matter-page .hero-intro{margin-top:32px}}

@media(max-width:380px){.hero-top{flex-wrap:wrap;gap:16px}.hero-nav{width:100%;flex-direction:row;justify-content:space-between;line-height:1.5}}

/* With two projects, their names form one selector above the large preview. */
.matter-page .work-composition{display:block}
.matter-page .project-index{display:flex;flex-direction:row;gap:32px;padding:0;margin-bottom:40px}
.matter-page .project-index button{width:auto;padding:14px 64px 18px 20px;font-size:clamp(36px,4.6vw,72px)}
.matter-page .project-index button > span:not(.index-arrow){display:inline}
.matter-page .project-index .index-arrow{top:20px;right:18px}
.matter-page .project-preview{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:6%;padding:0;align-items:end}
.matter-page .project-image{height:auto;width:100%;aspect-ratio:4/3;margin:0!important}
.matter-page .project-image img{object-fit:contain;object-position:center}
.matter-page .project-story{padding:0 0 12px}
@media(min-width:1051px){.matter-page .hero{min-height:100svh}}
@media(max-width:1050px){
 .matter-page .project-preview{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:5%}
 .matter-page .project-index{gap:20px;margin-bottom:28px}
}
@media(max-width:650px){
 .matter-page .project-index{gap:8px;justify-content:space-between;margin-bottom:24px}
 .matter-page .project-index button{padding:12px 14px;font-size:32px;white-space:nowrap}
 .matter-page .project-index .index-arrow{display:none}
 .matter-page .project-preview{display:block}
 .matter-page .project-story{padding:26px 0 0}
 .matter-page .hero-intro{margin-block:40px 48px}
}
@media(max-width:380px){.matter-page .project-index button{padding-inline:10px;font-size:28px}}