/* FABULOUS, first draft in the spirit of researchdesignagency.com:
   white page, black type, one accent (magenta), very large grotesk.
   Sections: tokens, base, header, hero, typed statements, studio block, services, work, contact, footer curtain, work index, responsive. */

/* ---------- Greek: Neue Haas Grotesk has no Greek, so Greek letters fall back to a Greek Helvetica.
   unicode-range means the files are only downloaded on pages that contain Greek. ---------- */
@font-face { font-family: "fab-greek"; src: url(../fonts/helvetica-greek-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "fab-greek"; src: url(../fonts/helvetica-greek-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
/* Greek pages: the whole article is set in the Greek Helvetica, so the English words inside Greek text match it.
   Display sizes use the Light cut, which sits closest to Neue Haas Grotesk Display Regular. */
@font-face { font-family: "fab-el-display"; src: url(../fonts/helvetica-greek-300.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "fab-el-display"; src: url(../fonts/helvetica-greek-400.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "fab-el-display"; src: url(../fonts/helvetica-greek-700.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "fab-el-text"; src: url(../fonts/helvetica-greek-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "fab-el-text"; src: url(../fonts/helvetica-greek-700.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --mute: #6E6E6E;
  --line: #E4E4E4;
  --accent: #EC008C;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Neue Haas Grotesk from Adobe Fonts once the web project is in; Helvetica until then */
  --display: "neue-haas-grotesk-display", "fab-greek", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "neue-haas-grotesk-text", "fab-greek", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 2vw, 28px);
  --foot-h: min(100svh, 920px);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--accent); color: var(--ink); font: 400 15px/1.45 var(--text); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The page sits on top of the footer and slides away to reveal it */
main { position: relative; z-index: 2; background: var(--paper); margin-bottom: var(--foot-h); }

/* ---------- Header: inverts over whatever is under it ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: clamp(16px, 1.6vw, 26px) var(--gutter); color: #fff; mix-blend-mode: difference; font: 400 clamp(18px, 1.67vw, 34px)/1 var(--display); }
.bar.on-accent { color: var(--ink); mix-blend-mode: normal; }
.bar .brand { font-size: .78em; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.bar nav { display: flex; gap: clamp(20px, 2.2vw, 40px); }
.bar .end { justify-self: end; }
.bar a { position: relative; }
.bar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .bar a:hover::after { transform: scaleX(1); transform-origin: left; } }

/* ---------- Hero: black and white reel of people making things ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; background: #111; overflow: hidden; color: #fff; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.hero .cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 6vh, 64px); z-index: 2; color: #fff; mix-blend-mode: difference; }
.hero h1 { font: 500 clamp(2.2rem, 3.4vw, 3.4rem)/1 var(--display); letter-spacing: -.01em; }
.hero p { font: 400 clamp(1rem, 1.25vw, 1.25rem)/1.3 var(--display); margin-top: 8px; }

/* ---------- Typed statements: letters appear behind a caret, black bars hold the lines still to come ---------- */
.statement { padding: clamp(80px, 14vh, 160px) var(--gutter); }
.typed { position: relative; font: 400 clamp(1.6rem, 2.35vw, 2.6rem)/1.13 var(--display); letter-spacing: -.005em; max-width: 50ch; }
.typed.wide { max-width: 54ch; }
.typed .c { opacity: 0; }
.typed .c.on { opacity: 1; }
.typed .c.caret { box-shadow: 2px 0 0 var(--ink); }
.typed .bar-line { position: absolute; background: var(--ink); pointer-events: none; }
.typed.done .bar-line { display: none; }
.typed .w { white-space: nowrap; }

/* ---------- Studio block: image + small text ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); padding: 0 var(--gutter); align-items: center; }
.studio figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.studio figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
/* the φ from the logo, in magenta, multiplied into the photo */
.studio figure .mark { position: absolute; left: 50%; top: 50%; height: 72%; aspect-ratio: 344 / 372; transform: translate(-50%, -50%); background: var(--accent); mix-blend-mode: multiply;
  -webkit-mask: url(../img/phi.svg) center / contain no-repeat; mask: url(../img/phi.svg) center / contain no-repeat; }
.studio .copy { max-width: 56ch; justify-self: end; }
.studio .copy p { font-size: 17px; line-height: 1.45; color: #333; }
.studio .copy p + p { margin-top: 12px; }
.btn { display: inline-block; margin-top: 22px; padding: 11px 16px; border: 1px solid var(--ink); font: 500 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; transition: background .3s, color .3s; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ink); color: #fff; } }

/* ---------- Services: four huge rows that open a short text ---------- */
.services { padding: clamp(40px, 8vh, 90px) 0 0; }
.svc { border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc button { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; text-align: left; padding: clamp(14px, 2.2vh, 26px) var(--gutter); }
.svc .name { font: 400 clamp(2.6rem, 5.6vw, 5.8rem)/1 var(--display); letter-spacing: -.02em; transition: color .4s var(--ease), transform .6s var(--ease); }
.svc .plus { width: clamp(18px, 2vw, 28px); aspect-ratio: 1; position: relative; flex: none; align-self: center; }
.svc .plus::before, .svc .plus::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; margin-top: -1px; background: currentColor; transition: transform .5s var(--ease); }
.svc .plus::after { transform: rotate(90deg); }
.svc.open .plus::after { transform: rotate(0deg); }
.svc.open .name { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .svc button:hover .name { transform: translateX(14px); } }
.svc .panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.svc.open .panel { grid-template-rows: 1fr; }
.svc .panel > div { overflow: hidden; }
.svc .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); padding: 0 var(--gutter) clamp(22px, 4vh, 40px); }
.svc .inner p { font: 400 clamp(1.05rem, 1.35vw, 1.35rem)/1.35 var(--display); max-width: 44ch; grid-column: 2; }
.svc .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* ---------- Selected work: three photographs, colour comes in on hover ---------- */
.work { padding: clamp(80px, 14vh, 150px) var(--gutter) 0; }
.work .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.work a { display: block; }
.work figure { aspect-ratio: 1; overflow: hidden; background: #ddd; }
.work figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.02); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .work a:hover figure img { filter: grayscale(0); transform: scale(1.06); } }
.work .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; font: 500 13px/1.3 var(--text); text-transform: uppercase; }
.work .cap span { font-size: 10px; letter-spacing: .1em; color: var(--mute); text-align: right; }
/* Unfold: each photo opens from the top edge downwards, one after the other, then its caption */
.work [data-unfold] figure { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1) var(--d, 0s); }
.work [data-unfold] figure img { transform: scale(1.18) translateY(-8%); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), filter .8s var(--ease); }
.work [data-unfold] .cap { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease) calc(var(--d, 0s) + .8s), transform .7s var(--ease) calc(var(--d, 0s) + .8s); }
.work [data-unfold].in figure { clip-path: inset(0 0 0 0); }
.work [data-unfold].in figure img { transform: scale(1.02); }
.work [data-unfold].in .cap { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .work [data-unfold].in:hover figure img { transform: scale(1.06); transition: transform 1.2s var(--ease), filter .8s var(--ease); } }
@media (prefers-reduced-motion: reduce) { .work [data-unfold] figure, .work [data-unfold] figure img, .work [data-unfold] .cap { clip-path: none; transform: none; opacity: 1; transition: none; } }
.more { display: flex; justify-content: flex-end; margin-top: 28px; font: 500 14px/1 var(--text); }
.more a { display: inline-flex; gap: 8px; align-items: center; }
.more a i { font-style: normal; transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .more a:hover i { transform: translateX(5px); } }

/* ---------- Contact ---------- */
.contact { padding: clamp(110px, 18vh, 200px) var(--gutter) clamp(90px, 14vh, 160px); }

/* ---------- Footer curtain: fixed under the page, revealed as the page scrolls away ---------- */
.foot { position: fixed; inset: auto 0 0; height: var(--foot-h); z-index: 1; background: var(--accent); color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--gutter) + 46px) var(--gutter) var(--gutter); }
.foot .cols { display: grid; grid-template-columns: repeat(3, max-content) 1fr; gap: clamp(32px, 5.5vw, 96px); font: 400 16px/1.65 var(--text); }
.foot h3 { font: 500 12px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-bottom: 10px; }
.foot .news { justify-self: end; width: min(100%, 340px); }
.foot .news form { display: flex; border-bottom: 1px solid var(--ink); }
.foot .news input { flex: 1; min-width: 0; background: none; border: 0; padding: 8px 0; font: 400 18px/1.2 var(--text); color: var(--ink); }
.foot .news input::placeholder { color: rgba(10,10,10,.5); }
.foot .news button { padding: 0 2px; font-size: 20px; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.foot .base { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); }
.foot .word { font: 600 clamp(4rem, 15vw, 16.5rem)/.78 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.foot .slogan { font: 500 clamp(1.7rem, 4vw, 4.8rem)/1 var(--display); letter-spacing: -.02em; margin: 0 0 .06em var(--slogan-x, 0px); white-space: nowrap; transition: margin-left .4s var(--ease); }
.foot .side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-bottom: .4vw; }
.foot .side img { width: clamp(64px, 8vw, 130px); }
.foot .side small { font: 400 13px/1.3 var(--text); }

