/* KREO hero, light: warm paper, ink type, the work large on a gentle curve. Nothing else. */
:root { --paper: #F1EEE8; --ink: #151515; --soft: rgba(21,21,21,.5); --line: rgba(21,21,21,.1); --serif: 'Instrument Serif', Georgia, serif; }
html, body { background: var(--paper); }
@media (hover: hover) and (pointer: fine) { body, a, button, .row { cursor: none !important; } }

.stage { inset: 0 !important; border-radius: 0 !important; display: grid; grid-template-rows: auto auto 1fr auto auto; background: var(--paper); color: var(--ink); }
.stage__beam, .stage__glow, .ruler { display: none; }

/* ---------- Top ---------- */
.top { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 28px 0; }
.top .brand { position: static; color: var(--ink); }
.top__mid { color: var(--soft); display: flex; align-items: center; gap: 12px; }
.top__mid i { width: 4px; height: 4px; border-radius: 50%; background: var(--ember); }
.top__mid b { color: var(--ink); font-weight: 500; }
.top__nav { justify-self: end; display: flex; gap: 6px; }
.top__nav button { padding: 10px 18px; border-radius: 999px; font-size: 14px; letter-spacing: -.01em; border: 1px solid var(--line); background: transparent; transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease); }
.top__nav button:hover { border-color: var(--ink); }
.top__nav .top__cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.top__nav .top__cta:hover { background: var(--ember); border-color: var(--ember); color: #fff; }

/* ---------- Headline ---------- */
.headline { position: relative; z-index: 20; text-align: center; padding: 3.5vh 20px 0; pointer-events: none; }
.eyebrow { display: inline-flex; gap: 18px; color: var(--soft); }
.h1 { margin-top: 10px; font-size: clamp(30px, 3.6vw, 60px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.h1 .ln { display: inline; }
.h1 .ln + .ln::before { content: ' '; }
.h1 .ln > span { display: inline; }
.h1 em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--ember); }
.headline { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
body:not(.is-loading) .headline { opacity: 1; transform: none; }

/* ---------- The curved row ---------- */
.row { position: relative; z-index: 10; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.row__band { position: absolute; inset: 0; perspective-origin: 50% 50%; -webkit-box-reflect: none; }
.tile { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; }
.strip { position: absolute; top: 0; overflow: hidden; background: #e2ded6; backface-visibility: hidden; }
.strip img { position: absolute; top: 0; max-width: none; object-fit: cover; object-position: top; pointer-events: none; transition: opacity .4s, filter .4s; }
.strip--l { border-radius: 12px 0 0 12px; }
.strip--r { border-radius: 0 12px 12px 0; }
.tile.dim .strip img { opacity: .35; filter: grayscale(1); }
.tile.lit .strip { box-shadow: none; }

/* ---------- Credit ---------- */
.credit { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; padding: 6px 28px 0; text-align: left; }
.credit__num { color: var(--soft); align-self: end; padding-bottom: 8px; }
.credit__num b { color: var(--ink); font-weight: 500; }
.credit__name { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; overflow: hidden; font-size: clamp(26px, 2.6vw, 42px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; padding: 2px 4px; color: var(--ink); }
.credit__name span { display: inline-block; transform: translateY(105%); }
.credit__name.in span { animation: rise .55s cubic-bezier(.2,.8,.1,1) forwards; animation-delay: var(--d); }
@keyframes rise { to { transform: none; } }
.credit__kind { grid-column: 2; grid-row: 2; justify-self: center; color: var(--soft); margin-top: -2px; white-space: pre; }
.credit__go { grid-column: 3; grid-row: 1 / 3; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; transition: background .3s, transform .4s var(--ease); }
.credit__go:hover { background: var(--acc, var(--ember)); color: #fff; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 28px 22px; }
.foot__hint { color: var(--soft); }
.foot__hint .touch { display: none; }
@media (hover: none) { .foot__hint .fine { display: none; } .foot__hint .touch { display: inline; } }
.index { display: flex; gap: 2px; }
.index button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--soft); transition: background .3s, color .3s; white-space: nowrap; }
.index button i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.index button span { font-family: var(--mono); font-size: 9.5px; opacity: .6; }
.index button:hover { color: var(--ink); }
.index button.on { background: var(--ink); color: var(--paper); }
.foot__mail { justify-self: end; color: var(--soft); }
.foot__mail a:hover { color: var(--ember); }

/* ---------- Zoom into the case study ---------- */
.zoomer { position: fixed; z-index: 75; pointer-events: none; overflow: hidden; border-radius: 12px; opacity: 0; transition: left .65s cubic-bezier(.7,0,.2,1), top .65s cubic-bezier(.7,0,.2,1), width .65s cubic-bezier(.7,0,.2,1), height .65s cubic-bezier(.7,0,.2,1); }
.zoomer.on { opacity: 1; }
.zoomer img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Cursor ---------- */

.page, .case { z-index: 60; }

@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; padding: 16px 16px 0; }
  .top__mid { display: none; }
  .top__nav button { padding: 8px 13px; font-size: 13px; }
  .headline { padding-top: 5vh; }
  .h1 { font-size: 26px; }
  .credit { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 16px 0; gap: 4px; }
  .credit__num, .credit__name, .credit__kind, .credit__go { grid-column: 1; grid-row: auto; justify-self: center; }
  .credit__num { padding-bottom: 0; }
  .credit__go { margin-top: 10px; }
  .foot { grid-template-columns: 1fr; justify-items: center; padding: 12px 10px 16px; gap: 8px; }
  .foot__mail { display: none; }
  .index { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
}

/* ---------- Cursor: a pen nib with viewfinder brackets ---------- */
.cur { display: none; }
@media (hover: hover) and (pointer: fine) { .cur { display: block; } }
.cur.gone { opacity: 0; }
.cur__nib { position: fixed; left: 0; top: 0; width: 140px; height: 70px; margin: -25px 0 0 -70px; z-index: 97; pointer-events: none; transform-origin: 70px 25px; }
.cur__pen { position: absolute; left: 70px; top: 25px; transform: translate(-8.5px, -1px) rotate(-34deg); transform-origin: 8.5px 0; overflow: visible; transition: transform .35s var(--ease); filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.cur__body { fill: var(--ink); stroke: var(--paper); stroke-width: 1.1; }
.cur__tip { fill: var(--ember); }
.cur__slit { stroke: var(--paper); stroke-width: 1; }
.cur__vent { fill: var(--paper); }
.cur.press .cur__pen { transform: translate(-8.5px, -1px) rotate(-34deg) scale(.82); }
.cur[data-mode="el"] .cur__pen, .cur[data-mode="tile"] .cur__pen { transform: translate(-8.5px, -1px) rotate(-14deg) scale(.9); }
.cur.on-light .cur__body { fill: var(--ink); }
/* Drag arrows either side of the nib over the row */
.cur__arrows { position: absolute; left: 70px; top: 25px; display: flex; gap: 46px; transform: translate(-32px, 14px); color: var(--ink); opacity: 0; transition: opacity .25s, gap .35s var(--ease); }
.cur[data-mode="row"] .cur__arrows { opacity: 1; }
.cur__nib.spin .cur__arrows { gap: 62px; transform: translate(-40px, 14px); color: var(--ember); }
/* Viewfinder brackets */
.cur__frame { position: fixed; left: 0; top: 0; z-index: 96; pointer-events: none; opacity: 0; }
.cur__frame i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--ink); }
.cur__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.cur__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.cur__frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.cur__frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.cur[data-mode="tile"] .cur__frame i { border-color: var(--ember); width: 18px; height: 18px; }
.cur__tag { position: absolute; left: 0; top: calc(100% + 8px); white-space: nowrap; padding: 5px 10px 4px; border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--ease); }
.cur__tag.show { opacity: 1; transform: none; }
.cur[data-mode="tile"] .cur__tag { background: var(--ember); color: #fff; }
/* Ink drops: small diamonds that fall away */
.cur__ink { position: fixed; z-index: 95; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--ember); transform: rotate(45deg) scale(0); pointer-events: none; }
.cur__ink.drop { animation: ink .7s var(--ease) forwards; }
@keyframes ink { 0% { transform: rotate(45deg) scale(1.2); opacity: .9; } 100% { transform: translateY(14px) rotate(45deg) scale(0); opacity: 0; } }

/* ---------- About: a dictionary entry, then an editorial page ---------- */
.page--about { background: var(--paper); color: var(--ink); }
.ab { max-width: 1180px; margin: 0 auto; padding: 12vh 6vw 10vh; }
.ab__k { color: var(--ember); }
.ab__entry { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2vw 6vw; align-items: end; padding-bottom: 7vh; border-bottom: 1px solid var(--line); }
.ab__entry .ab__k { grid-column: 1 / -1; }
.ab__word { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(110px, 17vw, 260px); line-height: .78; letter-spacing: -.03em; }
.ab__phon { align-self: start; margin-top: 2vh; font-size: 19px; color: var(--soft); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.ab__phon span { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.ab__phon i { font-family: var(--serif); font-size: 22px; }
.ab__defs { grid-column: 2; grid-row: 2 / 4; list-style: none; margin: 0; padding: 0; align-self: end; }
.ab__defs li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.02em; }
.ab__defs li:last-child { border-bottom: 1px solid var(--line); }
.ab__defs b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ember); min-width: 16px; }
.ab__intro { padding: 10vh 0 6vh; }
.ab__big { font-size: clamp(30px, 3.9vw, 62px); font-weight: 500; letter-spacing: -.045em; line-height: 1.04; max-width: 17ch; }
.ab__big em { font-family: var(--serif); font-weight: 400; color: var(--ember); letter-spacing: -.01em; }
.ab__sign { display: flex; gap: 18px; align-items: baseline; margin-top: 30px; }
.ab__sign span:first-child { font-family: var(--serif); font-style: italic; font-size: 30px; }
.ab__sign .mono { color: var(--soft); }
.ab__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding-bottom: 12vh; font-size: 17px; line-height: 1.65; color: #3e3d3a; }
.ab__steps { padding: 0 0 12vh; }
.ab__steps ol { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ab__steps li { background: #fff; border-radius: 20px; padding: 26px 22px 28px; min-height: 230px; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.ab__steps li:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.25); }
.ab__steps li b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--soft); transition: color .3s; }
.ab__steps li:hover b { color: var(--ember); }
.ab__steps h3 { margin: auto 0 10px; font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.ab__steps p { font-size: 14.5px; line-height: 1.5; color: #55534f; }
.ab__skills { padding-bottom: 12vh; }
.ab__skills ul { list-style: none; margin: 18px 0 0; padding: 0; }
.ab__skills li { display: grid; grid-template-columns: 40px 1.1fr 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.ab__skills li:last-child { border-bottom: 1px solid var(--line); }
.ab__skills .n { color: var(--soft); }
.ab__skills b { font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.03em; transition: transform .4s var(--ease); }
.ab__skills li:hover b { transform: translateX(8px); }
.ab__skills .note { color: var(--soft); font-size: 14px; }
.ab__skills .works { display: flex; gap: 0; }
.wdot { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; margin-left: -8px; box-shadow: 0 0 0 3px var(--paper); transition: transform .35s var(--ease), margin .35s var(--ease); }
.wdot:first-child { margin-left: 0; }
.wdot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ab__skills li:hover .wdot { margin-left: 4px; }
.wdot:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--acc); }
.ab__facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab__facts div { padding: 26px 0 24px; display: flex; flex-direction: column; gap: 4px; }
.ab__facts div + div { border-left: 1px solid var(--line); padding-left: 22px; }
.ab__facts b { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.04em; }
.ab__facts .mono { color: var(--soft); }
.ab__end { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 10vh; flex-wrap: wrap; }
.ab__endline { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.4vw, 54px); letter-spacing: -.01em; }
/* the page opens with the entry rising in */
.page--about .ab > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.page--about.is-in .ab > * { opacity: 1; transform: none; }
.page--about.is-in .ab > *:nth-child(2) { transition-delay: .12s; }
.page--about.is-in .ab > *:nth-child(3) { transition-delay: .2s; }
.page--about.is-in .ab > *:nth-child(n+4) { transition-delay: .26s; }

