/*
Emil Scott Portfolio — static version of the WordPress theme
"Emil Scott Portfolio" v1.18.0 (originally at https://emilscott.se).
*/


  :root{
    --ink:#16181B;
    --ink-2:#202226;
    --ink-3:#2B2E33;
    --paper:#F5F3EC;
    --paper-2:#EAE7DC;
    --line-soft:#6E7176;
    --line-strong:#DADCDF;
    --text-on-ink:#ECECEA;
    --text-on-ink-dim:#A6A9AE;
    --text-on-paper:#1C1D20;
    --text-on-paper-dim:#63666B;
    /* A third, medium tone — deliberately between --ink and --paper — for
       the "How Emil works" / "Designing for both sides" statement
       sections (Emil: v1.16.0's paper background "blev för ljust", pick
       something between that and the original dark version). --text-on-
       dusk-dim is its own tuned tone rather than a reuse of --text-on-
       ink-dim: at this background's lightness, --text-on-ink-dim's
       contrast ratio drops below WCAG AA for small text (~3.6:1) — see
       the note in "WordPress-tema v1.17" in the project doc for the
       numbers. */
    --dusk:#55524B;
    --dusk-2:#403D38;
    --text-on-dusk:#F5F4F1;
    --text-on-dusk-dim:#D7D5D0;
    --accent:#FF6A4D;
    --accent-ink:#3A0F05;

    --cat-web:#4FD1C5;
    --cat-app:#F5B841;
    --cat-journey:#7FA8FF;
    --cat-service:#E36BA6;
    --cat-lead:#B29CFB;

    --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:'Public Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    background:var(--ink);
    color:var(--text-on-ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    overflow-x:hidden;
  }

  img{max-width:100%;}

  a{color:inherit;}

  h1,h2,h3{
    font-family:var(--font-display);
    text-wrap:balance;
    margin:0;
    font-weight:600;
  }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  /* ---------- layout shells ---------- */
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding-inline:clamp(20px, 5vw, 64px);
  }

  section{position:relative;}

  /* ---------- header ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px clamp(20px, 5vw, 64px);
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:.04em;
    background:transparent;
    transition:background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    border-bottom:1px solid transparent;
  }
  header.is-scrolled{
    background:rgba(22,24,27,.86);
    backdrop-filter:blur(8px);
    border-bottom-color:rgba(218,220,223,.15);
  }
  header .mark{
    display:flex;
    align-items:baseline;
    gap:.5em;
    text-decoration:none;
    color:var(--text-on-ink);
  }
  header .mark strong{
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:600;
  }
  header .mark span{ color:var(--text-on-ink-dim); }

  nav.primary-nav{ display:flex; gap:clamp(14px,3vw,28px); }
  nav.primary-nav a{
    text-decoration:none;
    color:var(--text-on-ink-dim);
    transition:color .2s ease;
  }
  nav.primary-nav a:hover{ color:var(--text-on-ink); }

  .social-row{ display:flex; gap:14px; align-items:center; }
  .social-row a{
    display:inline-flex;
    width:30px; height:30px;
    align-items:center; justify-content:center;
    border:1px solid rgba(218,220,223,.35);
    border-radius:50%;
    color:var(--text-on-ink);
    text-decoration:none;
    transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
  }
  .social-row a:hover{
    border-color:var(--accent);
    background:rgba(255,106,77,.12);
    transform:translateY(-1px);
  }
  .social-row svg{ width:14px; height:14px; }


  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    background:
      radial-gradient(ellipse 900px 500px at 78% 8%, rgba(200,203,208,.10), transparent 60%),
      linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
    overflow:hidden;
    padding-bottom:clamp(48px, 8vw, 96px);
  }
  .hero__grid{
    position:absolute; inset:-10%;
    background-image:
      repeating-linear-gradient(0deg, rgba(218,220,223,.08) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(218,220,223,.08) 0 1px, transparent 1px 64px);
    will-change:transform;
  }
  /* Sits on top of the grid pattern above and, once a real image is set,
     covers it completely — same mechanism as .moment__photo below the
     "How Emil works" heading. Empty, it's just a faint placeholder box
     and the grid pattern shows straight through. */
  .hero__bg{
    position:absolute; inset:-10%;
    border:1px dashed rgba(218,220,223,.35);
    background:rgba(218,220,223,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-on-ink-dim);
    font-family:var(--font-mono);
    font-size:.76rem;
    will-change:transform;
  }
  .hero__route-wrap{
    position:absolute;
    top:8%; right:-4%;
    width:min(52vw, 620px);
    aspect-ratio:4 / 5;
    opacity:.55;
    will-change:transform;
  }
  /* Second, smaller route image, top left — replaces the old text pin. */
  .hero__route-wrap--secondary{
    top:8%; left:6%; right:auto;
    width:min(22vw, 200px);
  }
  .hero__route-photo{
    position:absolute;
    inset:0;
    border-radius:6px;
    border:1px dashed rgba(218,220,223,.35);
    background:rgba(218,220,223,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-on-ink-dim);
    font-family:var(--font-mono);
    font-size:.76rem;
  }
  .hero__route-dot{
    position:absolute;
    width:22px; height:22px;
    margin:-11px 0 0 -11px;
    border-radius:50%;
    border:1.5px dashed currentColor;
    background:rgba(255,255,255,.06);
    color:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:.6rem;
    line-height:1;
  }
  .hero__content{
    position:relative; z-index:2;
    max-width:820px;
  }
  .hero__eyebrow{
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--line-strong);
    margin:0 0 18px;
  }
  .hero h1{
    font-size:clamp(2.8rem, 8vw, 5.6rem);
    line-height:.98;
    color:var(--text-on-ink);
  }
  .hero h1 em{
    font-style:italic;
    color:var(--line-strong);
    font-weight:400;
  }
  .hero__lede{
    margin:22px 0 34px;
    max-width:44ch;
    font-size:clamp(1.05rem, 1.6vw, 1.25rem);
    color:var(--text-on-ink-dim);
  }
  .hero__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 26px;
    background:var(--accent);
    color:var(--accent-ink);
    text-decoration:none;
    border-radius:2px;
    font-weight:600;
    font-size:.95rem;
    border:1px solid var(--accent);
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(255,106,77,.6); }
  .btn--ghost{
    background:transparent;
    color:var(--text-on-ink);
    border-color:rgba(236,236,234,.4);
  }
  .btn--ghost:hover{ border-color:var(--text-on-ink); box-shadow:none; }

  /* ---------- about ---------- */
  .about{
    background:var(--paper);
    color:var(--text-on-paper);
    padding:clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 96px);
  }
  .about__grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:clamp(32px, 6vw, 80px);
    align-items:start;
  }
  @media (max-width:820px){ .about__grid{ grid-template-columns:1fr; } }
  .about__statement{
    font-family:var(--font-display);
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.7rem, 3.4vw, 2.5rem);
    line-height:1.3;
    color:var(--text-on-paper);
  }
  .about__statement span{ color:var(--accent); font-style:normal; }
  .about__caption{
    margin:14px 0 0;
    font-family:var(--font-mono);
    font-size:.78rem;
    color:var(--text-on-paper-dim);
  }
  .about__body p{
    margin:0 0 18px;
    color:var(--text-on-paper-dim);
    max-width:62ch;
  }
  /* The photo sits above the quote, in the same column, and is as wide as
     that column (the "quote area"). Once a real photo is set, the image is
     sized by width (100% of the column) with a dynamic, proportional height
     — never stretched or cropped. Before that, a fixed-height dashed box
     stands in as the placeholder. */
  .about__quote-col{ display:flex; flex-direction:column; }
  .about__photo{
    margin-bottom:24px;
    width:100%;
    min-height:180px;
    border-radius:8px;
    border:1px dashed rgba(28,29,32,.3);
    background:rgba(28,29,32,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--text-on-paper-dim);
    font-family:var(--font-mono);
    font-size:.76rem;
    letter-spacing:.02em;
  }
  .about__photo.is-filled{
    min-height:0;
    border:none;
    background:none;
  }
  .about__photo.is-filled img{
    display:block;
    width:100%;
    height:auto;
    border-radius:8px;
  }
  .stat-row{
    display:flex;
    gap:clamp(24px, 4vw, 48px);
    margin:28px 0 30px;
    flex-wrap:wrap;
  }
  .stat-row div{ min-width:90px; }
  .stat-row .num{
    display:block;
    font-family:var(--font-mono);
    font-size:1.7rem;
    color:var(--text-on-paper);
  }
  .stat-row .lbl{
    font-size:.78rem;
    color:var(--text-on-paper-dim);
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .tag-row{ display:flex; flex-wrap:wrap; gap:9px; }
  .tag-row span{
    font-family:var(--font-mono);
    font-size:.76rem;
    padding:6px 11px;
    border:1px solid rgba(28,29,32,.22);
    border-radius:2px;
    color:var(--text-on-paper-dim);
  }

  /* ---------- timeline ---------- */
  .timeline-section{
    background:var(--ink);
    padding:clamp(72px, 10vw, 128px) 0 clamp(80px, 10vw, 140px);
  }
  /* This section gets a wider content column than the rest of the page
     (1120px) so a large/full-screen window has real room for more uppdrag
     per row, not just a stretched version of the standard 3-up grid — see
     .timeline's auto-fill grid below. */
  .timeline-section .wrap{ max-width:1680px; }
  .timeline-section__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:clamp(36px, 6vw, 56px);
  }
  .timeline-section h2{
    font-size:clamp(2.1rem, 4.5vw, 3rem);
    color:var(--text-on-ink);
  }
  .timeline-section__head p{
    margin:10px 0 0;
    color:var(--text-on-ink-dim);
    max-width:46ch;
  }

  .filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:clamp(40px, 6vw, 64px);
  }
  .filters button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.02em;
    padding:9px 15px 9px 12px;
    background:transparent;
    color:var(--text-on-ink-dim);
    border:1px solid rgba(218,220,223,.28);
    border-radius:999px;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .filters button .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--dot, var(--line-strong));
    flex:none;
  }
  .filters button:hover{ color:var(--text-on-ink); border-color:rgba(218,220,223,.6); }
  .filters button[aria-pressed="true"]{
    color:var(--ink);
    background:var(--line-strong);
    border-color:var(--line-strong);
  }
  .filters button[aria-pressed="true"] .dot{ background:var(--ink); }

  /* One flat, flowing grid of uppdrag — no more per-year rows and no more
     employer rail (both removed: Emil's new brief wants "just a bunch of
     images", grouped only by filling left-to-right/top-to-bottom, with
     company name moved into the expanded view instead of the grid). Columns
     size themselves via auto-fill/minmax rather than fixed per-breakpoint
     column counts: whatever fits at the current width fills in, wrapping to
     a new row only when it must, so the grid naturally goes from a single
     full-width card on narrow screens up to several across on a large
     screen — no manual tier-by-tier tuning. Zero gap, per Emil's "ta bort
     all padding mellan bilderna" — each .t-visual's own 1px border is the
     only seam between cards. */
  .timeline{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(480px, 100%), 1fr));
    gap:0;
  }

  .t-card{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .t-card.in-view{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .t-card{ opacity:1; transform:none; transition:none; }
  }

  .t-visual{
    position:relative;
    display:block;
    width:100%;
    /* +50% on the old 236px baseline, per Emil's "gör bilderna 50% större". */
    min-height:354px;
    border-radius:3px;
    overflow:hidden;
    border:1px solid rgba(218,220,223,.16);
    isolation:isolate;
    padding:0;
    margin:0;
    cursor:pointer;
    font:inherit;
    text-align:left;
    background:transparent;
    color:inherit;
    -webkit-appearance:none;
    appearance:none;
  }
  /* Narrow screens: a noticeably taller card image once the auto-fill grid
     (see .timeline above) has dropped to a single full-width column — same
     +50% scaling as the desktop min-height above, applied to the old
     clamp(240px, 62vw, 340px). Needs to come after the unconditional
     min-height:354px rule above to win at the same specificity here. */
  @media (max-width:959px){
    .t-visual{ min-height:clamp(360px, 93vw, 510px); }
  }
  .t-visual:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .t-card[data-open="true"] .t-visual{ border-color:var(--dot, var(--accent)); }
  .t-visual__bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
  }
  /* Flat 60%-black tint over the whole card image, on top of the gradient
     below — it's what's removed on hover/focus and while the card is open,
     so the image reads clearly then. The gradient itself stays always-on,
     since it's what keeps the title legible at the bottom in every state. */
  .t-visual__bg::before{
    content:'';
    position:absolute; inset:0;
    background:rgba(10,11,13,.6);
    transition:opacity .25s ease;
  }
  .t-visual:hover .t-visual__bg::before,
  .t-visual:focus-visible .t-visual__bg::before,
  .t-card[data-open="true"] .t-visual__bg::before{
    opacity:0;
  }
  .t-visual__bg::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.35) 55%, rgba(10,11,13,.08) 100%);
  }
  /* Category tags now live inside the feature image, under the title (Emil:
     "flytta in categories i feature bilden, under rubriken för uppdraget") —
     so, like the title above them, they sit over the image's dark gradient
     and use the same off-white/text-shadow treatment rather than the on-ink
     tokens used elsewhere in this dark section. */
  .t-card__cats{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px 12px;
    margin-top:6px;
  }
  .t-card__cat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.02em;
    color:rgba(255,255,255,.82);
    text-shadow:0 1px 6px rgba(0,0,0,.35);
  }
  .t-card__cat .dot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--dot, rgba(255,255,255,.55));
    flex:none;
  }
  /* Year — sits right after the category tags in that same row (Emil:
     "flytta årtalet till efter categories"), where the "expand" hint used to
     be shown; that hint is gone entirely now (Emil: "ta bort taggen för
     'expand'"). Same reveal pattern the hint used to have though: invisible
     until the card is hovered/focused, so the always-visible card face is
     still just the image, title and categories, per the "no year, no
     company name in the grid" rule from the previous round. */
  .t-visual__year{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.02em;
    color:rgba(255,255,255,.6);
    text-shadow:0 1px 6px rgba(0,0,0,.35);
    opacity:0;
    transition:opacity .2s ease;
  }
  .t-visual:hover .t-visual__year,
  .t-visual:focus-visible .t-visual__year{ opacity:1; }
  .t-visual__foot{
    position:absolute;
    left:16px; right:16px; bottom:14px;
    z-index:2;
    display:flex;
    align-items:flex-end;
    gap:11px;
  }
  .t-visual__foot-text{
    display:block;
    min-width:0;
  }
  .t-visual__title{
    display:block;
    font-family:var(--font-display);
    font-size:1.15rem;
    font-weight:600;
    color:#fff;
    text-wrap:balance;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .t-visual__expand{
    position:absolute;
    right:14px; bottom:14px;
    z-index:2;
    width:28px; height:28px;
    border-radius:50%;
    border:1px solid rgba(236,236,234,.5);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
    line-height:1;
    background:rgba(10,11,13,.35);
    transition:transform .25s ease, background-color .2s ease;
  }
  .t-card[data-open="true"] .t-visual__expand{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); }

  .t-expando{
    grid-column:1 / -1;
    margin-top:-6px;
  }
  .t-expando[hidden]{ display:none; }
  /* The expanded uppdrag panel sits on white, not the dark timeline "ink" —
     everything below therefore uses the on-paper text tokens and the same
     rgba(28,29,32, alpha) border/placeholder convention already used in the
     light About/Contact sections, instead of the on-ink ones used elsewhere
     on this dark page. --line-strong (#DADCDF) is a light-on-dark border
     colour and would be almost invisible here, so the "no matching category"
     fallback for the accent border becomes --line-soft instead (also used,
     unchanged, as the fallback in openExpando() in main.js). */
  .t-detail{
    position:relative;
    padding:22px 56px 24px 24px;
    border:1px solid rgba(28,29,32,.14);
    border-top:2px solid var(--expando-dot, var(--line-soft));
    border-radius:3px;
    background:#FFFFFF;
  }
  /* Centred as a BLOCK, not centred TEXT (Emil clarified after v1.13.0:
     "informationen ska fortfarande vara vänsterställd inom div-taggen,
     men hela den delen ska vara centrerad i den expanderade vyn") —
     align-items here centres the logo/title/meta row as a column, i.e. it
     positions each of those blocks in the middle of the panel, but the
     actual text inside them (h3, below) reads left-aligned, not
     center-aligned. Same split applies to the rest of the panel's content
     below (.t-detail p/__intro/strong use margin:auto to centre the BOX
     but text-align:left for the text inside it; .t-detail__meta and
     .t-methods are left as centred rows, since a group of short tag pills
     isn't body text — flag this reading with Emil if it's not what he
     meant). The one deliberate exception is .t-detail__employer at the
     very bottom, which Emil separately asked to keep at the bottom-RIGHT
     of the panel — that block still uses justify-content:flex-end,
     unchanged. No padding-right reserved here for the close button any
     more: .t-detail's own 56px right padding (below) already clears it on
     its own, so this head can centre on the panel's actual midpoint
     instead of an artificially narrowed one. */
  .t-detail__head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
  }
  /* Company logo — the uppdrag's own client/company logo, back on its own
     row above the title (restored — see main.js's openExpando()). Fixed
     height, dynamic (auto) width so it's never stretched or cropped —
     object-fit:contain, not cover. No fixed/max width once filled: the logo
     can be as wide as it needs to be (bounded only by the theme's global
     img{max-width:100%} rule, so it can never overflow the panel). */
  .t-detail__logo{
    flex:none;
    height:44px;
    width:44px;
    border-radius:8px;
    border:1px dashed rgba(28,29,32,.3);
    background:rgba(28,29,32,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-on-paper-dim);
    font-family:var(--font-mono);
    font-size:1.4rem;
    font-weight:300;
    line-height:1;
    overflow:visible;
  }
  .t-detail__logo.is-filled{
    width:auto;
    border:none;
    background:none;
  }
  .t-detail__logo.is-filled img{
    height:44px;
    width:auto;
    object-fit:contain;
    display:block;
    border-radius:0;
  }
  /* No logo on file for this uppdrag's employer: same dashed box, but a
     2-letter code (reusing the old employer-rail badge's type treatment)
     instead of the placeholder "+" glyph, which only ever meant "add a
     logo" elsewhere (.t-detail__logo without .is-filled, above). */
  .t-detail__logo.t-detail__logo--badge{
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.01em;
  }
  .t-detail__head h3{
    font-size:1.35rem;
    color:var(--text-on-paper);
    text-align:left;
  }
  .t-detail__meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:8px 0 0;
  }
  .t-detail__tag{
    font-family:var(--font-mono);
    font-size:.68rem;
    padding:4px 9px;
    border:1px solid rgba(28,29,32,.2);
    border-radius:999px;
    color:var(--text-on-paper-dim);
  }
  /* Company info block, bottom-right of the panel (Emil: "lägg
     företagsinformationen längs ner till höger") — last thing in the panel,
     right-aligned, logo (or badge, see .t-detail__logo--badge above) plus
     name. Omitted entirely by main.js when an uppdrag has no employer. */
  .t-detail__employer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-top:8px;
  }
  .t-detail__employer-name{
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.02em;
    color:var(--text-on-paper);
  }
  .t-detail__close{
    position:absolute;
    top:16px; right:16px;
    width:30px; height:30px;
    border-radius:50%;
    border:1px solid rgba(28,29,32,.22);
    background:transparent;
    color:var(--text-on-paper);
    font-size:1.1rem;
    line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, background-color .2s ease;
  }
  .t-detail__close:hover{ border-color:var(--accent); background:rgba(255,106,77,.12); }
  /* margin:0 auto centres the max-width-capped box itself within the panel
     (or, inside .t-media-row__text, within its own column beside the
     portrait image) — that's the "hela den delen ska vara centrerad" part.
     text-align:left keeps the text inside that box reading normally,
     left-aligned/ragged-right, per Emil's clarification that the
     information itself should stay left-aligned within its own div even
     though the box is positioned centrally. */
  .t-detail p{
    margin:0 auto 12px;
    color:var(--text-on-paper-dim);
    max-width:62ch;
    font-size:.94rem;
    text-align:left;
  }
  .t-detail p:last-of-type{ margin-bottom:16px; }
  .t-detail__intro{
    font-family:var(--font-display);
    font-size:1.15rem;
    line-height:1.5;
    color:var(--text-on-paper);
    max-width:66ch;
    margin-bottom:16px !important;
  }
  .t-detail strong{
    display:block;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-on-paper);
    margin-bottom:4px;
    text-align:left;
  }
  .t-methods{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:18px; }
  .t-methods span{
    font-family:var(--font-mono);
    font-size:.7rem;
    padding:5px 10px;
    border:1px solid rgba(28,29,32,.2);
    border-radius:999px;
    color:var(--text-on-paper-dim);
  }
  /* Horizontal image slot (Image #1, and Image #2 in horizontal layout):
     width always fills the available text area; height is fixed (16:7) only
     for the empty placeholder box. Once a real image is set, the box lets go
     of that fixed shape and the image's own proportions decide the height —
     full width, dynamic height, never cropped.
     Deliberately no font-family/font-size override here (unlike the gallery
     tile below, which only carries its own font on the *tile*, not on the
     max-width'd wrapper): "ch" is measured against an element's own font, so
     a font override here would make this max-width resolve to a different
     pixel width than .t-gallery's — which is exactly the mismatch Emil
     flagged. Inheriting the default body font keeps the two identical. */
  .t-img-placeholder{
    width:100%;
    max-width:66ch;
    aspect-ratio:16/7;
    border:1px dashed rgba(28,29,32,.3);
    border-radius:3px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-on-paper-dim);
    text-align:center;
    margin:4px auto 22px;
    overflow:hidden;
  }
  .t-img-placeholder.is-filled{
    aspect-ratio:auto;
    border-style:solid;
    border-color:transparent;
    background:none;
  }
  .t-img-placeholder.is-filled img{
    display:block;
    width:100%;
    height:auto;
    border-radius:inherit;
  }
  .t-detail__intro + .t-img-placeholder{ margin-top:-2px; }

  .t-media-row{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin:4px 0 22px;
    align-items:stretch;
  }
  /* Vertical image slot: the opposite of the horizontal one above — height
     always fills the available image area (matched to the text column next
     to it via .t-media-row's align-items:stretch); width is fixed only for
     the empty placeholder, then goes dynamic once a real image is set. */
  .t-img-placeholder--portrait{
    width:min(220px, 100%);
    max-width:220px;
    aspect-ratio:3/4;
    margin:0;
    flex:none;
  }
  .t-img-placeholder--portrait.is-filled{
    width:auto;
    max-width:100%;
  }
  .t-img-placeholder--portrait.is-filled img{
    width:auto;
    height:100%;
    max-width:100%;
  }
  .t-media-row__text{
    flex:1 1 260px;
    min-width:220px;
  }
  .t-media-row__text p{ max-width:56ch; }
  .t-media-row__text p:last-child{ margin-bottom:0; }

  /* Gallery: full text width, stacked vertically, each tile sized the same
     way as the horizontal image slot above (full width, dynamic height once
     filled). The whole block is only rendered by the JS when at least one
     gallery image is set — no placeholders shown to visitors. */
  .t-gallery{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:4px auto 0;
    max-width:66ch;
  }
  .t-gallery__tile{
    width:100%;
    aspect-ratio:16/9;
    border:1px dashed rgba(28,29,32,.3);
    border-radius:3px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--text-on-paper-dim);
    text-align:center;
    padding:6px;
    overflow:hidden;
  }
  .t-gallery__tile.is-filled{
    aspect-ratio:auto;
    border-style:solid;
    border-color:transparent;
    background:none;
    padding:0;
  }
  .t-gallery__tile.is-filled img{
    display:block;
    width:100%;
    height:auto;
    border-radius:inherit;
  }

  /* ---------- highlights ---------- */
  .highlights{
    background:var(--ink-2);
    padding:clamp(64px, 9vw, 112px) 0 clamp(72px, 9vw, 120px);
  }
  .highlights h2{
    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(2rem, 4.2vw, 2.7rem);
    color:var(--text-on-ink);
    margin:0;
    white-space:nowrap;
  }
  /* On wider screens the heading turns sideways and sits beside the grid,
     top-aligned so it reads level with the first row of side projects. */
  .highlights__body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:clamp(20px, 4vw, 32px);
  }
  @media (min-width:768px){
    .highlights__body{
      flex-direction:row;
      align-items:flex-start;
    }
    .highlights__head{
      flex:0 0 auto;
    }
    .highlights h2{
      writing-mode:vertical-rl;
      transform:rotate(180deg);
    }
  }
  .highlights__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    flex:1 1 auto;
    min-width:0;
  }
  @media (min-width:640px){
    .highlights__grid{ grid-template-columns:repeat(2, 1fr); gap:24px; }
  }
  @media (min-width:980px){
    .highlights__grid{ grid-template-columns:repeat(3, 1fr); gap:26px; }
  }
  .h-card{
    display:block;
    border-radius:3px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    transition:transform .2s ease;
  }
  .h-card:hover{ transform:translateY(-2px); }
  .h-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  /* A square image area — the side-project cover photo crops to fill it. */
  .h-card__visual{
    aspect-ratio:1/1;
    border-bottom:1px dashed rgba(218,220,223,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--text-on-ink-dim);
  }
  .h-card__body{
    padding:18px 20px 22px;
  }
  .h-card__title{
    display:block;
    font-family:var(--font-display);
    font-size:1.1rem;
    font-weight:600;
    color:var(--text-on-ink);
    margin-bottom:6px;
  }
  .h-card__intro{
    display:block;
    font-size:.86rem;
    color:var(--text-on-ink-dim);
    max-width:38ch;
  }
  .h-card__arrow{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:14px;
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--accent);
  }
  .h-card:hover .h-card__arrow{ gap:8px; }
  .h-card__arrow span{ transition:transform .2s ease; }

  /* ---------- parallax approach statement (between the work timeline and
     Highlights) ---------- */
  /* Same full-bleed parallax-photo pattern as .moment below (only the
     background image is editable — via Customizer → Decorative images —
     the statement text itself is fixed in front-page.php, same as
     .moment always was). Kept as its own duplicate rule set rather than
     sharing selectors with .moment, so the two sections can be tweaked
     independently later without one edit silently affecting both.
     Medium "dusk" background (Emil: v1.16.0's light "paper" version "blev
     för ljust" — pick a colour between that and the original dark
     version). background/text tokens are --dusk/--dusk-2/--text-on-dusk/
     --text-on-dusk-dim (see :root above) rather than the ink or paper
     tokens used elsewhere — a deliberately separate, in-between tone, not
     a reuse of either end. The diagonal-line pattern div (.approach__grid)
     stays gone (removed in v1.16.0), not just hidden — see front-page.php. */
  .approach{
    min-height:72vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 100%);
    overflow:hidden;
    padding:80px 20px;
  }
  .approach__photo{
    position:absolute;
    inset:-15%;
    border:1px dashed rgba(218,220,223,.35);
    background:rgba(218,220,223,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-on-dusk-dim);
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.02em;
    will-change:transform;
  }
  .approach__text{
    position:relative; z-index:2;
    max-width:18ch;
    margin:0 auto;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.9rem, 5vw, 3.4rem);
    line-height:1.25;
    color:var(--text-on-dusk);
  }
  .approach__text span{ color:var(--accent); font-style:normal; }
  .approach__caption{
    position:relative; z-index:2;
    margin-top:22px;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-on-dusk-dim);
  }

  /* ---------- parallax moment ---------- */
  /* Medium "dusk" background — see the matching comment on .approach
     above; the two sections share the same in-between treatment now.
     .moment__grid (the diagonal-line pattern) stays gone — see
     front-page.php. */
  .moment{
    min-height:72vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 100%);
    overflow:hidden;
    padding:80px 20px;
  }
  .moment__photo{
    position:absolute;
    inset:-15%;
    border:1px dashed rgba(218,220,223,.35);
    background:rgba(218,220,223,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-on-dusk-dim);
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.02em;
    will-change:transform;
  }
  .moment__text{
    position:relative; z-index:2;
    max-width:16ch;
    margin:0 auto;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.9rem, 5vw, 3.4rem);
    line-height:1.25;
    color:var(--text-on-dusk);
  }
  .moment__text span{ color:var(--accent); font-style:normal; }
  .moment__caption{
    position:relative; z-index:2;
    margin-top:22px;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-on-dusk-dim);
  }

  /* ---------- contact / footer ---------- */
  .contact{
    background:var(--paper-2);
    color:var(--text-on-paper);
    padding:clamp(64px, 9vw, 110px) 0 40px;
  }
  .contact__top{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:clamp(32px,6vw,64px);
  }
  @media (max-width:760px){ .contact__top{ grid-template-columns:1fr; } }
  .contact h2{
    font-size:clamp(2rem, 4.5vw, 3rem);
    max-width:12ch;
  }
  /* The image sits to the right of the heading and is stretched to the
     same height as the (two-line) heading text; aspect-ratio then keeps
     it square by deriving the width from that height. */
  .contact__heading-row{
    display:flex;
    align-items:stretch;
    gap:20px;
  }
  .contact__image{
    flex:0 0 auto;
    aspect-ratio:1/1;
    border-radius:6px;
    border:1px dashed rgba(28,29,32,.3);
    background:rgba(28,29,32,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--text-on-paper-dim);
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.02em;
  }
  .contact__links{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .contact__links a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 2px;
    border-top:1px solid rgba(28,29,32,.15);
    text-decoration:none;
    color:var(--text-on-paper);
    font-family:var(--font-mono);
    font-size:.95rem;
  }
  .contact__links a:last-child{ border-bottom:1px solid rgba(28,29,32,.15); }
  .contact__links a span.arrow{
    transition:transform .2s ease;
    color:var(--text-on-paper-dim);
  }
  .contact__links a:hover span.arrow{ transform:translateX(4px); color:var(--accent); }

  .foot-bar{
    margin-top:clamp(56px,8vw,90px);
    padding-top:22px;
    border-top:1px solid rgba(28,29,32,.15);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    font-family:var(--font-mono);
    font-size:.75rem;
    color:var(--text-on-paper-dim);
  }

  /* ---------- editable image slots: placeholder <-> real image ----------
     .about__photo, .t-detail__logo, .t-img-placeholder (+ its --portrait
     modifier) and .t-gallery__tile all have their own bespoke sizing rules
     (defined near their sections above) — each fills its available area
     along one axis and lets the image's own proportions decide the other,
     so nothing is ever stretched or cropped. Only the two purely decorative
     cover-fill slots below still crop to fill a fixed shape. */
  .hero__bg,
  .hero__route-photo,
  .approach__photo,
  .moment__photo,
  .contact__image,
  .h-card__visual{
    overflow:hidden;
  }
  .hero__bg.is-filled,
  .hero__route-photo.is-filled,
  .approach__photo.is-filled,
  .moment__photo.is-filled,
  .contact__image.is-filled,
  .h-card__visual.is-filled{
    border-style:solid;
    border-color:transparent;
    background:none;
  }
  .hero__bg img,
  .hero__route-photo img,
  .approach__photo img,
  .moment__photo img,
  .contact__image img,
  .h-card__visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:inherit;
  }