/* components.css — Erboy Yayıncılık */

/* ─────── Layout container ─────── */
.page{
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 56px 96px;
  position: relative;
}
@media (max-width: 900px){ .page{padding: 0 24px 64px} }

/* ─────── Top ticker ─────── */
.ticker{
  display:flex;
  align-items:center;
  gap:24px;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
  overflow:hidden;
  white-space:nowrap;
}
.ticker .red-dot{
  width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--red) 30%, transparent);
  flex-shrink:0;
}
.ticker .t-sep{opacity:.35}

/* ─────── Masthead ─────── */
.masthead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:22px 0 18px;
  border-bottom:1px solid var(--fg);
  position:relative;
}
@media (max-width: 1280px){
  .masthead{
    gap:14px;
  }
  .masthead .m-left, .masthead .m-right{ text-align:center }
  .masthead .m-left{ display:none }
  .masthead .m-right nav{ margin-left:0; justify-content:center; flex-wrap:wrap }
}
.masthead .m-left, .masthead .m-right{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  line-height:1.5;
}
.masthead .m-left{ display:none }
.masthead .m-right{text-align:center}
.masthead .m-right nav{display:inline-flex;gap:22px;margin-left:0;justify-content:center;flex-wrap:wrap}
.masthead .m-right nav a{position:relative;color:var(--fg)}
.masthead .m-right nav a:hover{color:var(--red)}
.masthead .m-right nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--red);
}
.masthead .wordmark{
  font-family:var(--display);
  font-weight:600;
  font-size: clamp(36px, 5.4vw, 96px);
  letter-spacing:-.025em;
  line-height:.95;
  text-align:center;
  font-feature-settings:"ss01","lnum";
  position:relative;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}
.masthead .wordmark .logo{
  display:block;
  height: clamp(56px, 7.4vw, 110px);
  width:auto;
  max-width: 520px;
  object-fit: contain;
}
[data-theme="dark"]  .masthead .wordmark .logo-light{ display:none }
[data-theme="light"] .masthead .wordmark .logo-dark { display:none }
@media (max-width: 560px){
  .masthead .wordmark{ font-size: clamp(30px, 9vw, 56px); white-space:normal }
  .masthead .wordmark .logo{ height: clamp(48px, 14vw, 80px); max-width: 78vw }
}
.masthead .wordmark .amp{
  color:var(--red);
  font-style:italic;
  font-weight:500;
  margin: 0 .02em;
}
.masthead .sub-wordmark{
  font-family:var(--mono);
  font-size: 11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--fg-dim);
  margin-top: 14px;
  white-space:nowrap;
}
@media (max-width: 560px){
  .masthead .sub-wordmark{ letter-spacing:.18em; font-size:10px; white-space:normal }
}
.masthead .double-rule{
  position:absolute;left:0;right:0;bottom:-6px;height:3px;
  border-top:1px solid var(--fg);
  border-bottom:1px solid var(--fg);
}
.masthead .double-rule::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80px;height:1px;background:var(--red);
}

.theme-btn{
  appearance:none;border:1px solid var(--rule-strong);background:transparent;color:var(--fg);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:0;cursor:pointer;margin-left:14px;
}
.theme-btn:hover{border-color:var(--red);color:var(--red)}

/* ─────── Hero ─────── */
.hero{
  padding: 56px 0 64px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.hero .kicker-row{
  display:flex;align-items:center;gap:14px;
  color:var(--red);
}
.hero .kicker-row::before{
  content:"";width:28px;height:1px;background:var(--red);
}

.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-style:normal;
  letter-spacing:-.035em;
  line-height:.92;
  margin: 18px 0 24px;
  font-feature-settings:"ss01";
  text-wrap:balance;
}
.hero h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--red);
}

