/* Lutfi theme. Things theme.json cannot say: waves, blobs, pills, the split door, the wordmark.
   Mobile first. Fonts come from theme.json (bundled woff2, no CDN). */

:root {
  --l-paper: #EEF2EC; --l-paper2: #E2EAE3; --l-ink: #1D3B3A; --l-teal: #2E6B67; --l-lagoon: #4F8FA0;
  --l-sage: #A9C3B0; --l-sand: #E3D6BC; --l-soft: #5B7572;
  --t-night: #0A1428; --t-deep: #14254A; --t-cobalt: #1F4FA8; --t-signal: #82B1FF; --t-line: #2A3B63;
  --t-text: #E8ECF5; --t-mute: #9AA8C4;
  --pad: clamp(20px, 4.45vw, 64px);
  --f-display: "Crimson Pro", Georgia, serif;
  --f-body: Newsreader, Georgia, serif;
  --f-ui: Archivo, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
a { text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--l-teal); outline-offset: 3px; border-radius: 4px; }
.is-tek-side a:focus-visible, .tek a:focus-visible { outline-color: var(--t-signal); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Every group used as a layout box: kill the flow-layout margins so gaps are ours. */
body .wrap > *, body .hero > *, body .hero__text > *, body .hero__art > *, body .band > *, body .head > *,
body .card-l > *, body .card-l .body > *, body .row > *, body .row-main > *, body .arts-top > *, body .arts-top__title > *,
body .feat > *, body .txt > *, body .proj > *, body .proj__main > *, body .proj__aside > *, body .col > *,
body .by > *, body .meta > *, body .L-nav > *, body .L-foot > *, body .cv-row > *, body .about > *, body .page-top > * { margin-block: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.L-main { min-height: 40vh; }

.wrap { width: 100%; max-width: calc(1312px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: 26px 34px; }

.ph, .L-foot .ph { color: var(--l-soft); font-style: italic; }
.blob { border-radius: 48% 52% 44% 56% / 58% 42% 58% 42%; }

/* ---------- Header ---------- */
.L-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--pad); max-width: calc(1312px + 2 * var(--pad)); margin-inline: auto; position: relative; }
.L-nav .brand { font: italic 400 22px/1.1 var(--f-display); color: var(--l-ink); text-decoration: none; letter-spacing: -.01em; }
.L-menu { font-family: var(--f-body); }
.L-menu .wp-block-navigation__container { gap: 20px; }
.L-menu .wp-block-navigation-item__content { padding: 0 0 3px; border-bottom: 2px solid transparent; color: var(--l-ink); text-decoration: none; }
.L-menu .wp-block-navigation-item:hover > .wp-block-navigation-item__content { border-bottom-color: var(--l-sage); }
.L-menu .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--l-teal); }
.wp-block-navigation__responsive-container-open { width: 40px; height: 40px; border-radius: 50%; background: var(--l-paper2); color: var(--l-ink); align-items: center; justify-content: center; }
.wp-block-navigation__responsive-container-open svg { width: 20px; height: 20px; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--l-paper); padding: 20px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; font: 400 30px/1.2 var(--f-display); align-items: flex-start; }
.wp-block-navigation__responsive-container-close { width: 40px; height: 40px; border-radius: 50%; background: var(--l-paper2); display: flex; align-items: center; justify-content: center; }
.nav-chip-mobile { display: none; }
.is-menu-open .nav-chip-mobile { display: block; }
.is-menu-open .nav-chip-mobile a { font: 600 13px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; background: var(--t-night); color: var(--t-text); }

.switch { display: none; line-height: 0; background: var(--t-night); text-decoration: none; }
.switch img { display: block; width: 118px; height: 33px; }
.switch:hover { background: var(--t-deep); }
.switch:hover img { opacity: .8; }

@media (min-width: 600px) {
  .switch { display: inline-flex; }
  .nav-chip-mobile { display: none !important; }
  .L-nav { padding-block: 22px; }
  .L-nav .brand { font-size: 24px; }
  .L-menu .wp-block-navigation__container { gap: 20px; }
}
@media (min-width: 1000px) {
  .L-nav { padding-block: 26px; }
  .L-nav .brand { font-size: 26px; }
  .L-menu .wp-block-navigation__container { gap: 34px; }
}

/* ---------- Footer ---------- */
.L-foot { max-width: calc(1312px + 2 * var(--pad)); margin-inline: auto; padding: 34px var(--pad) 40px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 16px; font-style: italic; color: var(--l-soft); }
.L-foot .brand { font: italic 400 18px/1.2 var(--f-display); color: var(--l-ink); }
.L-foot p { margin: 0; }
.L-foot a { color: var(--l-teal); }

/* ---------- Pills, buttons ---------- */
.pill, .pill-terms a, .pill-terms { font: italic 15px/1.2 var(--f-body); }
.pill, .pill-terms a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--l-paper2); color: var(--l-teal); border: 1px solid var(--l-sage); text-decoration: none; }
p.pill { margin: 0; padding: 0; background: none; border: 0; }
p.pill a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--l-paper2); color: var(--l-teal); border: 1px solid var(--l-sage); text-decoration: none; }
.pill.ph { color: var(--l-soft); }
a.pill:hover, p.pill a:hover { background: var(--l-sage); color: var(--l-ink); }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pill-terms { display: flex; gap: 8px; flex-wrap: wrap; }
.kicker { font: italic 18px/1.2 var(--f-body); color: var(--l-teal); margin: 0; }
.wp-block-buttons { gap: 12px; }
.wp-block-button__link { text-decoration: none; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--l-teal); border: 1.5px solid var(--l-teal); }
.wp-block-button__link:hover { background: var(--l-ink); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--l-teal); color: #fff; }
.L-btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--l-teal); color: #fff; font: 500 17px/1 var(--f-body); text-decoration: none; }
.L-btn:hover { background: var(--l-ink); color: #fff; }
.T-btn { display: inline-block; padding: 15px 22px; background: var(--t-cobalt); color: #fff; font: 600 15px/1 var(--f-ui); text-decoration: none; }
.T-btn:hover { background: #2A62C9; color: #fff; }
.T-btn.ghost { background: transparent; border: 1px solid var(--t-line); color: var(--t-text); }
.T-btn.ghost:hover { border-color: var(--t-signal); }
.label { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-signal); }

/* ---------- Lutfi home hero ---------- */
.hero { display: grid; gap: 26px; align-items: center; padding-top: 6px; padding-bottom: 8px; }
.hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; margin: 12px 0 0; }
.hero h1 em, .proj h1 em { color: var(--l-teal); }
.hero__intro { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--l-soft); margin: 18px 0 24px !important; max-width: 560px; }
.hero__art { min-width: 0; }
.hero-frame { margin: 0; }
.hero-frame img { display: block; width: 100%; height: clamp(210px, 25vw, 330px); object-fit: cover; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; }
.cap { font: italic 15px/1 var(--f-body); color: var(--l-soft); text-align: right; margin: 10px 0 0 !important; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; }
}