/* Contact form states */
.chat__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.chat.is-sending .chat__send button[type="submit"] { opacity: .6; cursor: progress; }
.chat.is-sent .chat__send button[type="submit"] { background: #2f8a52; color: #fff; }
.chat__done.bad { border-left-color: #e5484d; }

@media (max-width: 760px) {
  .ab { padding: 90px 22px 70px; }
  .ab__entry { grid-template-columns: 1fr; }
  .ab__defs { grid-column: 1; grid-row: auto; }
  .ab__word { font-size: 120px; }
  .ab__cols { grid-template-columns: 1fr; gap: 18px; }
  .ab__steps ol { grid-template-columns: 1fr 1fr; }
  .ab__steps li { min-height: 190px; }
  .ab__skills li { grid-template-columns: 28px 1fr auto; }
  .ab__skills .note { display: none; }
  .ab__facts { grid-template-columns: 1fr 1fr; }
  .ab__facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ab__facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- About, short: one screen, entry on the left, the rest on the right ---------- */
.ab--short { min-height: 100%; max-width: 1240px; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding: 9vh 6vw 7vh; }
.ab--short .ab__entry { grid-template-columns: 1fr; border-bottom: 0; padding-bottom: 0; gap: 0; }
.ab--short .ab__word { font-size: clamp(110px, 13vw, 210px); }
.ab--short .ab__phon { margin: 14px 0 26px; }
.ab--short .ab__defs { grid-column: 1; grid-row: auto; }
.ab--short .ab__defs li { font-size: clamp(17px, 1.4vw, 21px); padding: 10px 0; }
.ab__side { display: flex; flex-direction: column; gap: 22px; }
.ab--short .ab__big { font-size: clamp(26px, 2.6vw, 42px); max-width: 20ch; }
.ab__txt { font-size: 16px; line-height: 1.6; color: #4a4946; max-width: 46ch; }
.ab--short .ab__facts { grid-template-columns: repeat(4, 1fr); }
.ab--short .ab__facts div { padding: 16px 0 14px; }
.ab--short .ab__facts div + div { padding-left: 14px; }
.ab--short .ab__facts b { font-size: clamp(19px, 1.6vw, 26px); }
.ab--short .ab__end { padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ab--short .ab__sign { margin-top: 0; flex-direction: column; gap: 2px; }
.ab--short .ab__sign span:first-child { font-size: 26px; }
@media (max-width: 760px) {
  .ab--short { grid-template-columns: 1fr; gap: 28px; padding: 76px 22px 40px; min-height: 0; }
  .ab--short .ab__word { font-size: 96px; }
  .ab--short .ab__phon { margin: 8px 0 14px; }
  .ab--short .ab__facts { grid-template-columns: 1fr 1fr; }
  .ab--short .ab__facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ab--short .ab__facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- About: the ink word ---------- */
.ab__ink { position: relative; width: 100%; margin-top: 6px; }
.ab__ink canvas { display: block; width: 100%; touch-action: none; }
.ab__made { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; color: var(--soft); }
.ab__made b { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 4px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 500; }
.ab__made b::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--acc, var(--ember)); transform: rotate(45deg); }
.ab__made b.flip { animation: chip .5s var(--ease); }
@keyframes chip { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ab__hint { opacity: .7; }
.ab--short .ab__phon { margin-top: 0; }
.ab__defs li[data-ink] { cursor: pointer; transition: padding .35s var(--ease), color .3s; }
.ab__defs li[data-ink]:hover { padding-left: 10px; color: var(--ember); }
/* facts lean toward the pointer */
.ab__facts div { transition: transform .4s var(--ease), background .3s; border-radius: 12px; }
.ab__facts div:hover { transform: translateY(-4px) rotate(-1.5deg); background: #fff; }


.ink-ghost { position: absolute; left: 0; top: 0; margin: 0 0 0 -7px; pointer-events: none; opacity: 0; transition: opacity .35s; transform-origin: 7px 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.ab__hint { transition: opacity .5s; }
.ab__hint.gone { opacity: 0; }
@media (hover: none) { .ab__hint { opacity: 1; color: var(--ink); } .ab__hint.gone { opacity: 0; } }

/* ---------- Ink in water behind the opening page ---------- */
.inkbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
body:not(.is-loading) .inkbg { opacity: 1; }
.stage > .top, .stage > .headline, .stage > .row, .stage > .credit, .stage > .foot { position: relative; z-index: 2; }

/* ---------- About, redesigned: one screen, the word large, a quiet pulse of life ---------- */
.abx { max-width: 1280px; min-height: 100%; margin: 0 auto; padding: 8vh 5vw 6vh; display: flex; flex-direction: column; justify-content: center; gap: 2.2vh; }
.abx__k { color: var(--ember); margin: 0; }
.abx__hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3vw; }
.abx__ink { max-width: 820px; margin: 0; }
/* a faint pixel grid under the word, the paper it is drawn on */
.abx__ink::before { content: ''; position: absolute; inset: -4% -2%; background-image: radial-gradient(rgba(21,21,21,.13) 1px, transparent 1.3px); background-size: 12px 12px;
  -webkit-mask: radial-gradient(ellipse at 45% 55%, #000 30%, transparent 72%); mask: radial-gradient(ellipse at 45% 55%, #000 30%, transparent 72%); pointer-events: none; }
.abx__badge { position: relative; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; margin-right: 2vw; }
.abx__badge svg { display: block; width: 100%; height: 100%; animation: abxSpin 32s linear infinite; overflow: visible; }
.abx__badge text { font-family: var(--mono); font-size: 13.5px; letter-spacing: .14em; fill: var(--ink); }
.abx__mark { position: absolute; inset: 31%; border: 2.5px solid var(--ink); border-radius: 50%; }
.abx__mark i { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; margin: -11% 0 0 -11%; border-radius: 50%; background: var(--ember);
  transform: rotate(0deg) translateY(-227%); animation: abxOrbit 7s linear infinite; box-shadow: 0 0 0 4px var(--paper); }
@keyframes abxSpin { to { transform: rotate(360deg); } }
@keyframes abxOrbit { to { transform: rotate(360deg) translateY(-227%); } }

.abx__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px 30px; flex-wrap: wrap; padding-bottom: 2.4vh; border-bottom: 1px solid var(--line); }
.abx__phon { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; font-size: 19px; color: var(--soft); margin: 0; }
.abx__phon .mono { font-size: 13px; color: var(--ink); }
.abx__phon i { font-family: var(--serif); font-size: 22px; }
.abx__phon button { font: inherit; color: var(--ink); padding: 3px 12px 2px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; transition: border-color .3s, color .3s, transform .4s var(--ease); }
.abx__phon button:hover { border-color: var(--ember); color: var(--ember); transform: translateY(-2px); }
.abx .ab__made { margin: 0; }

.abx__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 3.4vw; padding-top: .6vh; }
.abx__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.abx__n { color: var(--soft); margin: 0; }
.abx__big { margin: 0; font-size: clamp(26px, 2.5vw, 40px); font-weight: 500; letter-spacing: -.045em; line-height: 1.06; }
.abx__big em { position: relative; display: inline-block; font-family: var(--serif); font-weight: 400; color: var(--ember); letter-spacing: -.01em; }
.abx__line { position: absolute; left: -3%; bottom: -.08em; width: 106%; height: .3em; overflow: visible; }
.abx__line path { fill: none; stroke: var(--ember); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.abx__line .a { stroke-width: 1.6; stroke-opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .9s; }
.abx__line .b { stroke-width: 2.4; stroke-dasharray: .16 1.2; stroke-dashoffset: .16; opacity: 0; }
.page--about.is-in .abx__line .a { stroke-dashoffset: 0; }
.page--about.is-in .abx__line .b { opacity: 1; transition: opacity .6s 2s; animation: abxTravel 6s cubic-bezier(.45,0,.35,1) 2s infinite; }
@keyframes abxTravel { from { stroke-dashoffset: .16; } to { stroke-dashoffset: -1.2; } }

.abx__txt { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a4946; }
.abx__now { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; }
.abx__nowk { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); }
.abx__nowk i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: abxPulse 2.4s ease-in-out infinite; }
@keyframes abxPulse { 50% { opacity: .3; transform: scale(.7); } }
.abx__tick { position: relative; height: 1.5em; overflow: hidden; font-size: 15px; }
.abx__tick p { position: absolute; inset: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(100%); transition: transform .7s var(--ease), opacity .5s; }
.abx__tick p.on { opacity: 1; transform: none; }
.abx__tick p.out { opacity: 0; transform: translateY(-100%); }
.abx__tick b { font-weight: 500; }

.abx__facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.abx__facts div { display: flex; flex-direction: column; gap: 3px; padding: 14px 0 12px; }
.abx__facts div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.abx__facts b { font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.04em; }
.abx__facts .mono { color: var(--soft); font-size: 10px; }
.abx__end { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.abx .ab__sign { margin: 0; flex-direction: column; gap: 2px; }
.abx .ab__sign span:first-child { font-size: 26px; }

/* entrance: once, then still */
.page--about .abx > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.page--about.is-in .abx > * { opacity: 1; transform: none; }
.page--about.is-in .abx > :nth-child(2) { transition-delay: .08s; }
.page--about.is-in .abx > :nth-child(3) { transition-delay: .18s; }
.page--about.is-in .abx > :nth-child(4) { transition-delay: .28s; }

@media (max-width: 900px) {
  .abx { padding: 66px 20px 26px; gap: 16px; justify-content: flex-start; }
  .abx__hero { display: block; }
  .abx__ink { max-width: none; }
  .abx__badge { position: absolute; right: -4px; top: -46px; width: 86px; margin: 0; }
  .abx__badge text { font-size: 15px; }
  .abx__meta { padding-bottom: 14px; gap: 10px; }
  .abx__phon { font-size: 16px; gap: 6px 8px; }
  .abx__phon i { font-size: 18px; }
  .abx__phon button { padding: 2px 10px 1px; }
  .abx .ab__hint { display: none; }
  .abx__grid { grid-template-columns: 1fr; gap: 18px; }
  .abx__col { gap: 10px; }
  .abx__col--big .abx__n { display: none; }
  .abx__n { font-size: 10px; }
  .abx__big { font-size: 27px; }
  .abx__txt { font-size: 14.5px; line-height: 1.55; }
  .abx__tick { font-size: 14px; }
  .abx__facts div { padding: 11px 0 9px; }
  .abx__facts div + div { padding-left: 10px; }
  .abx .ab__sign span:first-child { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .abx__badge svg, .abx__mark i, .abx__nowk i { animation: none !important; }
  .page--about .abx > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .abx__line .a { stroke-dashoffset: 0 !important; transition: none !important; }
  .abx__line .b { display: none; }
  .abx__tick p { transition: none; }
}
.abx__ink { max-width: 960px; }
.abx__phon .mono { text-transform: none; letter-spacing: .02em; }
@media (max-width: 900px) {
  .abx { gap: 12px; padding-top: 62px; }
  .abx__badge { top: 14px; right: -6px; width: 80px; }
  .abx__phon { font-size: 15px; }
  .abx__phon i { display: none; }
  .abx__phon button { font-size: 14px; }
  .abx__meta { padding-bottom: 12px; }
  .abx__grid { gap: 14px; }
  .abx__big { font-size: 25px; }
  .abx__now { padding: 10px 12px; gap: 5px; }
}