/* ---------- Work index: huge names in a zigzag, preview follows the cursor ---------- */
.index-intro { padding: calc(var(--gutter) + 120px) var(--gutter) clamp(60px, 10vh, 110px); }
.list { padding: 0 var(--gutter) clamp(80px, 14vh, 150px); }
.list a { display: block; border-top: 1px solid var(--line); padding: 6px 0 4px; }
.list a:last-child { border-bottom: 1px solid var(--line); }
.list .row { display: flex; align-items: baseline; gap: 14px; padding-left: var(--x, 0); }
.list .n { font: 500 9px/1 var(--text); color: var(--ink); }
.list .t { font: 400 clamp(1.9rem, 4.4vw, 4.8rem)/1.02 var(--display); letter-spacing: -.01em; text-transform: uppercase; transition: color .3s; }
.list .k { font: 500 9px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .list a:hover .t { color: var(--accent); } }
.peek { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(240px, 24vw, 380px); aspect-ratio: 16 / 10; pointer-events: none; overflow: hidden;
  opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .3s, transform .4s var(--ease); }
.peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.peek img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Reveals (JS adds .in) ---------- */
/* Line reveal: each line rises out of its own mask, one after the other, then the button */
.js [data-lines]:not(.split) { opacity: 0; }
[data-lines] .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
[data-lines] .ln-in { display: block; transform: translateY(105%) rotate(2deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease) calc(var(--i) * 70ms); }
[data-lines].in .ln-in { transform: none; }
[data-lines] .btn { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) var(--after, .6s), transform .8s var(--ease) var(--after, .6s), background .3s, color .3s; }
[data-lines].in .btn { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-clip] { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); }
.js [data-clip].in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-clip], [data-lines] .ln-in, [data-lines] .btn { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ---------- 404 ---------- */
.nf-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; font: 400 clamp(18px, 1.67vw, 26px)/1.2 var(--display); }
.nf-links a { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .nf-links a:hover { color: var(--accent); } }