/* — kinetik dönen kelime — */
.rotor{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
}
.rotor-ghost{
  visibility:hidden;
  font-style:italic;
  font-weight:400;
  white-space:nowrap;
}
.rotor-word{
  position:absolute;
  left:0;
  top:0;
  font-style:italic;
  font-weight:400;
  color:var(--red);
  white-space:nowrap;
  opacity:1;
  animation: rotorIn .62s cubic-bezier(.2,.8,.2,1) forwards;
}
.rotor-word::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.08em;
  height:.045em;
  background:var(--red);
  transform-origin:left;
  transform:scaleX(1);
  animation: rotorUnderline .62s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes rotorIn{
  0%   { opacity:0; transform: translateY(.42em) rotate(1.5deg); clip-path: inset(0 100% 0 0); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) rotate(0); clip-path: inset(0 0 0 0); }
}
@keyframes rotorUnderline{
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce){
  .rotor-word{ animation:none }
  .rotor-word::after{ animation:none; transform:scaleX(1) }
}

/* — masthead layout (default broadsheet) — */
.hero.layout-masthead h1{
  font-size: clamp(48px, 7.4vw, 124px);
  max-width: 14ch;
}
.hero.layout-masthead .briefs{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:36px;
  margin-top: 36px;
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.hero.layout-masthead .standfirst{
  font-family:var(--display);
  font-weight:400;
  font-size: 19px;
  line-height: 1.45;
  color:var(--fg);
  max-width:42ch;
  font-style:italic;
  letter-spacing:.005em;
}
.hero.layout-masthead .standfirst::first-letter{
  font-family:var(--display);
  font-size: 3.6em;
  float:left;
  line-height:.85;
  padding: 6px 10px 0 0;
  color:var(--red);
  font-style:normal;
  font-weight:600;
}

/* — centered — */
.hero.layout-centered{ text-align:center; padding: 72px 0 64px;}
.hero.layout-centered .kicker-row{justify-content:center}
.hero.layout-centered .kicker-row::before{display:none}
.hero.layout-centered .kicker-row::after{
  content:"";width:28px;height:1px;background:var(--red);
}
.hero.layout-centered h1{
  font-size: clamp(56px, 9vw, 168px);
  max-width: 16ch;
  margin-left:auto;margin-right:auto;
}
.hero.layout-centered .standfirst{
  max-width: 58ch;
  margin: 8px auto 0;
  font-family:var(--display);
  font-style:italic;
  font-size: 21px;
  line-height: 1.5;
}
.hero.layout-centered .briefs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:36px;
  margin-top: 56px;
  padding-top:28px;
  border-top:1px solid var(--rule);
  text-align:left;
}

/* — split — */
.hero.layout-split{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:64px;
  align-items:end;
  padding: 56px 0;
}
.hero.layout-split h1{
  font-size: clamp(48px, 7.8vw, 132px);
  margin-top: 14px;
}
.hero.layout-split .standfirst{
  font-family:var(--display);
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
  color: var(--fg-dim);
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.hero.layout-split .briefs-side{
  display:flex;flex-direction:column;gap:22px;
  border-left:1px solid var(--rule);
  padding-left:32px;
}

/* — statement (manifesto + künye) — */
.hero.layout-statement{
  padding: 40px 0 8px;
}
.hero.layout-statement .hs-top h1{
  font-size: clamp(52px, 9.2vw, 156px);
  line-height: .96;
  max-width: 15ch;
  margin-top: 18px;
  letter-spacing: -.02em;
}
.hero.layout-statement .hs-foot{
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--fg);
}
.hero.layout-statement .hs-lead{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.34;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
}
.hero.layout-statement .hs-facts{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 6px 0 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.hero.layout-statement .hs-fact{
  padding: 16px 18px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero.layout-statement .hs-fact dt{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 8px;
}
.hero.layout-statement .hs-fact dd{
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
}
@media (max-width: 820px){
  .hero.layout-statement .hs-foot{ grid-template-columns: 1fr; gap: 32px; }
}

/* brief cards */
.brief{display:flex;flex-direction:column;gap:8px}
.brief .b-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);
}
.brief .b-title{
  font-family:var(--display);
  font-weight:500;
  font-size: 22px;
  line-height:1.18;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.brief .b-body{
  font-size:13.5px;line-height:1.55;color:var(--fg-dim);
}

/* ─────── Disiplin marquee (akan şerit) ─────── */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--fg);
  border-bottom:1px solid var(--fg);
  background: var(--red);
  color:#fff;
  position:relative;
}
.marquee-track{
  display:flex;
  align-items:center;
  gap: 0;
  width:max-content;
  white-space:nowrap;
  animation: marqueeScroll 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused }
