/* ============================================================
   Sadık Tıltak — design system
   Layers: tokens → base → layout → components → utilities
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#FAFAF8; --surface:#FFFFFF; --sunken:#F1F1EE;
  --ink:#15171A; --body:#3A3F45; --meta:#6B7178;
  --rule:#E3E3DF; --rule-strong:#CFCFC9;
  --cobalt:#1E3564;
  --copper:#8A5626; --copper-soft:#F3EAE1; --copper-muted:#85562B;
  --signal:#1B54E8;
  --shadow:0 1px 2px rgba(21,23,26,.04),0 8px 24px -12px rgba(21,23,26,.10);
  --focus:#1E3564;
  /* Text color for anything sitting on a solid --cobalt fill (selection,
     skip-link, primary CTA hover). Themed on purpose: --cobalt is a dark
     navy in light mode (white reads at 12:1) but a pale periwinkle in
     dark mode, where white text on it drops to ~2.3:1 — this token keeps
     that pairing WCAG-compliant in both themes without hardcoding white. */
  --on-cobalt:#fff;

  --serif:'Newsreader',ui-serif,Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* One typographic system, sitewide — seven fixed sizes, nothing in
     between. Small labels/Navigation/Body/Lead/Section titles/Name are
     flat values on purpose (a rigid, controlled scale, not an elastic
     one); the Hero headline is the sole fluid exception, since three
     lines of display type genuinely has to shrink to fit a phone
     screen without wrapping mid-word. */
  --t-sm:.8125rem;  /* 13 — small labels */
  --t-nav:1rem;     /* 16 — navigation */
  --t-md:1.125rem;  /* 18 — body */
  --t-lg:1.3125rem; /* 21 — lead text */
  --t-2xl:1.875rem; /* 30 — section titles */

  /* Shared left/right axis for every full-width row on the site — .wrap,
     .row-inner and the header nav all read off this one value, so the
     nav bar and every section below it line up on the same edge instead
     of each hardcoding its own close-but-not-quite padding. 24px@375 ->
     32px@1280, both ends legal steps on the 8/16/24/32/48/64/96/128
     spacing scale. */
  --edge:clamp(1.5rem, 1.2928rem + 0.884vw, 2rem);

  --rail:132px; --gap:48px; --sheet:1120px; --content:640px;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* One border treatment, used everywhere something needs an edge
     (cards, buttons, chips, panels) instead of three different
     formulas (--rule / --rule-strong / one-off color-mix). A border
     mixed toward the page's own ink/paper rather than a flat gray, so
     it reads as a subtle edge on that specific surface — redefined per
     theme below, same as every other token here. */
  --card-border:rgba(0,0,0,.08);
}
/* Dark palette recalibrated a third time — #14171B still read as too
   close to the interior's previous near-black; settled on #0F1117, a
   dark blue-charcoal that's meaningfully lighter than the original
   #0C0E11 without being as light as the last pass. surface/sunken
   shifted by the same amount so the sunken/paper/surface lightness
   ladder stays intact. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0F1117; --surface:#181B20; --sunken:#0B0D10;
    /* #F3F3F3 -> #F2F0EC: a hair warmer, off the neutral gray axis — a
       dark-mode "white" that isn't quite pure white, per explicit
       direction, without reading as tinted or off. */
    --ink:#F2F0EC; --body:#B7BDC5; --meta:#A6ABB6;
    --rule:#2A2E34; --rule-strong:#383D44;
    --cobalt:#93A8ED;
    --copper:#D8A06A; --copper-soft:#241B12; --copper-muted:#D2A070;
    --signal:#5B8CFF;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
    --focus:#93A8ED;
    --card-border:rgba(255,255,255,.08);
    --on-cobalt:#0F1117;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;overflow-x:hidden;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:var(--t-md);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance;margin:0;font-weight:600;}
p{margin:0;overflow-wrap:break-word;}
ul,ol{margin:0;padding:0;}
img{max-width:100%;display:block;}
a{color:var(--cobalt);text-decoration:none;text-underline-offset:3px;}
a[href]:hover{text-decoration:underline;}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:1px;
}
::selection{background:var(--cobalt);color:var(--on-cobalt);}

/* Firefox uses scrollbar-color/width; Chrome/Safari/Edge need the
   ::-webkit-scrollbar pseudo-elements — both point at the same tokens
   (already theme-aware for dark mode) so the scrollbar reads as part
   of the page instead of the OS default, most noticeable against
   Windows' otherwise chunky gray bar. */
:root{scrollbar-color:var(--rule-strong) var(--paper);scrollbar-width:thin;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:var(--rule-strong);}
::-webkit-scrollbar-thumb:hover{background:var(--meta);}

.mono{
  /* No text-transform:uppercase here on purpose — CSS's uppercasing isn't
     Turkish-locale-aware (lowercase i -> I instead of İ), so labels are
     authored in their correct on-screen case instead of being transformed. */
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.06em;
  color:var(--meta);font-variant-numeric:tabular-nums;font-weight:400;
}
/* Marks a kicker as proof/achievement content, not general emphasis —
   used on the credentials rail label only, not every section title. */