/* ---------- Phone menu: black curtain, links set large ---------- */
.menu-btn { display: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; justify-self: end; }
.menu { position: fixed; inset: 0; z-index: 49; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(clamp(16px, 1.6vw, 26px) * 2 + 34px) var(--gutter) max(24px, env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); }
.menu[hidden] { display: none; }
.menu.open { clip-path: inset(0); }
.menu nav { display: flex; flex-direction: column; margin-top: auto; margin-bottom: auto; }
.menu nav a { display: block; overflow: hidden; font: 500 clamp(44px, 14vw, 96px)/1.04 var(--display); letter-spacing: -.02em; padding-bottom: .04em; }
.menu nav a .w { display: inline-block; transform: translateY(105%); transition: transform .7s var(--ease); }
.menu.open nav a .w { transform: none; transition-delay: calc(.2s + var(--i) * 60ms); }
.menu nav a[aria-current="page"] { color: var(--accent); }
.menu-base { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: rgba(255,255,255,.6); opacity: 0; transition: opacity .5s; }
.menu.open .menu-base { opacity: 1; transition-delay: .55s; }
.menu-base a:active, .menu nav a:active { color: var(--accent); }
.bar.menu-open { color: #fff; mix-blend-mode: normal; }
html.menu-lock, html.menu-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu, .menu nav a .w, .menu-base { transition: none; } }