.dm-item{
  display:inline-flex;
  align-items:center;
  gap: 24px;
  padding: 0 24px;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing:-.015em;
  line-height: 2.2;
}
.dm-item .dm-star{
  font-style:normal;
  font-size: .5em;
  opacity:.7;
  transform: translateY(-.1em);
}
@keyframes marqueeScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; transform:none }
}

/* ─────── Values strip (3 değer) ─────── */
.values{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px){ .values{ grid-template-columns: 1fr } }
.value{
  display:flex;
  gap:18px;
  padding: 28px 28px;
  border-right: 1px solid var(--rule);
  align-items:flex-start;
}
.value:last-child{ border-right:0 }
@media (max-width: 760px){
  .value{ border-right:0; border-bottom:1px solid var(--rule) }
  .value:last-child{ border-bottom:0 }
}
.value .v-n{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--red);
  flex-shrink:0;
  padding-top: 4px;
}
.value .v-t{
  font-family:var(--display);
  font-weight:500;
  font-size: 22px;
  letter-spacing:-.015em;
  line-height:1.15;
}
.value .v-d{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--fg-dim);
  max-width: 36ch;
}

/* ─────── Hizmetler (editorial list) ─────── */
.svc-list{
  border-top: 1px solid var(--fg);
}
.svc{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  padding: 48px 0 56px;
  border-bottom: 1px solid var(--rule);
  align-items:start;
  position:relative;
}
@media (max-width: 1000px){
  .svc{ grid-template-columns: 1fr; }
  .svc-cover{ grid-column: 1 / -1; max-width: 360px }
}
@media (max-width: 600px){
  .svc{ grid-template-columns: 1fr; gap:18px }
}
.svc-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--red);
  padding-top: 14px;
  border-top: 2px solid var(--red);
  display:inline-block;
  min-width: 56px;
}
.svc-body h3{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height:.98;
  letter-spacing:-.025em;
  margin: 0 0 14px;
  text-wrap:balance;
}
.svc-body h3 .svc-dot{
  color: var(--red);
}
.svc-lede{
  font-family:var(--display);
  font-style:italic;
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 18px;
  color: var(--fg);
  max-width: 36ch;
  text-wrap:balance;
}
.svc-text{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-dim);
  max-width: 56ch;
  margin: 0 0 18px;
}
.svc-bullets{
  display:flex; flex-wrap:wrap; gap: 8px;
  list-style:none; margin:0; padding:0;
}
.svc-bullets li{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg);
  border: 1px solid var(--rule-strong);
  padding: 7px 11px;
}
.svc-cover{
  width: 100%;
  max-width: 320px;
  justify-self:end;
}
.svc-cover .cover{
  aspect-ratio: 4 / 5;
}