.mono.accent{color:var(--copper);}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--cobalt);color:var(--on-cobalt);padding:8px 16px;
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
}
.skip-link:focus{left:0;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* Turkish compound words (koordinasyonundan, gerçekleştirmesini) run
   noticeably longer than their English equivalents inside the same fixed
   measures those paragraph widths were tuned against — hyphenation keeps
   the Turkish pages wrapping as cleanly as the English ones, without
   touching the shared measure/line-height itself. Scoped to lang="tr"
   only (already set on <html> for every Turkish page) so English copy is
   completely unaffected. */
html[lang="tr"] .thesis p,
html[lang="tr"] .manifesto p,
html[lang="tr"] .exp-role-summary{
  hyphens:auto;
}

/* ---------- Layout primitives ---------- */
/* var(--edge) is the one shared left/right axis for the whole site — see
   the token block. Every full-width row (hero, thesis, manifesto, close,
   footer, the header nav) reads off this same value, so nothing drifts
   a few pixels off the others. */
.wrap{max-width:var(--sheet);margin:0 auto;padding-inline:var(--edge);}

/* .row spans the full viewport so its top border reads as an edge-to-edge
   section break; .row-inner centers and caps the actual rail+col grid at
   --sheet, same width as .wrap, so row-based sections align with the hero
   and page-head above them instead of hugging the left edge of the screen. */
.row{border-top:1px solid var(--rule);}
.row-inner{
  display:grid;grid-template-columns:var(--rail) 1fr;
  max-width:var(--sheet);margin:0 auto;padding-inline:var(--edge);
}
.row-inner .rail{padding:24px 16px 24px 0;}
/* Sticky on the wrapper (label + optional rail_extra, e.g. Track
   Record's date list), not the label alone, so anything below the
   label stays pinned together with it while the content column
   scrolls past. */
.row-inner .rail-sticky{position:sticky;top:24px;display:block;}
.row-inner .col{border-left:1px solid var(--rule);padding:24px 0 48px var(--gap);min-width:0;}
.row-inner .col>*+*{margin-top:16px;}
@media (max-width:820px){
  .row-inner{grid-template-columns:1fr;}
  .row-inner .rail{padding:24px 0 0;}
  .row-inner .rail-sticky{position:static;}
  .row-inner .col{border-left:0;padding:8px 0 48px;}
}

.prose{max-width:64ch;}
/* Matches the site's Lead-text tier (21px) — a page intro should read
   as if it were lifted straight from the Home page, not a one-off size. */
.lede{font-family:var(--serif);font-weight:400;font-size:var(--t-lg);line-height:1.8;letter-spacing:-.006em;color:var(--body);max-width:680px;}
.small{font-size:var(--t-sm);color:var(--meta);}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s var(--ease);
}
.site-header.scrolled{box-shadow:0 1px 0 var(--rule-strong),0 12px 24px -16px rgba(0,0,0,.18);}
/* Same var(--edge) as .wrap/.row-inner — the nav bar's left/right edge
   used to be its own hardcoded 16px/28px (14px/20px on mobile), which
   didn't quite track .wrap's fluid padding at in-between widths. That
   was the actual source of the "misaligned by a few pixels" feeling:
   the header and everything below it now read off one shared value. */
.header-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding-block:16px;padding-inline:var(--edge);max-width:var(--sheet);margin:0 auto;
}

.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--t-nav);flex-shrink:0;}
a.brand:hover{text-decoration:none;}
.brand svg{display:block;color:var(--ink);}
.mark-peak{stroke:var(--cobalt);fill:none;}
.mark-wave{stroke:var(--signal);fill:none;}
/* SADIK carries the mark; TILTAK rides beneath it as a quiet subtitle —
   the surname stays present without competing for the same weight.
   These two sizes are the wordmark's own lockup proportions, not page
   content — exempt from the page type-scale for the same reason a
   company logo's internal type isn't redrawn to match its body copy. */
.brand-lockup{display:flex;flex-direction:column;justify-content:center;line-height:1;}
.brand-lockup .sadik{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--ink);}
.brand-lockup .tiltak{font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.22em;color:var(--signal);margin-top:3px;}

.main-nav{display:flex;gap:32px;}
/* 14px/500/+0.02em — a deliberately quieter, more enterprise-register
   nav label than the site's general 16px Nav tier, per direct
   feedback ("resemble Crestron, not a portfolio template"). */
.main-nav a{
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.02em;
  color:var(--meta);padding-bottom:5px;
  border-bottom:1px solid transparent;white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.main-nav a:hover{color:var(--ink);border-bottom-color:var(--rule-strong);text-decoration:none;}
.main-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--cobalt);}