.band { background: var(--l-paper2); margin-top: 40px; position: relative; padding: 14px 0 48px; }
.band__wave { position: absolute; left: 0; top: -27px; width: 100%; height: 28px; display: block; }
@media (min-width: 900px) { .band__wave { top: -41px; height: 42px; } .band { margin-top: 44px; padding-bottom: 60px; } }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 22px !important; }
.head h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0; }

/* ---------- Project cards ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.cards > li { margin: 0; }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card-l { background: #fff; border-radius: 28px; overflow: hidden; height: 100%; box-shadow: 0 1px 0 rgba(29, 59, 58, .06); }
.card-l .body { padding: 20px 24px 26px; }
.card-l .body .pill { margin-bottom: 0; }
.card-l h3 { font-size: 23px; margin: 10px 0 8px !important; }
.card-l h3 a { color: var(--l-ink); text-decoration: none; }
.card-l h3 a:hover { color: var(--l-teal); }
.card-excerpt { font-size: 16px; line-height: 1.45; color: var(--l-soft); margin: 0; }
.art { height: 130px; position: relative; overflow: hidden; }
@media (min-width: 600px) { .art { height: 170px; } }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-link { display: block; }
.art--blob1 { background: radial-gradient(circle at 30% 60%, #4F8FA0 0 32%, transparent 33%), radial-gradient(circle at 75% 35%, #A9C3B0 0 26%, transparent 27%), #DDE7E1; }
.art--blob2 { background: radial-gradient(ellipse at 60% 70%, #2E6B67 0 30%, transparent 31%), radial-gradient(circle at 25% 30%, #E3D6BC 0 22%, transparent 23%), #E7EDE6; }
.art--blob3 { background: radial-gradient(circle at 50% 50%, #E3D6BC 0 18%, transparent 19%), radial-gradient(circle at 50% 50%, #4F8FA0 0 36%, transparent 37%), #E2EAE3; }
.art__soon { position: absolute; left: 14px; bottom: 12px; font: italic 13px/1 var(--f-body); color: var(--l-ink); background: rgba(255, 255, 255, .78); padding: 5px 10px; border-radius: 99px; }

/* ---------- Work page and project ---------- */
.page-top { padding-top: 6px; padding-bottom: 6px; }
.page-top h1, .arts-top h1 { margin: 8px 0 0; font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 350; line-height: 1; }
.hero-art { position: relative; height: clamp(220px, 30vw, 430px); }
.hero-art .art { height: 100%; }
.hero-art .art img { object-position: center 40%; }
.hero-art .art--blob1, .hero-art .art--blob2, .hero-art .art--blob3 { background-size: cover; }
.hero-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(44px, 6.25vw, 90px); display: block; }
.crumb { font: italic 16px/1 var(--f-body); color: var(--l-soft); margin: 14px 0 0 !important; }
.crumb a { color: var(--l-soft); }
.proj { display: grid; gap: 30px; padding-top: 12px; padding-bottom: 48px; }
.proj h1 { font-size: clamp(2.25rem, 5.5vw, 3.875rem); line-height: 1; margin: 10px 0 18px !important; }
.lede, .lede p { font-size: clamp(1.25rem, 2vw, 1.4375rem); line-height: 1.5; color: var(--l-ink); max-width: 700px; margin: 0; }
.proj__body { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.6; color: var(--l-soft); margin-top: 18px; max-width: 700px; }
.proj__body > * { margin-block: 0 16px; }
.facts { background: #fff; border-radius: 28px; padding: 26px 28px; margin: 0; }
.facts dt { font: italic 15px/1 var(--f-body); color: var(--l-teal); margin-top: 16px; }
.facts dt:first-child { margin-top: 0; }
.facts dd { font-size: 18px; line-height: 1.4; margin: 6px 0 0; }
.facts dd.ph { color: var(--l-soft); }
.wp-block-image.poster { display: flex; gap: 18px; align-items: center; margin-top: 22px; }
.wp-block-image.poster img { width: 96px; height: auto; border-radius: 14px; display: block; }
.wp-block-image.poster figcaption { margin: 0; font-size: 16px; line-height: 1.4; color: var(--l-soft); text-align: left; }
@media (min-width: 1000px) { .proj { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; } }

/* ---------- Articles ---------- */
.arts-top { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; padding-bottom: 26px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters .pill.on { background: var(--l-teal); color: #fff; border-color: var(--l-teal); }
@media (min-width: 900px) { .arts-top { flex-direction: row; justify-content: space-between; align-items: flex-end; } }

.feat-q ul { list-style: none; padding: 0; margin: 0; }
.feat { background: var(--l-ink); color: var(--l-paper); border-radius: 28px 28px 28px 64px; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.feat .txt { padding: 28px 24px 30px; }
.feat .kicker, .feat__kicker { color: var(--l-sage); display: flex; flex-wrap: wrap; gap: 0 8px; font: italic 18px/1.3 var(--f-body); }
.feat__kicker > * + *::before, .t > * + *::before, .meta > * + *::before { content: "\00B7"; margin-right: 8px; }
.meta > .pill-terms::before { content: none !important; }
.feat__kicker p, .feat__kicker div { margin: 0; }
.feat__kicker a { color: var(--l-sage); text-decoration: none; }
.feat h2 { font-size: clamp(1.75rem, 3.4vw, 2.625rem); line-height: 1.08; font-weight: 350; margin: 14px 0 !important; color: var(--l-paper); }
.feat h2 a { color: var(--l-paper); text-decoration: none; }
.feat h2 a:hover { text-decoration: underline; text-decoration-color: var(--l-sage); }
.feat .wp-block-post-excerpt__excerpt, .feat .wp-block-post-excerpt { font-size: 19px; line-height: 1.5; color: #C9D8D2; max-width: 620px; margin: 0; }
.feat .art { display: none; background: radial-gradient(circle at 40% 55%, #4F8FA0 0 30%, transparent 31%), radial-gradient(circle at 70% 30%, #A9C3B0 0 20%, transparent 21%), #2E6B67; height: auto; }
@media (min-width: 900px) {
  .feat { grid-template-columns: minmax(0, 1fr) 380px; border-radius: 40px 40px 40px 120px; }
  .feat .txt { padding: 40px 48px; }
  .feat .art { display: block; }
}

.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { margin: 0; }
.rows-wrap { padding-top: 12px; padding-bottom: 48px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d d" "main kind"; gap: 8px 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--l-sage); }
.row .d { grid-area: d; font: italic 16px/1 var(--f-body); color: var(--l-soft); }
.row .d time { font: inherit; }
.row-main { grid-area: main; min-width: 0; }
.row .kindwrap { grid-area: kind; }
.row h3 { font-size: clamp(1.25rem, 2.2vw, 1.5625rem); margin: 0 0 6px !important; }
.row h3 a { color: var(--l-ink); text-decoration: none; }
.row h3 a:hover { color: var(--l-teal); }
.t { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 16px; color: var(--l-soft); }
.t a { color: var(--l-soft); text-decoration: none; }
.t p, .t div { margin: 0; }
.kindwrap { display: inline-flex; align-items: center; gap: 24px; justify-self: end; }
.kind-note { display: none; font-size: 16px; color: var(--l-soft); }
.kind { font: 500 13px/1 var(--f-ui); letter-spacing: .05em; padding: 7px 12px; border-radius: 99px; background: #fff; color: var(--l-teal); border: 1px solid var(--l-sage); white-space: nowrap; }
.kind.pdf { background: var(--l-sand); border-color: var(--l-sand); color: var(--l-ink); }
@media (min-width: 900px) {
  .row { grid-template-columns: 140px minmax(0, 1fr) auto; grid-template-areas: "d main kind"; gap: 24px; }
  .kind-note { display: inline; }
}
.band .row .d { color: var(--l-soft); }
.wp-block-query-pagination { margin-top: 26px; gap: 14px; font-size: 16px; }

/* ---------- Single article ---------- */
.col { max-width: 720px; margin: 0 auto; padding: 22px 20px 64px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.meta .read-time { font: italic 18px/1 var(--f-body); color: var(--l-teal); }
.col h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; font-weight: 350; margin: 18px 0 18px !important; }
.stand, .stand p { font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.45; color: var(--l-soft); margin: 0; }
.by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 24px 0 26px !important; padding: 16px 0; border-block: 1px solid var(--l-sage); font-size: 17px; }
.by p { margin: 0; }
.by .wp-block-post-date::before { content: "\00B7"; margin-right: 14px; }
.by .av { width: 44px; height: 44px; background: var(--l-sage); display: block; flex: none; }
.by .dl { margin-left: auto; font: 500 14px/1 var(--f-ui); padding: 10px 14px; border-radius: 99px; background: var(--l-sand); color: var(--l-ink); text-decoration: none; }
.by .dl:hover { background: var(--l-sage); }
.entry-content { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.7; }
.entry-content > * { margin-block: 0 18px; }
.col .entry-content > p:first-of-type { display: flow-root; }
.col .entry-content > p:first-of-type::first-letter { font-family: var(--f-display); float: left; font-size: 78px; line-height: .85; padding: 6px 10px 0 0; color: var(--l-teal); }
.wp-block-pullquote { margin: 28px 0 !important; padding: 22px 26px; border: 0; border-radius: 40px; background: var(--l-paper2); text-align: left; color: var(--l-teal); }
.wp-block-pullquote blockquote { margin: 0; padding: 0; }
.wp-block-pullquote p { margin: 0; font-size: inherit; line-height: inherit; }
.wp-block-quote { margin: 28px 0; padding: 22px 26px; border: 0; border-radius: 40px; background: var(--l-paper2); }
.wp-block-quote p { margin: 0; }
@media (min-width: 900px) {
  .col { padding-top: 30px; }
  .wp-block-pullquote, .wp-block-quote { border-radius: 60px; margin-inline: -60px !important; padding: 26px 60px; }
}
.wp-block-file { margin: 24px 0; display: block; }
.wp-block-file__embed { display: block; width: 100%; max-width: 100%; border: 1px solid var(--l-sage); border-radius: 18px; background: #fff; margin-bottom: 16px; }
.wp-block-file a:not(.wp-block-file__button) { color: var(--l-teal); margin-right: 14px; font-size: 17px; }
.wp-block-file .wp-block-file__button { display: inline-block; background: var(--l-teal); color: #fff; border-radius: 999px; padding: 12px 22px; font: 500 16px/1 var(--f-body); text-decoration: none; }
.wp-block-file .wp-block-file__button:hover { background: var(--l-ink); }
.entry-content .pdf-note { font-size: 16px; font-style: italic; color: var(--l-soft); margin-top: -6px; }
.entry-content .pdf-note::first-letter { all: unset; }

/* ---------- Page body (about, cv) ---------- */
.page-body { padding-top: 10px; padding-bottom: 60px; }
.page-body > .entry-content, .page-body .wp-block-post-content { font-size: 1.1875rem; line-height: 1.6; }
.page-body .wp-block-post-content > * { margin-block: 0; }
.about { display: grid; gap: 28px; padding-top: 14px; }
.about > .about__main { min-width: 0; }
.portrait { min-height: 320px; background: var(--l-sage); border-radius: 160px 160px 32px 32px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; font: italic 16px/1 var(--f-body); color: var(--l-ink); }
.about h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 350; line-height: 1.02; margin: 10px 0 18px !important; }
.bio { font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.6; color: var(--l-soft); max-width: 760px; margin: 0; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 34px; overflow: hidden; scroll-margin-top: 20px; }
.c1 { background: var(--l-ink); color: var(--l-paper); border-radius: 32px 32px 0 0; padding: 28px 26px; }
.c2 { display: block; background: var(--t-night); color: var(--t-text); padding: 28px 26px; font-family: var(--f-ui); border-top: 3px solid var(--t-signal); text-decoration: none; }
.c2:hover { background: var(--t-deep); color: #fff; }
.c1 h3 { font-size: 28px; font-weight: 350; margin: 10px 0 10px; color: var(--l-paper); }
.c2 h3 { font: 800 26px/1.1 var(--f-ui); margin: 10px 0 10px; color: var(--t-text); letter-spacing: -.02em; }
.c1 p { font-size: 17px; line-height: 1.45; color: #C9D8D2; margin: 0; }
.c1 .kicker { color: var(--l-sage); margin: 0; }
.c2 p { font-size: 15px; line-height: 1.5; color: var(--t-mute); margin: 0; }
.c2 .go { display: inline-block; margin-top: 18px; font: 600 14px/1 var(--f-ui); color: var(--t-signal); }
.field { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c1 .field > span { background: rgba(255, 255, 255, .1); padding: 10px 16px; border-radius: 99px; font-size: 16px; }
.copy { font: 600 12px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: 11px 14px; background: var(--l-sage); color: var(--l-ink); border-radius: 99px; border: 0; cursor: pointer; }
.copy:hover, .copy.is-copied { background: #fff; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: start; padding-top: 24px; }
  /* Photo on the right on wide screens; it stays first when stacked on phones. */
  .about > .portrait { order: 2; }
  .portrait { min-height: 470px; border-radius: 210px 210px 40px 40px; }
  .contact { grid-template-columns: 1fr 1fr; }
  .c1 { border-radius: 40px 0 0 40px; padding: 30px 34px; }
  .c2 { border-top: 0; border-left: 3px solid var(--t-signal); padding: 30px 34px; }
}
/* Contact card alone (Lutfitek card hidden by the launch phase) */
.contact.contact--solo { grid-template-columns: minmax(0, 1fr); }
.contact.contact--solo .c1 { border-radius: 32px; }

/* CV */
.cv { max-width: 860px; padding-top: 14px; }
.cv h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 350; line-height: 1; margin: 8px 0 14px !important; }
.cv .cv-lede { font-size: clamp(1.125rem, 1.7vw, 1.3125rem); color: var(--l-soft); margin: 0 0 22px; }
.cv h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin: 44px 0 14px !important; }
.cv-list { border-left: 2px solid var(--l-sage); margin-left: 6px; }
.cv-row { position: relative; display: grid; gap: 2px 24px; padding: 14px 0 14px 24px; }
.cv-row::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--l-paper); border: 2px solid var(--l-teal); }
.cv-row p { margin: 0; }
.cv-role { font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.2 var(--f-display); }
.cv-org { color: var(--l-soft); }
.cv-years { font-style: italic; color: var(--l-teal); }
.cv-row a { color: var(--l-teal); }
.cv-skills { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-skills p { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--l-paper2); border: 1px solid var(--l-sage); font: italic 15px/1.2 var(--f-body); color: var(--l-soft); }
.cv-dl { display: inline-block; margin: 0 0 6px; }
.cv-dl a, .cv-dl span { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--l-teal); color: #fff; font: 500 17px/1 var(--f-body); text-decoration: none; }
.cv-dl span.ph { color: #fff; font-style: normal; }
@media (min-width: 700px) { .cv-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 140px; align-items: baseline; } .cv-years { text-align: right; } }

/* ---------- Wordmark ---------- */
.wm { --acc: #82B1FF; font-family: var(--f-ui); font-weight: 900; letter-spacing: -.025em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline; color: #EDEDED; font-variant-ligatures: none; }
.wm .i { position: relative; margin-left: .035em; }
.wm .i::after { content: ""; position: absolute; left: 50%; top: .02em; width: .2em; height: .2em; background: var(--acc); transform: translateX(-50%); }
.wm .cur { display: inline-block; width: .42em; height: .13em; background: var(--acc); margin-left: .07em; }
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--t-line) 1px, transparent 1px), linear-gradient(90deg, var(--t-line) 1px, transparent 1px); background-size: 80px 80px; opacity: .3; pointer-events: none; }

/* ---------- Landing: the split door ---------- */
.door-main { margin: 0; }
.door { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.door__side { position: relative; overflow: hidden; padding: 54px var(--pad) 40px; }
.door__left { background: var(--l-paper); color: var(--l-ink); padding-bottom: 90px; }
.door__right { background: var(--t-night); color: var(--t-text); padding-top: 34px; }
.door__in { position: relative; z-index: 1; max-width: 520px; }
.door .kicker { margin-bottom: 14px; }
.door .name { font: 350 clamp(50px, 6vw, 78px)/.98 var(--f-display); letter-spacing: -.02em; margin: 0; }
.door .name a { color: inherit; text-decoration: none; }
.door .name em { color: var(--l-teal); }
.door__text { margin: 16px 0 22px; font-size: 18px; line-height: 1.45; }
.door__left .door__text { color: var(--l-soft); }
.door__right .door__text { font: 400 16px/1.5 var(--f-ui); color: var(--t-mute); }
.door .wm { font-size: clamp(58px, 7vw, 92px); margin-top: 16px; }
.dlist { list-style: none; margin: 40px 0 0; padding: 0; }
.door__left .dlist li { font: italic 20px/1.2 var(--f-body); padding: 14px 0; border-bottom: 1px solid var(--l-sage); display: flex; justify-content: space-between; gap: 12px; }
.door__left .dlist a { color: var(--l-ink); text-decoration: none; }
.door__left .dlist a:hover { color: var(--l-teal); text-decoration: underline; }
.door__right .dlist li { font: 500 14px/1.2 var(--f-mono); padding: 15px 0; border-bottom: 1px solid var(--t-line); display: flex; justify-content: space-between; gap: 12px; letter-spacing: .02em; }
.door__right .dlist li span { color: var(--t-signal); }
.door__right .dlist { margin-top: 34px; }
.blobA { position: absolute; width: 220px; height: 220px; background: var(--l-sage); opacity: .35; right: -70px; top: -60px; }
.blobB { position: absolute; width: 150px; height: 150px; background: var(--l-lagoon); opacity: .18; left: 60%; bottom: 70px; }
.door__seam { display: none; }
.door__wave { display: block; position: relative; z-index: 2; width: 100%; height: 60px; margin-top: -60px; }
@media (min-width: 900px) {
  .door { flex-direction: row; min-height: max(100vh, 780px); }
  .door__side { flex: 1 1 50%; min-width: 0; padding: 120px 72px 60px; }
  .door__right { padding-left: 110px; padding-top: 120px; }
  .door__left { padding-bottom: 60px; }
  .door__text { font-size: 22px; margin: 30px 0 36px; }
  .door__right .door__text { font-size: 20px; margin: 30px 0 36px; }
  .dlist { margin-top: 60px; }
  .door__left .dlist li { font-size: 21px; padding: 15px 0; }
  .door__right .dlist li { font-size: 15px; padding: 16px 0; }
  .door .kicker { margin-bottom: 22px; }
  .door__seam { display: block; position: absolute; top: 0; bottom: 0; left: calc(50% - 70px); width: 140px; height: 100%; z-index: 2; }
  .door__wave { display: none; }
  .blobA { width: 420px; height: 420px; left: -120px; right: auto; top: auto; bottom: -160px; }
  .blobB { width: 260px; height: 260px; left: 330px; bottom: 40px; }
}
@media (min-width: 900px) and (max-width: 1100px) { .door__side { padding-inline: 44px; } .door__right { padding-left: 90px; } }

/* ---------- /lutfitek/ placeholder ---------- */
.tek { position: relative; overflow: hidden; background: var(--t-night); color: var(--t-text); font-family: var(--f-ui); min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
.tek__nav { position: relative; display: flex; align-items: center; padding: 0 var(--pad); height: 76px; border-bottom: 1px solid var(--t-line); }
.tek .back { font: italic 16px/1 var(--f-body); color: var(--l-sage); display: flex; align-items: center; gap: 10px; text-decoration: none; }
.tek .back span { display: inline-block; width: 26px; height: 14px; border-radius: 0 0 14px 14px; border: 1.5px solid var(--l-sage); border-top: none; }
.tek__body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 60px var(--pad) 90px; gap: 0; }
.tek__wm { margin: 22px 0 0; font-size: inherit; }
.tek__wm .wm { font-size: clamp(56px, 12vw, 120px); }
.tek__soon { font: 400 clamp(1.0625rem, 2vw, 1.25rem)/1.5 var(--f-ui); color: var(--t-mute); margin: 30px 0 30px; max-width: 460px; }

/* ---------- Editor tweaks ---------- */
.editor-styles-wrapper .wrap { max-width: none; }

/* Menu overlay on phones: left aligned, chip readable */
.wp-block-navigation__responsive-container.is-menu-open { --navigation-layout-justify: flex-start; --navigation-layout-justification-setting: flex-start; --navigation-layout-align: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; justify-content: flex-start; padding-top: 48px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; }
.L-menu .is-menu-open .nav-chip-mobile .wp-block-navigation-item__content { display: block; width: 118px; height: 37px; margin-top: 10px; padding: 0; border: 0; font-size: 0; line-height: 0; color: transparent; background: var(--t-night) url(../img/lutfitek-chip.svg) center / 118px 33px no-repeat; }

/* Project alternative title, footnotes, first-published line */
.alt-title { font: italic 16px/1.4 var(--f-body); color: var(--l-soft); margin: 6px 0 0 !important; }
.hero__intro + .hero__intro { margin-top: 0 !important; }
.entry-content .footnotes { margin-top: 32px; }
.entry-content .footnote { font-size: 0.875rem; line-height: 1.5; color: var(--l-soft); margin-block: 0 8px; overflow-wrap: anywhere; }
.first-published { font-style: italic; color: var(--l-soft); border-top: 2px solid var(--l-sage); padding-top: 14px; margin-top: 32px; }
.first-published a { color: inherit; }
.entry-content p, .entry-content li { overflow-wrap: anywhere; }

/* Waroeng Baru header is a wide wordmark: keep its left edge in crops. */
.art img[src*="waroengbaru_header"], .hero-art .art img[src*="waroengbaru_header"] { object-position: left center; }

/* Topic tags: small, quiet links beside the main topic. */
.topic-tags { font: italic 0.9375rem/1.4 var(--wp--preset--font-family--newsreader); color: var(--l-soft); }
.topic-tags a { color: var(--l-teal); }

/* Lutfitek placeholder: the construction robot on a ruled panel, caution tape underneath. */
.tek__robot { position: relative; align-self: center; width: min(360px, calc(100% - 2 * var(--pad))); margin: 0 auto 64px; padding: 28px 28px 0; background: var(--t-deep); border: 1px solid var(--t-line); }
.tek__robot img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.tek__tape { height: 14px; margin: 18px -28px 0; background: repeating-linear-gradient(-45deg, #F4B63A 0 12px, var(--t-night) 12px 24px); }
@media (min-width: 900px) {
  .tek__robot { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); width: 380px; margin: 0; }
}

/* Full book cover spread inside a project page. */
.wp-block-image.spread { margin: 28px 0 0; }
.wp-block-image.spread img { width: 100%; height: auto; border-radius: 18px; }
.wp-block-image.spread figcaption { font-style: italic; color: var(--l-soft); }
/* A photograph in a project story: readable size, not the 96px poster thumbnail. */
.wp-block-image.photo { margin: 28px 0 0; max-width: 440px; }
.wp-block-image.photo img { width: 100%; height: auto; border-radius: 18px; display: block; }
.wp-block-image.photo figcaption { font-style: italic; color: var(--l-soft); }

/* Square logos and the book cover show whole in the wide project hero, not cropped. */
.hero-art .art img[src*="_logo"], .hero-art .art img[src*="parliament_front"], .hero-art .art img[src*="issue10_poster"], .hero-art .art img[src*="sgps_main"] { object-fit: contain; background: var(--l-paper2); }
/* About portrait photo inside the arch shape. */
.portrait--photo { position: relative; padding: 0; overflow: hidden; }
.portrait--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; display: block; }
/* About page: face sits high in the arch; intro, what-I-do row, highlights. */
.about .portrait--photo { min-height: 420px; }
.about .portrait--photo img { object-position: 50% 35%; }
.about__intro { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; color: var(--l-ink); margin: 0 0 18px !important; max-width: 760px; }
.about h2 { font-size: 1.5rem; font-weight: 350; margin: 38px 0 12px !important; }
.about__do { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.about__do-item { background: var(--l-paper2); border-radius: 22px; padding: 20px 22px; }
.about__do-item h3 { font-size: 1.125rem; font-weight: 500; margin: 0 0 6px !important; }
.about__do-item p { font-size: 1rem; line-height: 1.5; color: var(--l-soft); margin: 0; }
.about__list { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.about__close { margin: 38px 0 0 !important; font-size: 1.125rem; }
@media (min-width: 900px) { .about .portrait--photo { min-height: 560px; } .about__do { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* GenMeme episode artwork gallery. */
.wp-block-gallery.episodes { gap: 16px; margin-top: 28px; }
.wp-block-gallery.episodes img { border-radius: 18px; }
.wp-block-gallery.episodes figcaption { font-style: italic; color: var(--l-soft); }

/* Contact buttons: copy, open mail client, LinkedIn. */
.copy--ghost { background: transparent; color: var(--l-paper); box-shadow: inset 0 0 0 1.5px var(--l-sage); text-decoration: none; display: inline-block; }
.copy--ghost:hover { background: var(--l-sage); color: var(--l-ink); }

/* CV rows: role and organisation on one line, a short line of detail beneath. */
.cv .cv-where { font-style: italic; color: var(--l-soft); margin: -14px 0 20px; }
.cv-line { grid-column: 1 / -1; color: var(--l-soft); font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 700px) {
  .cv-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .cv-org { text-align: right; font-style: italic; color: var(--l-teal); }
}

/* ---------- Videos ---------- */
.vids { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 22px; list-style: none; padding: 0; margin: 0; }
.vids > li { margin: 0; }
@media (min-width: 600px) { .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vids { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vid { margin: 0; }
.vid--portrait { max-width: 360px; margin-inline: auto; }
.vid__frame { position: relative; width: 100%; border-radius: 28px; overflow: hidden; background: var(--l-paper2); }
.vid__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; cursor: pointer; background: var(--l-paper2); color: var(--l-ink); text-align: left; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px 20px; font-family: var(--f-body); }
.vid__blob { position: absolute; inset: 0; background: radial-gradient(circle at 78% 30%, var(--l-sage) 0 22%, transparent 23%), radial-gradient(ellipse at 22% 82%, var(--l-lagoon) 0 26%, transparent 27%), radial-gradient(circle at 60% 90%, var(--l-sand) 0 14%, transparent 15%); opacity: .55; }
.vid__plat { position: relative; font: italic 17px/1.2 var(--f-body); color: var(--l-teal); }
.vid__title { position: relative; font: 400 clamp(20px, 2.4vw, 26px)/1.15 var(--f-display); max-width: 80%; }
.vid__btn { position: absolute; right: 18px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%; background: var(--l-teal); color: #fff; display: flex; align-items: center; justify-content: center; padding-left: 3px; transition: transform .15s ease, background .15s ease; }
.vid__play:hover .vid__btn { transform: scale(1.06); background: var(--l-ink); }
.vid__play:focus-visible { outline: 3px solid var(--l-teal); outline-offset: -3px; border-radius: 28px; }
.vid__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__cap { margin: 12px 4px 0; font-size: 16px; line-height: 1.45; color: var(--l-soft); }
.vid__watch { font: italic 15px/1 var(--f-body); color: var(--l-teal); white-space: nowrap; }
.vid-single .vid:not(.vid--portrait) { max-width: 960px; }
.vid-date { color: var(--l-soft); font-style: italic; margin: 12px 0 0 !important; }
.vid-back { margin: 22px 0 0 !important; }
.vid-back a { color: var(--l-teal); }
.vid-empty { color: var(--l-soft); font-style: italic; }

/* ---------- Video gallery ---------- */
.vg__feature .vid:not(.vid--portrait) { max-width: 960px; }
.vg__meta { max-width: 960px; margin-top: 18px; }
.vg__h { font: 400 clamp(26px, 3.4vw, 38px)/1.12 var(--f-display); margin: 0; outline: none; }
.vg__h:focus-visible { outline: 3px solid var(--l-teal); outline-offset: 4px; border-radius: 8px; }
.vg__cap { margin: 8px 0 0; color: var(--l-soft); font-size: 18px; line-height: 1.45; }
.vg__line { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.vg__line .vid-date { margin: 0 !important; }
.vg__rail { margin-top: 44px; }
.vg__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vg__rh { font: 400 22px/1.2 var(--f-display); margin: 0; }
.vg__arrows { display: flex; gap: 8px; }
.vg__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--l-teal); background: transparent; color: var(--l-teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vg__arrow[hidden] { display: none; }
.vg__arrow:hover:not(:disabled) { background: var(--l-teal); color: #fff; }
.vg__arrow:disabled { opacity: .35; cursor: default; }
.vg__arrow:focus-visible, .vg__card:focus-visible { outline: 3px solid var(--l-teal); outline-offset: 3px; }
.vg__track { --gap: 16px; display: flex; gap: var(--gap); list-style: none; margin: 0; padding: 4px 4px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.vg__item { flex: 0 0 70%; margin: 0; scroll-snap-align: start; min-width: 0; }
@media (min-width: 700px) { .vg__item { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (min-width: 1000px) { .vg__item { flex-basis: calc((100% - 3 * var(--gap)) / 4); } }
.vg__card { display: block; width: 100%; text-align: left; font: inherit; color: var(--l-ink); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.vg__art { position: relative; display: block; aspect-ratio: 16/10; border-radius: 28px; overflow: hidden; background: var(--l-paper2); padding: 14px 18px; transition: box-shadow .15s ease; }
.vg__card:hover .vg__art { box-shadow: 0 0 0 2px var(--l-sage); }
.vg__card[aria-current="true"] .vg__art, .vg__card[aria-pressed="true"] .vg__art { box-shadow: 0 0 0 3px var(--l-teal); }
.vg__now { display: none; position: absolute; left: 18px; bottom: 14px; font: 600 13px/1 var(--f-body); background: var(--l-teal); color: #fff; padding: 6px 12px; border-radius: 999px; }
.vg__card[aria-current="true"] .vg__now, .vg__card[aria-pressed="true"] .vg__now { display: inline-block; }
.vg__ct { display: block; margin-top: 10px; font: 400 20px/1.2 var(--f-display); }
.vg__cd { display: block; margin-top: 4px; font-size: 15px; font-style: italic; color: var(--l-soft); }
@media (prefers-reduced-motion: reduce) { .vg__track { scroll-behavior: auto; } }

/* Video stills */
.vid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.vid__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 72%); pointer-events: none; }
.vid--still .vid__play, .vg__art--still { color: #fff; }
.vid--still .vid__plat, .vg__art--still .vid__plat { display: inline-block; align-self: flex-start; color: #fff; background: rgba(0,0,0,.62); padding: 5px 11px; border-radius: 999px; font-size: 15px; }
.vid--still .vid__title { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); max-width: calc(100% - 96px); }
.vg__art--still { aspect-ratio: 1 / 1; padding: 12px; }
.vg__art--still .vid__plat { position: absolute; left: 12px; top: 12px; }
.vg__art--still .vg__now { left: 12px; bottom: 12px; }

/* Call-to-action band above the footer on Work, Words and Videos. */
.cta-band { max-width: 1312px; margin: 56px var(--pad) 0; padding: 30px var(--pad); display: grid; gap: 22px; align-items: center; background: var(--l-ink); color: var(--l-paper); border-radius: 36px 36px 36px 96px; }
.cta-band .kicker { color: var(--l-sage); margin: 0 0 8px; }
.cta-band__h { font: 400 clamp(1.625rem, 3vw, 2.25rem)/1.15 var(--f-display); color: var(--l-paper); margin: 0 0 8px; }
.cta-band__line { margin: 0; color: #C9D8D2; font-size: 1.0625rem; line-height: 1.5; max-width: 560px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cta-band__btn { display: inline-block; padding: 14px 24px; border-radius: 999px; background: var(--l-sage); color: var(--l-ink); font: 500 17px/1 var(--f-body); text-decoration: none; }
.cta-band__btn:hover, .cta-band__btn:focus-visible { background: #fff; }
.cta-band__link { color: var(--l-paper); font-style: italic; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; padding: 40px 48px; } }
@media (min-width: 1408px) { .cta-band { margin-left: auto; margin-right: auto; } }

/* ---------- About: based line, linked "what I do" headings, closing link ---------- */
.about__based { margin: 18px 0 0 !important; font-size: 1.0625rem; color: var(--l-soft); }
.about__label { font: 500 13px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--l-teal); margin-right: 8px; }
.about__do-item h3 a { color: var(--l-ink); text-decoration: none; }
.about__do-item h3 a::after { content: " \2192"; color: var(--l-teal); }
.about__do-item h3 a:hover { color: var(--l-teal); text-decoration: underline; text-underline-offset: 3px; }
.about__close a { color: var(--l-teal); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Book excerpts: credit line, store pills, list badge ---------- */
.kind.excerpt { background: var(--l-paper2); }
.by + .excerpt-credit, .first-published + .excerpt-credit { font-style: italic; color: var(--l-soft); margin: -12px 0 14px; font-size: 17px; }
.excerpt-credit a { color: inherit; }
.get-book { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; }
.get-book__label { font: 500 14px/1 var(--f-ui); letter-spacing: .04em; color: var(--l-soft); margin-right: 4px; }
.get-book--top { margin: 0 0 26px; }
.get-book--end { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--l-sage); }

/* ---------- Page navigation for long pieces ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--l-sage); font-family: var(--f-body); }
.pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; order: 0; }
.pager__pages li { margin: 0; padding: 0; }
.pager__label { font: 500 14px/1 var(--f-ui); letter-spacing: .04em; color: var(--l-soft); margin-right: 4px; }
.pager .pill.on { background: var(--l-teal); color: #fff; border-color: var(--l-teal); }
.pager a.pill:hover { background: var(--l-sage); color: var(--l-ink); }
.pager__step[rel="prev"] { order: -1; }
.pager__step[rel="next"] { order: 1; }
@media (max-width: 560px) { .pager { justify-content: center; } .pager__pages { order: -2; flex: 1 0 100%; justify-content: center; } }

/* ---------- About band (Lutfi home) ---------- */
.aband { background: #1F4E63; color: #EEF2EC; position: relative; margin-top: 70px; padding: 30px 0 76px; }
.aband__wave { position: absolute; left: 0; top: -27px; width: 100%; height: 28px; display: block; }
.aband__in { display: grid; gap: 28px; align-items: center; }
.aband__art { max-width: 300px; }
.aband__art img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 50% 50% 44% 56% / 38% 42% 58% 62%; }
.aband__kicker { font: italic 17px/1 var(--f-body); color: #A9C3B0; margin: 0 !important; }
.aband h2, .aband h1 { color: #fff; font-weight: 400; font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.08; margin: 10px 0 0; }
.aband__body { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: #D9E6E6; max-width: 620px; margin: 16px 0 26px !important; }
.aband__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0; }
.aband__btn { background: #A9C3B0; color: #1D3B3A; text-decoration: none; padding: 12px 24px; border-radius: 99px; font-weight: 500; }
.aband__btn:hover, .aband__btn:focus-visible { background: #EEF2EC; }
.aband__link { color: #EEF2EC; text-underline-offset: 4px; }
.aband__link:hover { color: #A9C3B0; }
.aband a:focus-visible { outline: 2px solid #EEF2EC; outline-offset: 3px; }
/* The pale band's wave sits on the blue: no paper strip between them. */
.aband + .band { margin-top: 0; }
@media (min-width: 900px) {
  .aband { margin-top: 90px; padding: 44px 0 96px; }
  .aband__wave { top: -41px; height: 42px; }
  .aband__in { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; }
  .aband + .band { margin-top: 0; }
}

/* Temporary home: the feature card is an h3 under "Selected words"; match the Words page h2. */
.feat h3 { font-size: clamp(1.75rem, 3.4vw, 2.625rem); line-height: 1.08; font-weight: 350; margin: 14px 0 !important; color: var(--l-paper); }
.feat h3 a { color: var(--l-paper); text-decoration: none; }
.feat h3 a:hover { text-decoration: underline; text-decoration-color: var(--l-sage); }
.temp-home .feat-q { margin-bottom: 8px; }

/* ---------- Hero weave graphic (Lutfi home; markup from inc/hero-graphic.php) ---------- */
/* A grid of fixed-size cells. The container clips whatever does not fit, so the pattern never rescales. */
.hero { --edge: max(var(--pad), calc((100vw - 1312px) / 2)); } /* distance from the hero's content to the page edge */
.L-main { overflow-x: clip; } /* the graphic runs to the page edge without a sideways scrollbar */
.weave { --cell: 14px; display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); overflow: hidden; opacity: .65; }
.weave i { display: block; }
.weave .b { background: var(--l-sage); }                 /* bands between tiles */
.weave .x, .weave .q0 { background: #1F4E63; }           /* band crossings and the darkest pixel */
.weave .q1 { background: var(--l-sand); }
.weave .q2 { background: var(--l-lagoon); }
.weave .q3 { background: var(--l-teal); }
/* Pixels shrink to a dot and back; --d staggers them ring by ring, tile by tile. */
.weave .p { animation: weave-p 7s ease-in-out infinite; animation-delay: calc(var(--d) * 1s); }
@keyframes weave-p { 0%, 60%, 100% { transform: scale(1); border-radius: 0; } 30% { transform: scale(.72); border-radius: 50%; } }
@media (prefers-reduced-motion: reduce) { .weave i { animation: none !important; } }

/* Phones and tablets: a strip under the hero text, edge to edge, fading out at the bottom. */
@media (max-width: 899.98px) {
  .weave { height: calc(12 * var(--cell)); width: 100vw; margin-inline: calc(-1 * var(--edge)); justify-content: center; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
  .weave i:nth-child(n + 553) { display: none; } /* only the first 12 rows exist here: 46 columns x 12 = 552 cells */
}
@media (min-width: 600px) and (max-width: 899.98px) { .weave { --cell: 20px; } } /* tablets: 46 x 14px would not span the width */
/* Wide screens: a field behind the right of the hero. It starts below the header menu, runs to the
   page edge, and fades out towards the text on its left and towards the About band below it. */
@media (min-width: 900px) {
  .hero { position: relative; isolation: isolate; }
  .hero__art { position: absolute; z-index: -1; top: 0; bottom: -60px; left: 40%; right: calc(-1 * var(--edge)); }
  /* Anchored to the right edge: on very wide screens any shortfall is on the left, where it has faded out anyway. */
  .weave { --cell: 24px; height: 100%; justify-content: end;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 55%), linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 55%), linear-gradient(to bottom, #000 70%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}

/* ---------- About portrait: zoomed in a little (Lutfi, 2026-10-01) ---------- */
/* The photo has a lot of empty wall above and to the left of him. The frame clips the overflow. */
.about .portrait--photo img { transform: scale(1.22); transform-origin: 62% 78%; }
.aband__art { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 44% 56% / 38% 42% 58% 62%; }
.aband__art img { height: 100%; aspect-ratio: auto; border-radius: 0; transform: scale(1.22); transform-origin: 62% 78%; }

/* The closing line of a project story that links out. */
.proj-cta { margin-top: 26px !important; font-size: 1.125rem; }
.proj-cta a { color: var(--l-teal); text-decoration: underline; text-underline-offset: 4px; }