/* ─────── Vizyon / Misyon ─────── */
.vm-grid{
  margin-top: 56px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--fg);
}
@media (max-width: 820px){ .vm-grid{ grid-template-columns: 1fr } }
.vm-card{
  padding: 32px 32px 36px;
  border-right: 1px solid var(--rule);
  position:relative;
}
.vm-card:last-child{ border-right:0 }
@media (max-width: 820px){
  .vm-card{ border-right:0; border-bottom:1px solid var(--rule) }
  .vm-card:last-child{ border-bottom:0 }
}
.vm-card .vm-label{
  font-family:var(--mono);
  font-size: 11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--red);
}
.vm-card .vm-text{
  margin-top: 16px;
  font-family:var(--display);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing:-.005em;
  color: var(--fg);
  text-wrap: pretty;
}
.vm-card.vm-card-red{
  background: var(--red);
  color: #fff;
}
.vm-card.vm-card-red .vm-label{ color: #fff; opacity:.85 }
.vm-card.vm-card-red .vm-text{ color: #fff }

/* ─────── Brief form (contact) ─────── */
.brief-form{
  margin-top: 32px;
  border: 1px solid var(--rule-strong);
  padding: 28px;
  position:relative;
}
.brief-form::before{
  content:""; position:absolute; top:0; left:0;
  width: 80px; height: 3px; background: var(--red);
}
.brief-form .bf-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items:end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
@media (max-width: 720px){ .brief-form .bf-head{ grid-template-columns: 1fr } }
.brief-form .bf-title{
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  text-align:right;
}
.brief-form .bf-title em{
  display:block;
  font-style: italic;
  font-weight: 400;
  color: var(--red);
  margin-top:6px;
  font-size: .65em;
}
@media (max-width: 720px){ .brief-form .bf-title{ text-align:left } }

.brief-form .bf-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items:end;
}
@media (max-width: 720px){ .brief-form .bf-grid{ grid-template-columns: 1fr } }
.brief-form label{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.brief-form .bf-full{ grid-column: 1 / -1 }
.brief-form .bf-label{
  font-family:var(--mono);
  font-size: 10px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.brief-form input,
.brief-form textarea{
  appearance:none;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--fg);
  padding: 8px 0;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -.005em;
  outline: none;
  resize: vertical;
  border-radius: 0;
  transition: border-color .2s ease;
}
.brief-form input:focus,
.brief-form textarea:focus{ border-bottom-color: var(--red) }
.brief-form .bf-submit{
  grid-column: 1 / -1;
  justify-self: end;
  display:inline-flex; align-items:center; gap: 12px;
  background: var(--red); color: #fff;
  padding: 16px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--red);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  margin-top: 12px;
}
.brief-form .bf-submit:hover{ background: transparent; color: var(--red) }
.brief-form .bf-submit .arr{
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

/* social row link */
.contact-meta .social a.v{ cursor:pointer; transition: color .2s ease }
.contact-meta .social a.v:hover span:last-child{ color: var(--red) }

/* ─────── Section header ─────── */
.section{padding: 64px 0 32px}
.section-head{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap:24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fg);
  margin-bottom: 36px;
}
.section-head h2{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(34px, 4.4vw, 64px);
  letter-spacing:-.025em;
  line-height:1;
  margin: 0;
}
.section-head h2 em{font-style:italic; font-weight:400; color:var(--red)}
.section-head .meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);text-align:right;
}

/* ─────── Filter ─────── */
.filter-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom: 28px;
}
.filter-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
}
.filter-tabs button{
  appearance:none;border:1px solid var(--rule-strong);
  background:transparent;color:var(--fg);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding: 9px 14px;cursor:pointer;
  transition: all .2s ease;
  border-radius:0;
}
.filter-tabs button:hover{border-color:var(--red);color:var(--red)}
.filter-tabs button.active{
  background:var(--red);border-color:var(--red);color:#fff;
}
.filter-count{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);
}
.filter-count strong{color:var(--fg);font-weight:500}

/* ─────── Works grid ─────── */
.works{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
@media (max-width:1100px){ .works{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:680px){ .works{grid-template-columns: 1fr} }

.work{
  display:flex;flex-direction:column;gap:14px;
  cursor:pointer;position:relative;
  padding-top:14px;
  border-top:1px solid var(--rule);
  transition: opacity .35s ease, transform .35s ease;
}
.work.fade{opacity:.18;pointer-events:none}
.work:hover .cover{transform: translateY(-3px)}
.work:hover .w-name{color:var(--red)}

.work-row1{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);
}
.work-row1 .w-cat{color:var(--red)}

.cover{
  aspect-ratio: 4/5;
  width:100%;
  display:flex;
  position:relative;
  overflow:hidden;
  transition: transform .35s ease;
  border:1px solid var(--rule-strong);
}

/* image cover (gerçek portfolyo görselleri) */
.cover.kind-image{
  aspect-ratio: 1 / 1;
  background:#0a0a0a;
  padding:0;
  align-items:stretch;
}
.cover.kind-image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.work:hover .cover.kind-image img{ transform: scale(1.045); }
.cover.kind-image .ci-tag{
  position:absolute;left:10px;bottom:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,10,.62);backdrop-filter:blur(4px);
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.18);
}

/* cover variants */
.cover.kind-masthead{
  background: var(--ink);color:#f4ede0;
  flex-direction:column;justify-content:space-between;padding:18px 18px 16px;
}
.cover.kind-masthead.accent{ background: var(--red); color:#fff;}
.cover.kind-masthead .cm-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;
  border-bottom:1px solid currentColor;padding-bottom:8px;
}
.cover.kind-masthead .cm-title{
  font-family:var(--display);font-weight:700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height:.9;letter-spacing:-.02em;
  white-space:pre-line;
  font-feature-settings:"ss01";
}
.cover.kind-masthead .cm-foot{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;
  border-top:1px solid currentColor;padding-top:8px;
}