.header-tools{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.lang-switch{
  display:flex;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  border:1px solid var(--card-border);overflow:hidden;
}
/* 10px 12px, not 8px flat — closer to a real touch target on mobile,
   still compact enough not to unbalance the header. */
.lang-switch a{padding:10px 12px;color:var(--meta);transition:color .2s var(--ease),background .2s var(--ease);}
.lang-switch a[aria-current]{background:var(--ink);color:var(--paper);}
.lang-switch a:hover{text-decoration:none;color:var(--ink);}
.lang-switch a[aria-current]:hover{color:var(--paper);}

.mobile-nav{display:none;}
.mobile-nav summary{list-style:none;cursor:pointer;padding:6px;color:var(--ink);}
.mobile-nav summary::-webkit-details-marker{display:none;}
.mobile-nav summary svg{display:block;}
.mobile-nav-list{
  /* Positioned against .site-header (already position:sticky, so it's a valid
     containing block) rather than .mobile-nav itself — .mobile-nav is only as
     wide as the hamburger icon, so left/right insets computed against it put
     the panel off-screen instead of inset from the actual viewport edges.
     right:var(--edge) keeps its right edge on the same shared axis as the
     header's own padding, instead of a hardcoded 20px that no longer
     matches it. */
  position:absolute;right:var(--edge);top:64px;
  width:min(320px, calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow);
  display:flex;flex-direction:column;padding:8px;
}
.mobile-nav-list a{font-family:var(--sans);padding:16px;color:var(--ink);font-size:14px;font-weight:500;letter-spacing:.02em;border-top:1px solid var(--rule);}
.mobile-nav-list a:first-child{border-top:0;}
.mobile-nav-list a:hover{background:var(--sunken);text-decoration:none;}
.mobile-nav-list a[aria-current]{color:var(--cobalt);}

@media (max-width:980px){
  .main-nav{display:none;}
  .mobile-nav{display:block;}
}

/* ---------- Hero ----------
   Fluid throughout 320-1280px via clamp() — one continuous scale, not a
   mobile value and a desktop value with a jump between them. Every
   clamp() below is a straight-line fit between a 375px reference point
   and a 1280px reference point (see each rule's comment for the pair),
   so the same formula that reads right on a small phone reads right on
   a laptop too, with nothing sudden at any width in between. The only
   real breakpoint left (640px) is for grid-template-columns, because a
   column count can't be interpolated — 2 columns don't fluidly become 1. */
.hero{
  /* Longhand on purpose — .hero shares its element with .wrap
     (<section class="hero wrap">), and a 3-value padding shorthand's
     middle "0" would silently zero .wrap's own padding-inline. Longhand
     top/bottom leaves left/right alone so .wrap/--edge is the only thing
     controlling them.
     32px@375 -> 64px@1280 (was 24-48px) and bottom 8 -> 48px — a pure
     whitespace pass per direct feedback ("more breathing room, same
     typography/layout/proportions"): more air above the headline
     (navbar-to-title) and below the identity card (profile-to-content),
     nothing here changes any font-size, color or structure. */
  padding-top:clamp(2rem, 1.1713rem + 3.5359vw, 4rem);
  padding-bottom:48px;
  position:relative;overflow:hidden;
}
.hero-statement{
  font-family:var(--serif);font-weight:400;
  /* 26px@375 -> 44px@1280 (was 30-50px, ~12% down again per direct
     "still too large" feedback) — the one deliberately fluid text size
     on the page: a three-line display headline has to shrink on a
     narrow phone or it wraps mid-word, so it can't be a flat value the
     way Name/Role/Credentials/Section titles now are. */
  font-size:clamp(1.625rem, 1.1588rem + 1.989vw, 2.75rem);
  line-height:1;letter-spacing:-.02em;
  /* No top margin — the headline is the first element in the hero now
     that the eyebrow is gone, so .hero's own padding-top is the only
     thing controlling the space above it. Doubling up here would just
     push it down twice. */
  margin:0;
  /* Generous on purpose: each line is already forced by a <br>, so this
     only guards against a line sub-wrapping inside itself. */
  max-width:24ch;
  position:relative;z-index:1;
}
.hero-tagline{
  /* 14px@375 -> 18px@1280, unchanged size — only the gap above it grew
     (8 -> 16px) for more headline-to-subtitle breathing room. */
  font-size:clamp(0.875rem, 0.7714rem + 0.442vw, 1.125rem);font-weight:500;
  margin:16px 0 0;
}
/* A trace of the monogram behind the statement — felt more than read.
   260px/opacity .10 (was 340px/.13, ~24% smaller and quieter) per
   direct "still slightly oversized, should support not compete"
   feedback. z-index stays above .hero-grid (1) so the mark paints over
   that section's border-top divider wherever the two overlap, instead
   of the divider visibly cutting through the logo. */
.hero-watermark{
  position:absolute;right:-40px;top:20px;width:260px;height:260px;opacity:.10;
  pointer-events:none;z-index:2;
}
@media (max-width:900px){.hero-watermark{display:none;}}
.hero-grid{
  display:grid;
  /* Fixed 200px photo column — "approximately 200px", flat, not a
     fluid range. The composition's presence comes from the generous
     fixed gap and true optical centering below, not from the photo
     itself growing with the viewport. */
  grid-template-columns:12.5rem 1fr;
  /* 24px@375 (this becomes the stacked layout's photo-to-text vertical
     gap below 640px) -> 48px@1280 — both legal steps; kept fluid so the
     mobile stacked gap doesn't end up larger than the desktop one. */
  gap:clamp(1.5rem, 0.8785rem + 2.6519vw, 3rem);
  /* Photo center aligned with the text block's center — true optical
     center, not just top-aligned. */
  align-items:center;
  /* 24px@375 -> 48px@1280 (was 12-24px) — more air between the
     subtitle and the profile card per direct whitespace feedback;
     same grid/gap/alignment, just more room above it. */
  margin-top:clamp(1.5rem, 0.8785rem + 2.6519vw, 3rem);
  position:relative;z-index:1;
  /* The photo (200px) is taller than the text block, so align-items:center
     alone gives the photo zero slack — it sits flush on the top divider
     while the text floats with room to spare. Matches .hero's own
     padding-bottom:48px so the block sits truly centered between the two
     dividers (same fix as the mobile padding-top:16px, below). */
  padding-top:48px;
}
/* The divider is its own element now, not .hero-grid's border-top —
   width-limited instead of full-width, so it structurally stops before
   the watermark's zone rather than relying on z-index layering (which
   only protects the mark's actual stroke pixels, not the transparent
   gaps between them, so the rule was still visible crossing through
   those gaps even with the mark painted on top). Reserving 260px here
   to match .hero-watermark's own width keeps a real gap at every width
   the mark is visible at (>900px). */
.hero-grid::before{
  content:"";position:absolute;top:0;left:calc(-1 * var(--edge));
  width:calc(100% - 260px + var(--edge));height:1px;background:var(--rule);
}
/* Frameless, shadowless, sharp-cornered — no border, no border-radius,
   no box-shadow. The photo reads as a clean, direct print, not a
   card component. */
.portrait{position:relative;width:100%;aspect-ratio:1;overflow:hidden;flex-shrink:0;}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}
/* Identity card: name, title, one credential line, description — four
   blocks, spaced apart deliberately so hierarchy comes from font/color/
   space, not competing sizes. This is the desktop register (serif for
   name/title/description); the 640px block below switches to sans-
   serif, centered, once the layout stacks, but every size stays the
   same flat value as desktop — Name/Role are fixed scale steps, not
   fluid ranges. */
.hero-spec{min-width:0;max-width:540px;padding-top:32px;}
.hero-spec p{font-family:var(--serif);margin:0;}
/* Name/Role/Credentials/Tagline all cut ~25% from their previous
   sizes per direct "yazılar çok büyük" feedback on this specific card
   — hardcoded here rather than through the shared --t-lg/--t-nav/--t-md
   tokens, so the reduction stays scoped to this card and doesn't also
   shrink nav/body/section-title/etc. sitewide. Name: back to
   --copper-muted per earlier direct feedback (was neutral ink) — a
   refined, desaturated copper rather than the brighter --copper. */