/* ---------- Responsive ---------- */
.mobile-only { display: none; }
@media (max-width: 860px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar nav, .bar .end { display: none; }
  .menu-btn { display: block; }
  .studio { grid-template-columns: 1fr; }
  .studio .copy { justify-self: start; }
  .svc .inner { grid-template-columns: 1fr; }
  .svc .inner p, .svc .tags { grid-column: 1; }
  .work .grid { grid-template-columns: 1fr; }
  .foot .cols { grid-template-columns: repeat(2, max-content); }
  .foot .news { grid-column: 1 / -1; justify-self: start; }
  .foot .side img { display: none; }
  .foot .base { flex-direction: column; align-items: flex-start; }
  .foot .side { align-items: flex-start; padding-bottom: 0; }
  .foot .base { gap: 10px; }
  .mobile-only { display: inline-block; }
  /* the wordmark runs edge to edge (FABULOUS is ~4.85 times as wide as its font size) */
  .foot .word { font-size: calc((100vw - 2 * var(--gutter)) / 4.85); }
  .list .row { padding-left: 0; flex-wrap: wrap; }
}

/* ---------- App pages (work/{slug}.html) ---------- */
.app-head { padding: calc(var(--gutter) + 120px) var(--gutter) clamp(50px, 8vh, 90px); }
.app-head .kicker { font: 500 11px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.app-name { font: 400 clamp(3.4rem, 10vw, 10rem)/.9 var(--display); letter-spacing: -.035em; margin: 10px 0 clamp(28px, 5vh, 50px); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(36px, 6vh, 60px); border-top: 1px solid var(--line); padding-top: 16px; }
.facts dt { font: 500 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.facts dd { font: 400 15px/1.4 var(--text); }
.app-screens { padding: 0 var(--gutter); }
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.phones figure img { width: 100%; border-radius: clamp(18px, 2.4vw, 38px); border: 1px solid var(--line); background: #f3f3f3; }
.phones figcaption { margin-top: 10px; font: 500 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.app-next { display: flex; justify-content: space-between; gap: 20px; padding: clamp(70px, 12vh, 130px) var(--gutter) clamp(80px, 14vh, 150px); font: 400 clamp(1.1rem, 1.6vw, 1.6rem)/1.2 var(--display); }
@media (hover: hover) and (pointer: fine) { .app-next a:hover { color: var(--accent); } }
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68vw; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .phones figure { scroll-snap-align: start; }
}

/* ---------- Journal: article pages (journal/{slug}.html, el/journal/{slug}.html) ---------- */
.kicker { font: 500 11px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
@media (hover: hover) and (pointer: fine) { .kicker a:hover { color: var(--accent); } }
.art-head { padding: calc(var(--gutter) + 120px) var(--gutter) clamp(44px, 8vh, 90px); }
.typed.art-title { font-size: clamp(2.4rem, 5.2vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 17ch; margin-top: 16px; }
.art-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); padding: 0 var(--gutter); }
/* left column: who, when, how long, which language, and the sections; it stays in view while reading */
.art-meta { align-self: start; position: sticky; top: 110px; max-width: 300px; }
.art-meta dl { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.art-meta dt, .toc p { font: 500 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.art-meta dd { font: 400 15px/1.4 var(--text); }
.art-meta dd span { display: block; color: var(--mute); }
.art-meta .lang a[aria-current] { color: var(--accent); }
.toc { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 16px; }
.toc ol { list-style: none; counter-reset: t; display: grid; gap: 8px; margin-top: 8px; }
.toc li { counter-increment: t; display: flex; gap: 10px; font: 400 14px/1.35 var(--text); color: var(--mute); transition: color .3s; }
.toc li::before { content: counter(t, decimal-leading-zero); font: 500 10px/1.9 var(--text); color: var(--accent); }
.toc li.on { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .art-meta a[href]:hover { color: var(--accent); } }
.art-body { counter-reset: sec; }
/* text keeps a reading measure; photos and screenshots may use the full column */
.art-body > :not(.art-cover):not(.art-shots) { max-width: 680px; }
.art-sub { font: 400 clamp(1.1rem, 1.5vw, 1.5rem)/1.25 var(--display); color: var(--mute); margin-top: 18px; max-width: 40ch; }
.art-body h3 { font: 500 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 4em 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.art-body h3 + ul li { font-size: 14px; line-height: 1.5; color: var(--mute); }
/* screenshots of our sites, each one links to the live site */
.art-shots { display: grid; gap: var(--gutter); margin: 2.2em 0 2.4em; }
.art-shots.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.art-shots figure a { display: block; }
.art-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--line); transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) { .art-shots figure > a:hover img { transform: translateY(-4px); } .art-shots figcaption a:hover { color: var(--accent); } }
.art-shots figcaption { font: 400 13px/1.45 var(--text); color: var(--mute); margin-top: 10px; }
.art-shots figcaption a { color: var(--ink); font-weight: 500; text-decoration: none; transition: color .3s; }
.art-shots figcaption i { font-style: normal; color: var(--accent); }
.art-body p, .art-body li { font: 400 clamp(17px, 1.15vw, 19px)/1.62 var(--text); color: #222; }
.art-body > p + p { margin-top: 1em; }
.art-body strong { font-weight: 500; color: var(--ink); }
main:lang(el) { --display: "fab-el-display", "Helvetica Neue", Helvetica, Arial, sans-serif; --text: "fab-el-text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.art-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.art-body .lede p { font: 400 clamp(1.35rem, 1.9vw, 1.9rem)/1.28 var(--display); letter-spacing: -.005em; color: var(--ink); }
.art-cover { margin-top: clamp(36px, 6vh, 64px); aspect-ratio: 3 / 2; overflow: hidden; background: #ddd; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; }
.art-body .art-caption { font: 400 13px/1.4 var(--text); color: var(--mute); margin-top: 10px; }
.art-body h2 { counter-increment: sec; font: 500 clamp(1.5rem, 2.1vw, 2.2rem)/1.12 var(--display); letter-spacing: -.01em; margin: 2.3em 0 .65em; scroll-margin-top: 110px; }
.art-body h2::before { content: counter(sec, decimal-leading-zero); display: block; font: 500 11px/1 var(--text); letter-spacing: .1em; color: var(--accent); margin-bottom: 14px; }
.art-body ul { list-style: none; margin: .4em 0 1em; }
.art-body li { position: relative; padding-left: 26px; }
.art-body li + li { margin-top: .55em; }
.art-body li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--accent); }
.tbl { margin: 1.4em 0 1.2em; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font: 400 16px/1.4 var(--text); }
.tbl th { text-align: left; font: 500 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.tbl td { padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th:last-child, .tbl td:last-child { text-align: right; width: 42%; padding-left: 16px; }
.art-author { margin-top: clamp(56px, 9vh, 90px); border-top: 1px solid var(--ink); padding-top: 18px; }
.art-body .art-author p { font: 400 15px/1.5 var(--text); color: var(--mute); max-width: 52ch; }
.art-body .art-author p + p { margin-top: 6px; }
.art-body .art-author strong { color: var(--ink); }
.art-cta { padding-bottom: clamp(40px, 6vh, 70px); }

/* ---------- Journal index ---------- */
.jlist { padding: 0 var(--gutter) clamp(80px, 14vh, 150px); }
.jlist a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: baseline; border-top: 1px solid var(--line); padding: 18px 0 24px; }
.jlist a:last-child { border-bottom: 1px solid var(--line); }
.jlist .d, .jlist .k { font: 500 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.jlist .t { font: 400 clamp(1.8rem, 3.6vw, 3.8rem)/1.04 var(--display); letter-spacing: -.015em; transition: color .3s; }
.jlist .k { grid-column: 2; margin-top: 12px; }
@media (hover: hover) and (pointer: fine) { .jlist a:hover .t { color: var(--accent); } }

@media (max-width: 860px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-meta { position: static; max-width: none; }
  .art-meta dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { display: none; }
  .art-body { margin-top: 28px; }
  .art-shots.n2 { grid-template-columns: 1fr; }
  .jlist a { grid-template-columns: 1fr; }
  .jlist .k { grid-column: 1; }
  .jlist .t { margin-top: 8px; }
}

/* ---------- Home: latest three articles ---------- */
.home-journal { padding: clamp(110px, 18vh, 200px) var(--gutter) 0; }
.home-journal .kicker { margin-bottom: 18px; }
.home-journal .jlist { padding: 0; }