/* news-site screen mock */
.cover.kind-screen{
  background: #f4ede0; color:#0a0a0a;
  flex-direction:column;
}
.cover.kind-screen.accent{ background: #0a0a0a; color:#f4ede0;}
.cover.kind-screen .cs-bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid currentColor;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
}
.cover.kind-screen .cs-bar::before{
  content:""; width:7px;height:7px;background: var(--red);border-radius:50%;
}
.cover.kind-screen .cs-bar .url{opacity:.55;margin-left:auto}
.cover.kind-screen .cs-body{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:14px;gap:10px;
}
.cover.kind-screen .cs-title{
  font-family:var(--display);font-weight:700;font-size: 48px;
  line-height:.9;letter-spacing:-.03em;
}
.cover.kind-screen .cs-stack{display:flex;flex-direction:column;gap:6px}
.cover.kind-screen .cs-line{
  height:7px;background:currentColor;opacity:.85;
}
.cover.kind-screen .cs-line:nth-child(2){width:70%;opacity:.55}
.cover.kind-screen .cs-line:nth-child(3){width:88%;opacity:.4}
.cover.kind-screen .cs-foot{
  display:flex;gap:6px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;
}
.cover.kind-screen .cs-chip{border:1px solid currentColor;padding:3px 6px}

/* app phone mock */
.cover.kind-app{
  background: var(--ink);color:#f4ede0;
  align-items:center;justify-content:center;padding:24px;
}
.cover.kind-app.accent{ background: var(--red); color:#fff;}
.cover.kind-app .phone{
  width: 56%;aspect-ratio: 9/19;
  border-radius: 18px;
  background: #f4ede0;
  color: #0a0a0a;
  padding: 14px 10px;display:flex;flex-direction:column;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  position:relative;
}
.cover.kind-app .notch{
  width: 28%;height:8px;border-radius:0 0 6px 6px;background:#0a0a0a;margin:0 auto 10px;
}
.cover.kind-app .p-title{
  font-family:var(--display);font-weight:700;font-size: 19px;line-height:.95;letter-spacing:-.02em;
  white-space:pre-line;text-align:left;margin-bottom:8px;
}
.cover.kind-app .p-bar{
  height: 5px;background:#0a0a0a;margin: 3px 0;opacity:.85;
}
.cover.kind-app .p-bar.s{width:65%;opacity:.55}
.cover.kind-app .p-bar.t{width:30%;opacity:.4}
.cover.kind-app .p-foot{
  margin-top:auto;display:flex;gap:4px;justify-content:space-between;
}
.cover.kind-app .p-foot span{
  width:14px;height:14px;border-radius:50%;background:#0a0a0a;opacity:.2;
}
.cover.kind-app .p-foot span:first-child{background:var(--red);opacity:1}

/* literary cover */
.cover.kind-literary{
  background: #f4ede0;color:#0a0a0a;
  padding: 22px;flex-direction:column;justify-content:space-between;
  background-image: repeating-linear-gradient(
    180deg, transparent 0, transparent 19px, rgba(10,10,10,.07) 19px, rgba(10,10,10,.07) 20px
  );
}
.cover.kind-literary.accent{
  background-color: var(--red); color:#fff;
  background-image: repeating-linear-gradient(
    180deg, transparent 0, transparent 19px, rgba(255,255,255,.18) 19px, rgba(255,255,255,.18) 20px
  );
}
.cover.kind-literary .cl-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.7;
}
.cover.kind-literary .cl-title{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height:.95;letter-spacing:-.015em;
  white-space:pre-line;
}
.cover.kind-literary .cl-foot{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.55;
}

.w-name{
  font-family:var(--display);
  font-weight:500;
  font-size: 22px;
  letter-spacing:-.015em;
  line-height:1.1;
  transition: color .2s ease;
}
.w-sub{
  font-size: 13px;line-height:1.45;color:var(--fg-dim);
}
.w-notes{
  font-size: 13px;line-height:1.5;color:var(--fg);font-style:italic;font-family:var(--display);
  border-top:1px solid var(--rule);padding-top:10px;margin-top:auto;
}