.id-name{font-size:27px;font-weight:600;color:var(--copper-muted);letter-spacing:-.01em;}
.id-title{font-size:16px;font-weight:500;color:var(--body);letter-spacing:.005em;margin-top:16px;}
/* Credentials: one line, one uniform weight — deliberately set in the
   mono face (the same "verified data" register the site already uses
   for dates/locations), not the serif of the name/title. That contrast
   does the hierarchy work a bold/muted split used to do: the name reads
   as a person, the credential line reads as a spec/dossier fact, and
   nothing here competes with the name for attention. */
.id-cred{font-family:var(--mono);font-style:normal;font-weight:400;font-size:13px;line-height:1.8;letter-spacing:.02em;color:var(--meta);margin-top:16px;}
.id-title + .id-cred{margin-top:24px;}
/* A quiet colored dot between each credential instead of a plain
   middle-dot — copper-muted, matching the name and the divider below,
   per direct feedback (was cobalt). */
.id-cred-dot{color:var(--copper-muted);}
/* Tagline: narrower measure (380px) — reads as an editorial pull
   quote, not a paragraph. Divider is a short, explicit accent line in
   a subtle muted gold, not the card's cobalt accent — a deliberate,
   considered separator rather than a rule that happens to span the
   column. */
.id-desc{
  font-style:normal;font-weight:400;font-size:14px;line-height:1.8;color:var(--meta);
  max-width:380px;margin-top:24px;
}
.id-desc::before{content:"";display:block;width:130px;height:1px;background:var(--copper-muted);opacity:.4;margin:0 0 24px;}

/* The one genuine breakpoint in this section. Photo-left/text-right,
   same arrangement as desktop just at a smaller scale — per direct
   feedback replacing an earlier stacked/centered mobile layout. Every
   size inside this block is still the same flat value as desktop. */
@media (max-width:640px){
  /* Mobile whitespace pass — same tokens, no new sizes/colors/fonts.
     .hero's own bottom padding and .thesis's top padding were both
     tuned for the two-column desktop layout; on a phone they compound
     into a noticeably longer scroll before the bio starts. */
  .hero{padding-bottom:32px;}
  /* Same two-column shape as desktop (photo column + text column),
     just a smaller fixed photo width and a tighter gap for the
     narrower viewport. align-items:center only visibly centers the
     *shorter* column (the photo) — the text column is taller than the
     photo, so it fills the row's full height with nothing to center
     it against, leaving its first line (the name) flush against the
     divider above with no gap, confirmed on a real device.
     padding-top pushes the whole row — both columns — down from that
     divider so neither one touches it. */
  .hero-grid{grid-template-columns:9rem 1fr;align-items:center;gap:24px;padding-top:16px;}
  /* The watermark-avoidance width doesn't apply once the watermark is
     hidden (it disappears at 900px, well above this breakpoint) —
     back to a full-width divider. left:0 (inherited from the base
     rule) only reaches .hero-grid's own content edge, which is inset
     by --edge from the true left edge (.hero-grid sits inside
     .hero.wrap's padding-inline) — shorter on the left than the
     edge-to-edge lines elsewhere on the page (e.g. .thesis's
     border-top, which isn't inset since .wrap is a separate nested
     div there). Pulling left by --edge and adding it back to the
     width extends the line to that true edge; .hero has
     overflow:hidden so it clips exactly there instead of bleeding
     past the viewport. Right edge intentionally left as-is. */
  .hero-grid::before{left:calc(-1 * var(--edge));width:calc(100% + var(--edge));}
  /* Well under desktop's fixed 200px column (12.5rem) — enough to
     still read clearly as a headshot while leaving real room for the
     name/credentials beside it. No aspect-ratio override — the source
     file is itself 640x640 (square), so aspect-ratio:1 (inherited
     from the base rule) matches it exactly, same as desktop:
     object-fit:cover is a no-op, so the composition is identical,
     just smaller. */
  .portrait{width:9rem;}
  /* padding-top:0 — that 32px exists on desktop to optically align the
     text block with the photo beside it against a wider, more open
     grid; at this narrower gap it read as excess before the name. */
  .hero-spec{padding-top:0;}
  /* Name/title/credentials tightened into one visibly coherent block on
     mobile (desktop's own spacing is untouched) — same sizes, same
     colors, just less air between them than the two-column layout
     needed. */
  /* Name/title cut down from desktop's flat 27px/16px — those sizes
     were tuned against a 200px desktop photo; next to mobile's smaller
     9.5rem photo the same text read oversized/out of proportion,
     confirmed on a real device. Credentials/description left alone —
     it's specifically the name and title that overpowered the photo. */
  .id-name{font-size:22px;}
  .id-title{font-size:13px;margin-top:12px;}
  .id-title + .id-cred{margin-top:16px;}
  /* Safety net only — the credential line already wraps at whole
     "credential + dot" units via nbsp (see HERO_CAPTION in build.py),
     which keeps the split balanced on typical widths. This doesn't
     change that grouping or the text itself; it just lets a unit break
     instead of overflowing the column on the narrowest phones. */
  .id-cred{overflow-wrap:break-word;}
  /* Left at 24px (not tightened like the rest of this block) — the
     credential line wraps at this width, and at 16px the divider right
     after it read as glued to the wrapped line instead of a deliberate
     section break. Confirmed on a real device. */
  .id-desc{margin-top:24px;}
  /* Scaled down from desktop's 130px — the text column is much
     narrower here, so the full-width mark would dominate it. Already
     left-aligned by falling through to the base rule's own margin
     (0 0 24px, no auto) now that this column isn't centered. */
  .id-desc::before{width:80px;}
}
/* Very narrow phones (iPhone SE and similar, ~360px and below): the
   headline's fluid clamp() already bottoms out at 26px for anything
   ≤375px, which leaves only a few px of margin before "Project
   Management" (the longest of the three forced lines) risks wrapping a
   second time inside its own line — exactly the "looks like it wrapped
   randomly" failure this three-line layout was built to avoid. A small
   floor specifically at this width, not a change to the shared clamp
   used everywhere else. */