/* ─────── Stats ─────── */
.stats{
  display:grid;grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top: 56px;
}
.stat{padding: 28px 24px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat .v{
  font-family:var(--display);font-weight:500;
  font-size: clamp(48px, 5.6vw, 80px);line-height:.95;letter-spacing:-.03em;
  font-feature-settings:"lnum","tnum","ss01";
}
.stat .v::first-letter{}
.stat .l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);margin-top:10px;
}
@media (max-width:700px){.stats{grid-template-columns: repeat(2, 1fr)} .stat{border-bottom:1px solid var(--rule)} }

/* ─────── About ─────── */
.about{padding: 96px 0 32px;}
.about-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items:start;
}
@media (max-width:900px){.about-grid{grid-template-columns: 1fr; gap:32px}}
.about-side{
  position:sticky;top:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);line-height:1.7;
}
.about-side .label{color:var(--red)}
.about h2{
  font-family:var(--display);font-weight:500;
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing:-.025em;line-height:1;
  margin: 0 0 32px;
  text-wrap:balance;
}
.about h2 em{font-style:italic;font-weight:400;color:var(--red)}
.about-body{
  columns: 2;column-gap: 32px;
  font-size: 15px;line-height:1.65;
  font-family:var(--display);
  color:var(--fg);
}
.about-body p{margin: 0 0 14px;break-inside: avoid-column;text-wrap:pretty}
.about-body p:first-of-type::first-letter{
  font-family:var(--display);font-weight:700;color:var(--red);
  float:left;font-size: 4em;line-height:.85;padding: 6px 10px 0 0;
}
@media (max-width:900px){.about-body{columns:1}}

.principles{
  margin-top: 56px;
  display:grid;grid-template-columns: repeat(4, 1fr);
  gap:0;border-top:1px solid var(--fg);
}
@media (max-width:900px){.principles{grid-template-columns: repeat(2,1fr)}}
.principle{
  padding: 20px 22px 24px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.principle:last-child{border-right:0}
.principle .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);
}
.principle .t{
  font-family:var(--display);font-weight:500;
  font-size: 22px;line-height:1.1;letter-spacing:-.015em;
  margin-top:10px;
  text-wrap:balance;
}
.principle .d{
  margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--fg-dim);
}

.team{
  margin-top: 64px;
}
.team-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom: 12px;border-bottom:1px solid var(--fg);
}
.team-head h3{
  font-family:var(--display);font-weight:500;
  font-size: 28px;letter-spacing:-.02em;margin:0;
}
.team-head span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
}
.team-list{
  display:grid;grid-template-columns: repeat(3, 1fr);gap:0;
}
@media (max-width:760px){.team-list{grid-template-columns: 1fr}}
.team-list li{
  list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding: 16px 20px 16px 0;
  border-bottom:1px solid var(--rule);
}
.team-list li .nm{
  font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.015em;
}
.team-list li .rl{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  text-align:right;
}

/* ─────── Contact ─────── */
.contact{padding: 96px 0 24px;position:relative}
.contact-grid{
  display:grid;grid-template-columns: 1fr 1fr;gap:32px;
  margin-top:36px;
}
@media (max-width:760px){.contact-grid{grid-template-columns: 1fr}}
.addr{
  padding: 28px;
  border: 1px solid var(--rule-strong);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.addr::before{
  content:"";position:absolute;top:0;left:0;width:48px;height:3px;background:var(--red);
}
.addr h4{
  font-family:var(--display);font-weight:500;font-size:24px;margin:0;letter-spacing:-.015em;
}
.addr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;
  font-size:14px;line-height:1.55;color:var(--fg);
}
.addr ul li:nth-last-child(-n+2){color:var(--fg-dim);font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}