@media (max-width:380px){
  .hero-statement{font-size:1.5rem;}
}
/* .thesis padding-top is shared with the two-column desktop reading; on
   the stacked mobile layout the gap after the identity card (.hero's
   own bottom padding, above) and this section's top padding compound
   into more empty space than either was individually meant to create. */
@media (max-width:640px){
  .thesis{padding-top:32px;}
}

/* ---------- Sections ---------- */
.section-title{font-family:var(--serif);font-size:var(--t-2xl);font-weight:600;letter-spacing:-.018em;line-height:1.12;}

/* ---------- Home section rhythm: four modes so no two rows read the same,
   used only where content genuinely differs (thesis / signature graphic /
   reference list / closing links) rather than one rail+col template
   repeated down the page. ---------- */

/* Mode A — thesis (Professional Profile): the one full-width prose
   statement on the page — genuine reading size, not a headline doing a
   paragraph's job. Column width is a direct px measure, not ch — 700px
   gives a real editorial-width column, in the same range Apple/
   Stripe's own body copy sits at.
   thesis/manifesto/close now share the same 48px section padding
   (was 64px) — tightened another notch per direct "reduce whitespace"
   feedback, still one shared rhythm across all three. */
.thesis{border-top:1px solid var(--rule);padding:48px 0 48px;}
.thesis .kicker{font-family:var(--mono);margin-bottom:24px;display:block;}
.thesis p{
  /* 18 -> 16px, per direct "body text still a little oversized"
     feedback. Line-height opened further (1.9 -> 1.95) to keep it
     reading easily at the smaller size. Measure tightened 700 -> 640px
     (reusing --content) — at 16px, 700px was running ~80-87 characters
     per line, past the 55-75 range that's actually comfortable to
     read; 640px lands in range. */
  font-family:var(--serif);font-weight:400;font-size:16px;
  line-height:1.95;letter-spacing:-.006em;color:var(--body);max-width:var(--content);
  text-wrap:pretty;
}
.thesis .lede-open{color:var(--ink);font-weight:600;}
.thesis-intro p + p{margin-top:48px;}

/* Mode C — manifesto (Leadership Philosophy): deliberately styled as a
   quote, not a second body block — the whole point is that it must NOT
   look like .thesis p above it. Kicker stays a small mono label (13px,
   inherited from .mono). Quote size brought down (30 -> 26px) per
   direct "still competes too much with the hero" feedback, with a
   slightly more open line-height to match; the gold closing sentence
   now matches the quote's size (color+weight alone carry its emphasis)
   rather than being deliberately smaller than it — it only needs to
   stay larger than body text (16px), which it comfortably does. */
.manifesto{border-top:1px solid var(--rule);padding:48px 0 48px;}
.manifesto .kicker{font-family:var(--mono);color:var(--copper);margin-bottom:32px;display:block;}
.manifesto-body{max-width:54ch;}
.manifesto p{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.5;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty;}
.manifesto p+p{margin-top:48px;}
.manifesto .closing{color:var(--copper);font-weight:600;}

/* Mode E — close: no closing statement anymore — just the hand-off to
   Track Record / Credentials / Contact, so padding is trimmed to match
   a section that's now just a row of links, not a paragraph + row. */
.close{border-top:1px solid var(--rule);padding:48px 0 48px;}
/* .contact-links is shared with Contact's full-width divider rows,
   where the default stretch is correct — but here it holds .btn
   elements, which are meant to be compact, bordered boxes. Without
   this, the column's default align-items:stretch forces each button
   to the container's full width and the lack of a gap lets their
   borders touch, so three buttons read as one big fused slab instead
   of three distinct actions. */
.close .contact-links{align-items:flex-start;gap:12px;}

/* ---------- Page head (non-Home page title block) ---------- */
.page-head{padding-top:48px;}
.page-head .lede{margin-top:16px;}
.page-head .contact-links{margin-top:32px;}
/* Contact is the one page with almost no content below the fold — left
   at the shared .page-head's plain 48px, it read as everything glued
   to the top of an otherwise empty page rather than a deliberately
   calm, minimal composition. Generous top and bottom air gives it real
   presence instead. position:relative+overflow:hidden contains the
   watermark below the same way .hero does on Home. */
.contact-head{
  padding-top:clamp(3rem, 2rem + 5vw, 8rem);padding-bottom:96px;
  position:relative;overflow:hidden;
}
/* The same mark as Home's hero watermark, reused here — Contact is the
   last stop on the site, and the mark reappearing quietly in the
   background reads as a deliberate bookend rather than the page just
   trailing off. Same size/position/opacity as .hero-watermark for
   consistency (top:20px to actually match — this was 0 and sat 20px
   off from Home's); z-index above the text per the same reasoning
   (very low opacity, so it tints rather than obscures). */
.contact-watermark{
  position:absolute;right:-40px;top:20px;width:260px;height:260px;opacity:.10;
  pointer-events:none;z-index:2;
}
@media (max-width:900px){.contact-watermark{display:none;}}
.contact-head .section-title,.contact-head .lede{position:relative;z-index:1;}

/* ---------- Disclosure (credential categories, experience detail) ---------- */
.disclosure{max-width:var(--content);border-top:1px solid var(--rule);padding:16px 0;}
.disclosure:first-child{border-top:0;}
.disclosure>summary{cursor:pointer;list-style:none;color:var(--ink);font-weight:600;font-size:var(--t-md);}
.disclosure>summary::-webkit-details-marker{display:none;}
.disclosure>summary::before{content:"+ ";color:var(--cobalt);font-family:var(--mono);}
.disclosure[open]>summary::before{content:"\2212 ";}
.disclosure-body{margin-top:16px;}
.disclosure-body p{color:var(--body);font-size:var(--t-md);}
.disclosure-body ul{list-style:none;}
.disclosure-body li{padding:8px 0;border-top:1px solid var(--rule);color:var(--body);font-size:var(--t-nav);}
.disclosure-body li:first-child{border-top:0;}
.disclosure-body ul+ul,.disclosure-body p+ul{margin-top:16px;}

/* ---------- Credential card (the one raised surface) ---------- */
.cred-card{max-width:var(--content);background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow);padding:24px 24px 8px;}
.cred-card ul{list-style:none;margin-top:16px;}
/* flex-wrap so a long credential name + org don't overflow/clip on a
   narrow phone — harmless on wider screens where there's already room
   for both on one line. */
.cred-card li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:16px 0;border-top:1px solid var(--rule);transition:background .2s var(--ease);}
.cred-card li:first-child{border-top:0;}
.cred-card li:hover{background:var(--copper-soft);}
.cred-card .bar{width:2px;align-self:stretch;background:var(--copper);flex:none;}
/* Certifying body's own logo, e.g. PMI's mark includes solid black —
   a fixed white chip (not a theme token) keeps every logo's original
   colors legible on both the light and dark --surface card background,
   without altering the emblems themselves. */
.cred-card .cred-logo{
  width:24px;height:24px;object-fit:contain;align-self:center;flex:none;
  background:#FFFFFF;border-radius:6px;padding:4px;box-sizing:content-box;
}
/* Serif, matching how every other "name" on the site reads (person,
   company, degree) — was sans-serif bold, the one identity-scale text
   on the page not in the editorial register everything else uses. */
.cred-card strong{font-family:var(--serif);font-size:var(--t-lg);color:var(--ink);font-weight:600;letter-spacing:-.008em;}
/* What the acronym stands for — sits right next to it (not right-
   aligned like .org, which answers "issued by whom" instead). */
.cred-card .cred-full{font-family:var(--sans);font-size:var(--t-sm);color:var(--meta);}
/* Was right-aligned via margin-left:auto, which stretched the row edge
   to edge and left a wide dead gap on desktop between the acronym's
   full name and the org — per direct "too spread out" feedback, org
   now sits grouped with the rest of the line, set off only by a small
   dot (same copper-muted dot used for the Home hero's credential
   line) instead of the full-width push. */
.cred-card .org{font-size:var(--t-sm);color:var(--meta);}
.cred-card .org::before{content:"\2022";margin-right:8px;color:var(--copper-muted);}
/* Mobile only: at narrow widths, whether .cred-full happened to fit on
   the acronym's own line or not came down to a few px difference in
   each certification's exact text width, so one row (PMP) wrapped
   differently from the other two — inconsistent, not a deliberate
   layout. flex-basis:100% forces it onto its own line every time,
   regardless of length, so all three rows read the same way. */
@media (max-width:640px){
  /* flex-basis:100% forces .cred-full onto its own line every time
     regardless of exact text length (see above); margin-top opens the
     gap between that line and the logo+acronym line above it slightly
     wider than the shared 4px row-gap alone, per direct feedback
     (marked in a screenshot) that it read too tight. .org below keeps
     the plain 4px gap, untouched. */
  .cred-card .cred-full{flex-basis:100%;margin-top:4px;}
}

/* ---------- Track record: Education list (Credentials page reuses this) ---------- */
.tr-list{list-style:none;max-width:calc(var(--content) * 1.2);}
.tr-list li{position:relative;padding:24px 0;border-top:1px solid var(--rule);}
.tr-list li:first-child{border-top:0;}
/* Pulled out into the rail, left of .col's divider — same technique as
   Track Record's .exp-role-date (right:100% anchors to this li's own
   left edge, +64px pushes it further left; the box grows leftward
   from there so it can never cross the divider regardless of exactly
   how wide a given date range renders). top:27px lines it up with the
   title text, which sits 24px below the li's own top edge (the li's
   padding-top) plus a few px for baseline alignment against the
   serif h3 next to it. */
.tr-list .yr{
  position:absolute;right:calc(100% + 64px);top:54px;
  white-space:nowrap;
  /* Same quiet blue-gray as Track Record's role dates (cobalt mixed
     into --meta) instead of plain --meta — ties the two date columns
     together as one consistent "date" language sitewide. */
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.03em;
  color:color-mix(in srgb, var(--cobalt) 35%, var(--meta));font-variant-numeric:tabular-nums;
}
/* 820px, not tr-list's old 640px — matches .row-inner's own breakpoint
   (see Layout primitives), the point where the rail stops sitting
   beside the content and stacks above it instead, so there's no
   longer a rail to reach into. Same reversion as .exp-role-date. */
@media (max-width:820px){
  .tr-list .yr{position:static;display:block;width:auto;white-space:normal;margin-bottom:8px;}
}
/* Serif — degree titles read as names/credentials, matching the same
   editorial register as the Flagship Credentials card, company names
   on Track Record, and the identity card on Home. */
.tr-list h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;line-height:1.25;}
.tr-list .org{font-size:var(--t-sm);color:var(--meta);margin-top:8px;display:flex;align-items:center;gap:8px;}
/* University emblem, same white-chip treatment as the flagship
   credentials' logos (.cred-card .cred-logo) — Anadolu's mark in
   particular is a very dark maroon that would lose legibility against
   the dark-mode surface otherwise. img{display:block} is the sitewide
   default, but .org's own flex/align-items above already lays this
   out correctly next to the university name without extra rules. */