.contact-meta{
  margin-top: 32px;
  display:grid;grid-template-columns: 1fr;gap:32px;
  padding: 24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
@media (max-width:760px){.contact-meta{grid-template-columns:1fr}}
.contact-meta .hours .l, .contact-meta .social .l{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.contact-meta .hours .v{
  font-family:var(--display);font-style:italic;font-size:22px;margin-top:8px;
}
.contact-meta .social{display:flex;flex-direction:column;gap:8px}
.contact-meta .social .v{
  display:flex;justify-content:space-between;align-items:baseline;
  padding: 8px 0;border-top:1px dashed var(--rule);
}
.contact-meta .social .v:first-of-type{border-top:0}
.contact-meta .social .v span:first-child{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.contact-meta .social .v span:last-child{
  font-family:var(--display);font-size:17px;
}

.cta{
  margin-top: 56px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding: 36px 0;
  border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);
}
.cta h3{
  font-family:var(--display);font-weight:500;font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing:-.025em;line-height:1.05;margin:0;max-width:18ch;
  text-wrap:balance;
}
.cta h3 em{color:var(--red);font-style:italic;font-weight:400}
.cta a.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--red);color:#fff;
  padding: 18px 24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--red);
  white-space:nowrap;
  transition: background .2s ease, color .2s ease;
}
.cta a.btn:hover{background:transparent;color:var(--red)}
.cta a.btn .arr{font-family:var(--display);font-size:18px;letter-spacing:0;text-transform:none}

/* ─────── Footer ─────── */
.foot{
  margin-top: 0;padding: 28px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.foot .colophon{display:flex;gap:24px;flex-wrap:wrap}
.foot .colophon span{display:inline-flex;gap:8px;align-items:baseline}
.foot .colophon strong{color:var(--fg);font-weight:500}

/* type pair swaps */
[data-typepair="fraunces"] .hero h1,
[data-typepair="fraunces"] .section-head h2,
[data-typepair="fraunces"] .masthead .wordmark,
[data-typepair="fraunces"] .about h2,
[data-typepair="fraunces"] .cta h3,
[data-typepair="fraunces"] .w-name,
[data-typepair="fraunces"] .brief .b-title,
[data-typepair="fraunces"] .principle .t,
[data-typepair="fraunces"] .addr h4,
[data-typepair="fraunces"] .team-list li .nm,
[data-typepair="fraunces"] .cover.kind-masthead .cm-title,
[data-typepair="fraunces"] .cover.kind-screen .cs-title,
[data-typepair="fraunces"] .cover.kind-app .p-title,
[data-typepair="fraunces"] .cover.kind-literary .cl-title,
[data-typepair="fraunces"] .stat .v{
  font-family: "Fraunces", "Newsreader", Georgia, serif;
}
[data-typepair="caslon"] .hero h1,
[data-typepair="caslon"] .section-head h2,
[data-typepair="caslon"] .masthead .wordmark,
[data-typepair="caslon"] .about h2,
[data-typepair="caslon"] .cta h3,
[data-typepair="caslon"] .w-name,
[data-typepair="caslon"] .brief .b-title,
[data-typepair="caslon"] .principle .t,
[data-typepair="caslon"] .addr h4,
[data-typepair="caslon"] .team-list li .nm,
[data-typepair="caslon"] .cover.kind-masthead .cm-title,
[data-typepair="caslon"] .cover.kind-screen .cs-title,
[data-typepair="caslon"] .cover.kind-app .p-title,
[data-typepair="caslon"] .cover.kind-literary .cl-title,
[data-typepair="caslon"] .stat .v{
  font-family: "Libre Caslon Text", "Newsreader", Georgia, serif;
}

/* version switcher (floating) — shared */
.switcher{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;gap:4px;padding:5px;border:1px solid var(--rule-strong);border-radius:100px;
  background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(12px);
}
@media (max-width:560px){ .switcher{ bottom:74px } }
.switcher a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);padding:8px 14px;border-radius:100px;transition:.2s;white-space:nowrap;
}
.switcher a.on{background:var(--red);color:#fff}
.switcher a:not(.on):hover{color:var(--fg)}

/* page-section divider (huge serif label) */
.section-title{
  margin-top: 96px;
  display:flex;align-items:baseline;gap:18px;
  padding-bottom: 16px;border-bottom:1px solid var(--fg);
}
.section-title .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin-right: 4px;
}
.section-title h2{
  font-family:var(--display);font-weight:500;
  font-size: clamp(34px, 4.2vw, 60px);letter-spacing:-.025em;line-height:1;margin:0;
}
.section-title .meta{
  margin-left:auto;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
  text-align:right;
}