.tr-list .org img{width:18px;height:18px;object-fit:contain;background:#FFFFFF;border-radius:4px;padding:2px;box-sizing:content-box;flex:none;}
/* The course-topics line (MSc) is supplementary detail, not body
   copy — sized down to match the small-label tier instead of the
   site's full 18px body size, so it reads as a quiet specialization
   tag, not a paragraph competing with the degree title above it. */
.tr-list .org+p{margin-top:8px;font-family:var(--serif);font-size:var(--t-sm);color:var(--meta);}

/* Its own type treatment, not a reuse of the generic .lede paragraph
   style every other section's intro sentence shares: heavier weight,
   tighter line-height and full ink so it reads as one considered
   statement rather than flowing body copy. The two inline links are
   cobalt — the mark's own peak color — with no underline/rule, just
   the site's normal link treatment (underline appears on hover only,
   via the global a[href]:hover rule). */
.credly-note{
  font-family:var(--serif);font-weight:500;font-size:var(--t-md);line-height:1.5;
  letter-spacing:-.006em;color:var(--ink);max-width:640px;
}
.credly-note a{color:var(--cobalt);}

/* ---------- Track record: Experience — a career timeline ----------
   Each role rendered as its own quiet card — a McKinsey/Crestron-
   register timeline, not a CV list. The dedicated timeline line this
   section used to have alongside .row-inner .col's own rail divider
   has been removed per direct feedback (two vertical lines was one
   too many, and it was the source of the whole date-alignment
   back-and-forth) — Track Record now shares the exact same single
   divider Credentials/Contact already use. */
/* 80 -> 48px — with company gaps already tightened to ~65px, 80px
   here read as an oversized, disconnected pause before the footer;
   48px keeps a real close without the dead air. */
.exp-list{position:relative;display:flex;flex-direction:column;margin-bottom:48px;}
/* Tightened again (was 32/32) per direct "narrow this further"
   feedback — especially visible on the single-role companies (Chess
   Federation, Bouygues), where the old spacing still read as loose
   next to so little content. */
.exp-company + .exp-company{margin-top:32px;border-top:1px solid var(--rule);padding-top:32px;}
.exp-company-head{padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:16px;}
/* Company name: 18-28px, copper-muted (was neutral ink) per direct
   feedback — still the section's clear lead, no longer oversized. */
.exp-company-name{
  font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.15;color:var(--copper-muted);
  /* Flat --t-lg (21px), not a fluid clamp — matches .tr-list h3 and
     .cred-card strong on Credentials exactly (both are 21px/600), per
     direct feedback that Credentials' sizing reads better. Same size
     as .exp-role-title now too; hierarchy between company and role
     still reads clearly through color alone (copper-muted vs ink),
     the same "size stays flat, color/space carry hierarchy" approach
     already used for the identity card on Home. */
  font-size:var(--t-lg);
}
.exp-company-loc{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.02em;color:var(--meta);margin-top:8px;}
/* 24 -> 20px — companies with several roles (Atempo has four) were
   the main source of "this section runs on too long" feedback;
   trimming the role-to-role gap is the one lever that actually
   shortens that specific run without touching real content. */
.exp-company .exp-role + .exp-role{margin-top:28px;}
/* Every role (including Atempo's, which used to be a full bordered
   card) is now this same quiet copper-muted spine — the bordered
   card variant was removed per direct "remove the black boxes"
   feedback, so there's only ever been one treatment since; the old
   .exp-role/.exp-role-minimal split (and the now-unreachable
   border/background/box-shadow/hover it carried) has been collapsed
   into this one rule. */
.exp-role{
  position:relative;
  padding:0 0 0 16px;border-left:2px solid var(--copper-muted);
}
/* The date lives inside its own role card (guaranteeing it always sits
   at this exact card's height, whatever that turns out to be) but is
   pulled back out into the rail's own column. right (not left+width)
   so the box sizes to fit its own text and grows leftward from a fixed
   anchor, instead of a guessed width the text could overflow past —
   this can't cross the rail/col divider regardless of exactly how wide
   "Jan 2025 – Present" renders, since the box only grows further left;
   its right edge never moves. "right:100%" alone puts the right edge
   exactly at .exp-role's own left edge (0); +56px pushes it that much
   further left. Shifted right from +96px now that the separate
   timeline line (which this used to also have to clear) is gone. */
.exp-role-date{
  position:absolute;right:calc(100% + 64px);top:0;
  white-space:nowrap;
  /* Hardcoded rather than through --t-sm, per direct "biraz daha
     küçült" feedback — keeps the reduction scoped to Track Record's
     rail dates and doesn't also shrink Credentials' .tr-list .yr,
     which shares the same token. */
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  /* Solid cobalt (the emblem's own color) for every date, not just
     "current" ones — per direct feedback. */
  color:var(--cobalt);font-variant-numeric:tabular-nums;
}
/* Below 820px .row-inner drops to a single stacked column (see Layout
   primitives), so there's no rail column left to reach into — the date
   just becomes a normal line above the title instead. */
@media (max-width:820px){
  .exp-role-date{position:static;display:block;width:auto;white-space:normal;margin-bottom:8px;}
}
.exp-role-title{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;color:var(--ink);letter-spacing:.005em;}
/* Line-height/margins tightened again (1.65->1.55, 14->12px, bullet
   gap 14->8px) per direct "reduce the line spacing in this part"
   feedback. */
.exp-role-summary{
  /* Hardcoded rather than through --t-md, per direct "biraz küçült"
     feedback — keeps the reduction scoped to Track Record's role
     summaries/bullets and doesn't also shrink body text elsewhere
     that shares the same token. */
  font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.65;
  color:var(--body);max-width:720px;margin-top:14px;text-wrap:pretty;
}
/* Multi-paragraph roles (e.g. Atempo's Project Manager summary) get a
   distinctly bigger gap between paragraphs than the title-to-first-
   paragraph gap above, so the two paragraphs read as separate beats
   instead of one dense block. */
.exp-role-summary + .exp-role-summary{margin-top:20px;}
/* A thin dash marker (not a round bullet), per explicit direction to
   use only typography/spacing/dividers, nothing decorative. */
.exp-role-bullets{list-style:none;max-width:720px;margin-top:20px;}
.exp-role-bullets li{
  position:relative;padding-left:18px;
  font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--body);
}
.exp-role-bullets li::before{content:"\2013";position:absolute;left:0;color:var(--meta);}
.exp-role-bullets li+li{margin-top:12px;}

/* ---------- Buttons / links-as-buttons ---------- */
/* Apple/Stripe/Crestron register, per direct "still feel a bit
   generic" feedback: slightly shorter (48->44px), a hair less
   horizontal padding, lighter type (600->500), and a border mixed down
   toward transparent so it reads thinner than its actual 1px. Hover is
   quick and smooth (180ms, was 300ms) — fast enough to feel immediate,
   not a lingering fade. */
/* Border back to --rule-strong (was the very faint --card-border) —
   these are the page's primary actions, not a passive card surface,
   so they read as properly clickable rather than nearly invisible at
   rest. The arrow is its own element now, nudging right on hover
   (matching the same detail on Contact's link list) instead of being
   flat label text. */
.btn{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  height:44px;padding:0 28px;min-width:200px;
  font-size:var(--t-md);font-weight:500;
  border:1px solid var(--rule-strong);color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
a.btn:hover{border-color:var(--cobalt);color:var(--cobalt);text-decoration:none;}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.primary:hover{background:var(--cobalt);border-color:var(--cobalt);color:var(--on-cobalt);}
.btn-arrow{display:inline-block;transition:transform .2s var(--ease);}
a.btn:hover .btn-arrow{transform:translateX(4px);}

/* A vertical list, not a row of pill buttons — the same "hairline
   divider between rows" pattern as .cred-card/.tr-list/.disclosure
   elsewhere on the site, so Contact's one real content block reads as
   part of the same editorial system instead of a generic social-icon
   row. Capped at --content so it doesn't sprawl edge-to-edge on a wide
   screen, leaving the watermark room on the right. */
.contact-links{display:flex;flex-direction:column;max-width:var(--content);position:relative;z-index:1;}
.contact-link{
  display:flex;align-items:center;gap:20px;padding:20px 0;
  border-top:1px solid var(--rule);color:var(--ink);
  transition:gap .2s var(--ease);
}
.contact-link:first-child{border-top:0;}
.contact-link .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;width:32px;height:32px;flex-shrink:0;
  border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sunken);color:var(--body);
}
/* LinkedIn/Credly logos: fixed brand colors, sit fine on --sunken in
   both themes. GitHub is inlined as an SVG (see github_icon() in
   build.py) using currentColor, so it already picks up this color. */
.contact-link .tag img{width:20px;height:20px;object-fit:contain;display:block;}
.contact-link .tag svg{display:block;}
.contact-link-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
/* Serif — same "this is a name" register as person/company/degree
   names elsewhere, not a generic sans button label. */
.contact-link-label{font-family:var(--serif);font-size:var(--t-lg);color:var(--ink);transition:color .2s var(--ease);}
.contact-link-url{font-family:var(--mono);font-size:var(--t-sm);color:var(--meta);}
.contact-link-arrow{margin-left:auto;color:var(--meta);transition:transform .2s var(--ease),color .2s var(--ease);}
a.contact-link:hover{text-decoration:none;}
a.contact-link:hover .contact-link-label{color:var(--cobalt);}
a.contact-link:hover .contact-link-arrow{transform:translateX(4px);color:var(--cobalt);}

/* ---------- Footer ---------- */
/* Pulled closer to the CTA row above (margin-top 48->24) and given
   less air below the copyright line (bottom padding 32->16) per direct
   "feels too isolated" feedback — the page now ends on a tighter,
   more deliberate close instead of trailing off into empty space. */
.site-footer{border-top:1px solid var(--rule);padding:24px 0 16px;margin-top:24px;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.site-footer p{margin:0;font-size:14px;color:var(--meta);}

/* ---------- Reveal ---------- */
/* Progressive enhancement: .rv only starts hidden once html.js is present
   (added by the tiny inline bootstrap script in <head> — see render_head
   in build.py). Without JS, or if that script is ever blocked, content
   never enters a hidden state in the first place, instead of depending
   on a script that might not run to reveal it again.
   ".js .rv" (not "html.js .rv") is deliberate: the extra type selector
   pushed this rule's specificity (0,2,1) above .rv.in's (0,2,0), so the
   hidden state was winning even after JS added .in — content stayed
   invisible forever on every browser with JS enabled. Both rules are
   now (0,2,0), so source order correctly lets .rv.in win. */
.js .rv{opacity:0;transform:translateY(8px);}
.rv.in{opacity:1;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease);}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;}}

/* ---------- Print ---------- */
/* A résumé-style read: strip navigation/decoration, force the light
   palette regardless of OS dark mode, expand the certification
   disclosures so nothing is hidden behind a click that can't happen on
   paper, and let borders (not backgrounds/shadows) carry structure. */
@media print{
  :root{
    --paper:#FAFAF8; --surface:#FFFFFF; --sunken:#F1F1EE;
    --ink:#15171A; --body:#3A3F45; --meta:#6B7178;
    --rule:#E3E3DF; --rule-strong:#CFCFC9;
    --cobalt:#1E3564;
    --copper:#8A5626; --copper-soft:#F3EAE1; --copper-muted:#85562B;
  }
  *{background:transparent !important;box-shadow:none !important;text-shadow:none !important;}
  body{color:#000;}
  .site-header,.skip-link,.hero-watermark,.contact-watermark,.btn{display:none !important;}
  .row-inner{grid-template-columns:1fr;}
  .row-inner .rail-sticky{position:static;}
  .row-inner .col{border-left:0;padding:8px 0 24px;}
  .exp-role-date{position:static;display:block;width:auto;white-space:normal;margin-bottom:8px;}
  .disclosure-body{display:block !important;}
  .disclosure>summary::before{display:none !important;}
}