/* =========================================================
   Taha Mohyuddin — site styles
   One stylesheet for every page.
   ========================================================= */

   :root{
    --bg:            #141210;   /* warm charcoal */
    --bg-raise:      #1C1916;   /* cards / surfaces */
    --bg-sink:       #0F0D0B;   /* footer, wells */
    --line:          #2E2924;
    --line-soft:     #241F1B;
    --bone:          #F3EEE5;   /* primary text */
    --bone-dim:      #CFC6B8;
    --mute:          #9A9083;   /* secondary text */
    --signal:        #eeaa2b;
    --signal-hi:     #eeaa2b;
    --signal-dim:    rgba(79,182,198,.18);
    --ok:            #7FB08A;
  
    --w: 1180px;
    --pad: clamp(20px, 5vw, 56px);
    --sec: clamp(64px, 9vw, 128px);
  
    --r-s: 6px;
    --r-m: 12px;
    --r-l: 20px;
  
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
    --ease: cubic-bezier(.22,.61,.36,1);
  }
  
  *,*::before,*::after{ box-sizing:border-box; }
  
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  
  body{
    margin:0;
    background:var(--bg);
    color:var(--bone);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.65;
    font-weight:350;
    letter-spacing:.005em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  
  /* faint paper grain so the dark never reads as flat black */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.5;
    background:
      radial-gradient(900px 500px at 12% -5%, rgba(201,164,92,.10), transparent 62%),
      radial-gradient(700px 480px at 95% 8%, rgba(120,140,160,.07), transparent 60%);
  }
  
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  button{ font:inherit; color:inherit; }
  
  ::selection{ background:var(--signal); color:#17130C; }
  
  :focus-visible{
    outline:2px solid var(--signal-hi);
    outline-offset:3px;
    border-radius:4px;
  }
  
  .skip{
    position:absolute; left:-9999px; top:0;
    background:var(--signal); color:#17130C;
    padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
  }
  .skip:focus{ left:0; }
  
  /* ---------- layout ---------- */
  .wrap{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; }
  .section{ padding-block:var(--sec); }
  .section + .section{ border-top:1px solid var(--line-soft); }
  .stack-s > * + *{ margin-top:12px; }
  
  /* ---------- type ---------- */
  h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.08; letter-spacing:-.015em; }
  h1{ font-size:clamp(2.6rem, 7.2vw, 5.4rem); }
  h2{ font-size:clamp(2rem, 4.4vw, 3.2rem); }
  h3{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); line-height:1.2; }
  p{ margin:0 0 1em; }
  p:last-child{ margin-bottom:0; }
  .lede{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--bone-dim); max-width:62ch; line-height:1.6; }
  .prose{ color:var(--mute); max-width:68ch; }
  .small{ font-size:.9rem; }
  
  .section-head{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
    gap:14px 24px; margin-bottom:clamp(28px,4vw,52px);
  }
  .section-head p{ color:var(--mute); max-width:46ch; margin:0; }
  
  /* a hairline that carries the signal accent */
  .rule{ height:1px; background:var(--line); border:0; margin:0; }
  
  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 22px;
    border-radius:999px;
    border:1px solid transparent;
    text-decoration:none;
    font-size:.95rem;
    font-weight:500;
    letter-spacing:.01em;
    cursor:pointer;
    transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  }
  .btn-solid{ background:var(--signal); color:#17130C; }
  .btn-solid:hover{ background:var(--signal-hi); }
  .btn-ghost{ border-color:var(--line); color:var(--bone); background:transparent; }
  .btn-ghost:hover{ border-color:var(--signal); color:var(--signal-hi); }
  .btn:active{ transform:translateY(1px); }
  .btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
  
  .link-u{
    text-decoration:none;
    border-bottom:1px solid var(--signal-dim);
    padding-bottom:2px;
    color:var(--bone);
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .link-u:hover{ border-color:var(--signal); color:var(--signal-hi); }
  
  /* ---------- top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:90;
    display:flex; align-items:center; gap:24px;
    padding:14px var(--pad);
    background:rgba(20,18,16,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .topbar.is-stuck{ border-bottom-color:var(--line-soft); background:rgba(20,18,16,.92); }
  .mark{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
  .mark-i{
    width:32px; height:32px; flex:none;
    display:grid; place-items:center;
    border:1px solid var(--signal);
    color:var(--signal-hi);
    border-radius:50%;
    font-family:var(--serif);
    font-size:.82rem;
    letter-spacing:.02em;
  }
  .mark-name{ font-family:var(--serif); font-size:1.02rem; letter-spacing:.01em; }
  .topnav{ display:flex; gap:28px; }
  .topnav a{
    text-decoration:none; color:var(--mute); font-size:.95rem;
    padding:4px 0; position:relative;
    transition:color .2s var(--ease);
  }
  .topnav a:hover{ color:var(--bone); }
  .topnav a.is-here{ color:var(--bone); }
  .topnav a.is-here::after{
    content:""; position:absolute; left:0; right:0; bottom:-3px;
    height:1px; background:var(--signal);
  }
  
  /* ---------- mobile tab bar + sheet ---------- */
  .tabbar{ display:none; }
  .sheet{ display:none; }
  
  /* ---------- hero ---------- */
  .hero{ padding-block:clamp(56px,10vw,120px) clamp(48px,7vw,96px); }
  
  /* two-column homepage hero: copy on the left, portrait on the right */
  .hero .wrap.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,390px);
    align-items:center;
    gap:clamp(42px,6vw,86px);
  }
  .hero-copy{ min-width:0; }
  .hero-photo{
    position:relative;
    width:100%;
    max-width:390px;
    aspect-ratio:4/5;
    justify-self:end;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(238,170,43,.28);
    background:var(--bg-raise);
    box-shadow:0 30px 80px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.015) inset;
  }
  .hero-photo::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, transparent 65%, rgba(15,13,11,.16));
  }
  .hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .45s var(--ease);
  }
  .hero-photo:hover img{ transform:scale(1.018); }
  .hero-status{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.88rem; color:var(--bone-dim);
    border:1px solid var(--line); border-radius:999px;
    padding:7px 15px 7px 12px;
    margin-bottom:clamp(24px,4vw,40px);
  }
  .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 4px rgba(127,176,138,.14); }
  .hero h1{ max-width:16ch; }
  .hero h1 .given{ display:block; color:var(--bone); }
  .hero h1 .family{ display:block; color:var(--signal); font-style:italic; font-weight:300; }
  .hero-role{
    margin-top:clamp(20px,3vw,30px);
    font-size:clamp(1.05rem,2vw,1.45rem);
    color:var(--bone-dim);
    font-weight:350;
    min-height:1.6em;
  }
  .caret{ display:inline-block; width:1px; height:1.05em; background:var(--signal); vertical-align:-.16em; margin-left:3px; animation:blink 1.1s steps(1) infinite; }
  @keyframes blink{ 50%{ opacity:0; } }
  .hero-lede{ margin-top:22px; }
  .hero-cta{ margin-top:clamp(28px,4vw,42px); }
  
  /* load sequence: one orchestrated moment, nothing else animates in */
  .seq{ opacity:0; transform:translateY(14px); animation:seqIn .85s var(--ease) forwards; }
  .seq-1{ animation-delay:.05s } .seq-2{ animation-delay:.16s } .seq-3{ animation-delay:.27s }
  .seq-4{ animation-delay:.38s } .seq-5{ animation-delay:.49s }
  @keyframes seqIn{ to{ opacity:1; transform:none; } }
  
  /* ---------- ledger (the "currently" record) ---------- */
  .ledger{ border-top:1px solid var(--line); }
  .ledger-row{
    display:grid; grid-template-columns:150px 1fr auto;
    gap:6px 28px; align-items:baseline;
    padding:20px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .ledger-key{ color:var(--signal); font-size:.86rem; letter-spacing:.04em; }
  .ledger-val{ color:var(--bone); }
  .ledger-val span{ display:block; color:var(--mute); font-size:.92rem; margin-top:3px; }
  .ledger-when{ color:var(--mute); font-size:.86rem; font-variant-numeric:tabular-nums; }
  
  /* ---------- work list (editorial, not card soup) ---------- */
  .work-list{ border-top:1px solid var(--line); }
  .work-row{
    display:grid;
    grid-template-columns:1fr minmax(0,300px);
    gap:24px 40px;
    align-items:center;
    padding:clamp(22px,3vw,34px) 0;
    border-bottom:1px solid var(--line-soft);
    text-decoration:none;
    transition:background .3s var(--ease);
  }
  .work-row:hover{ background:linear-gradient(90deg, rgba(201,164,92,.05), transparent 60%); }
  .work-row h3{ margin-bottom:8px; transition:color .25s var(--ease); }
  .work-row:hover h3{ color:var(--signal-hi); }
  .work-row p{ color:var(--mute); max-width:56ch; font-size:.97rem; }
  .work-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .tag{
    font-size:.78rem; color:var(--bone-dim);
    border:1px solid var(--line); border-radius:999px;
    padding:4px 11px; white-space:nowrap;
  }
  .tag-live{ border-color:rgba(127,176,138,.45); color:var(--ok); }
  .shot{
    aspect-ratio:16/10; border-radius:var(--r-m); overflow:hidden;
    border:1px solid var(--line); background:var(--bg-raise);
  }
  .shot img{ width:100%; height:100%; object-fit:cover; }
  
  /* ---------- cards ---------- */
  .card{
    background:var(--bg-raise);
    border:1px solid var(--line-soft);
    border-radius:var(--r-l);
    padding:clamp(20px,3vw,30px);
  }
  .grid{ display:grid; gap:clamp(14px,2vw,22px); }
  .g-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
  .g-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .g-4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  
  /* ---------- capability groups ---------- */
  .cap h3{ font-size:1.12rem; color:var(--signal-hi); margin-bottom:14px; }
  .cap ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
  .cap li{
    font-size:.86rem; color:var(--bone-dim);
    border:1px solid var(--line); border-radius:var(--r-s);
    padding:5px 11px;
  }
  
  /* ---------- logo strip ---------- */
  .logos{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:clamp(20px,4vw,52px);
  }
  .logos figure{ margin:0; }
  .logos img, .logo-ph{
    height:44px; width:auto; max-width:132px; object-fit:contain;
    filter:grayscale(1) brightness(1.5) contrast(.85);
    opacity:.68;
    transition:opacity .25s var(--ease), filter .25s var(--ease);
  }
  .logos a:hover img, .logos figure:hover img{ opacity:1; filter:none; }
  
  /* fallback chip shown when an image file is missing */
  .ph-chip{
    display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 16px;
    border:1px dashed var(--line); border-radius:var(--r-s);
    color:var(--mute); font-size:.85rem; letter-spacing:.02em;
  }
  .ph-fill{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    padding:16px; text-align:center;
    color:var(--mute); font-size:.85rem;
    background:
      linear-gradient(140deg, rgba(201,164,92,.10), transparent 55%),
      var(--bg-raise);
  }
  
  /* ---------- pull quote ---------- */
  .quote{ border-left:2px solid var(--signal); padding-left:clamp(18px,3vw,30px); max-width:62ch; }
  .quote p{ font-family:var(--serif); font-size:clamp(1.25rem,2.6vw,1.85rem); line-height:1.35; color:var(--bone); }
  .quote footer{ color:var(--mute); font-size:.92rem; margin-top:14px; }
  
  /* ---------- CTA band ---------- */
  .band{ background:var(--bg-sink); border-top:1px solid var(--line-soft); }
  .band .wrap{ padding-block:clamp(56px,8vw,104px); }
  .band h2{ max-width:16ch; }
  
  /* ---------- footer ---------- */
  .foot{ background:var(--bg-sink); border-top:1px solid var(--line-soft); }
  .foot .wrap{ padding-block:44px 34px; }
  .foot-top{ display:flex; flex-wrap:wrap; gap:26px 48px; justify-content:space-between; }
  .foot-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; }
  .foot a{ color:var(--mute); text-decoration:none; font-size:.93rem; }
  .foot a:hover{ color:var(--signal-hi); }
  .foot-bottom{
    margin-top:34px; padding-top:18px; border-top:1px solid var(--line-soft);
    display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
    color:var(--mute); font-size:.85rem;
  }
  
  /* ---------- page head (inner pages) ---------- */
  .page-head{ padding-block:clamp(44px,7vw,92px) clamp(30px,4vw,54px); }
  .page-head h1{ font-size:clamp(2.3rem,5.6vw,4.2rem); }
  .page-head .lede{ margin-top:20px; }
  
  /* ---------- tabs (about) ---------- */
  .tabs{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); margin-bottom:clamp(28px,4vw,44px); }
  .tab{
    background:none; border:0; cursor:pointer;
    padding:12px 16px; color:var(--mute); font-size:.97rem;
    border-bottom:1px solid transparent; margin-bottom:-1px;
    transition:color .2s var(--ease), border-color .2s var(--ease);
  }
  .tab:hover{ color:var(--bone); }
  .tab[aria-selected="true"]{ color:var(--signal-hi); border-bottom-color:var(--signal); }
  .panel[hidden]{ display:none; }
  
  /* timeline — content really is a sequence, so it gets marks */
  .timeline{ list-style:none; margin:0; padding:0 0 0 26px; border-left:1px solid var(--line); }
  .timeline li{ position:relative; padding:0 0 28px 0; }
  .timeline li:last-child{ padding-bottom:0; }
  .timeline li::before{
    content:""; position:absolute; left:-31px; top:9px;
    width:9px; height:9px; border-radius:50%;
    background:var(--bg); border:1px solid var(--signal);
  }
  .timeline h4{ font-size:1.08rem; color:var(--bone); }
  .timeline p{ color:var(--mute); font-size:.95rem; margin:4px 0 0; }
  .timeline .yr{ color:var(--signal); font-size:.85rem; font-variant-numeric:tabular-nums; }
  
  /* experience rows with duration bars */
  .xp{ border-top:1px solid var(--line); }
  .xp-item{ padding:18px 0; border-bottom:1px solid var(--line-soft); }
  .xp-head{ display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; align-items:baseline; }
  .xp-head strong{ font-weight:500; }
  .xp-head span{ color:var(--mute); font-size:.88rem; font-variant-numeric:tabular-nums; }
  .xp-track{ height:4px; border-radius:99px; background:var(--line-soft); margin-top:12px; overflow:hidden; }
  .xp-fill{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--signal),var(--signal-hi)); transition:width 1.1s var(--ease); }
  
  /* stats */
  .stat{ border:1px solid var(--line-soft); border-radius:var(--r-m); padding:18px; background:var(--bg-raise); }
  .stat b{ display:block; font-family:var(--serif); font-size:1.9rem; font-weight:400; color:var(--signal-hi); line-height:1; }
  .stat span{ display:block; color:var(--mute); font-size:.86rem; margin-top:8px; }
  
  /* gallery */
  .gal{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .gal figure{ margin:0; aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line-soft); background:var(--bg-raise); }
  .gal img{ width:100%; height:100%; object-fit:cover; }
  
  /* ---------- experience carousel (services page) ---------- */
  .rail-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
  .rail-nav{ display:flex; gap:8px; }
  .rail-btn{
    width:40px; height:40px; border-radius:50%;
    border:1px solid var(--line); background:transparent; color:var(--bone);
    cursor:pointer; display:grid; place-items:center;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .rail-btn:hover{ border-color:var(--signal); color:var(--signal-hi); }
  .rail{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,340px);
    gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px; scrollbar-width:thin;
  }
  .rail > *{ scroll-snap-align:start; }
  .rail::-webkit-scrollbar{ height:6px; }
  .rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
  .co{ padding:0; background:transparent; border:0; perspective:1400px; cursor:pointer; }
  .co-inner{
    position:relative; width:100%; height:100%; min-height:280px;
    transition:transform .7s var(--ease);
    transform-style:preserve-3d;
  }
  .co.flipped .co-inner{ transform:rotateY(180deg); }
  .co-face{
    position:absolute; inset:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:var(--r-l);
    border:1px solid var(--line-soft);
    background:var(--bg-raise);
    padding:clamp(20px,3vw,30px);
    display:flex; flex-direction:column; gap:14px;
  }
  .co-front{ justify-content:space-between; }
  .co-back{
    transform:rotateY(180deg);
    justify-content:center;
    background:linear-gradient(155deg, rgba(201,164,92,.09), transparent 60%), var(--bg-raise);
    border-color:var(--signal-dim);
  }
  .co-logo{ height:38px; width:auto; max-width:120px; object-fit:contain; }
  .co h3{ font-size:1.18rem; }
  .co .when{ color:var(--signal); font-size:.86rem; font-variant-numeric:tabular-nums; }
  .co p{ color:var(--mute); font-size:.95rem; margin:0; }
  .co-hint{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.78rem; color:var(--mute); margin-top:auto;
  }
  .co-hint svg{ width:13px; height:13px; opacity:.7; }
  .co-back .co-eyebrow{ color:var(--signal); font-size:.82rem; margin-bottom:2px; }
  .co-back p{ color:var(--bone-dim); font-size:.96rem; line-height:1.55; }
  
  /* ---------- notes / blog ---------- */
  .note{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
  .note .shot{ border:0; border-radius:0; aspect-ratio:16/10; }
  .note-body{ padding:22px; }
  .note-body h3{ font-size:1.2rem; margin-bottom:10px; }
  .note-body p{ color:var(--mute); font-size:.95rem; margin:0; }
  
  /* ---------- testimonials ---------- */
  .said{ display:flex; flex-direction:column; gap:18px; }
  .said blockquote{ margin:0; font-family:var(--serif); font-size:1.12rem; line-height:1.45; color:var(--bone-dim); }
  .said .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
  .said .who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
  .said .who b{ font-weight:500; font-size:.95rem; display:block; }
  .said .who span{ color:var(--mute); font-size:.84rem; }
  
  /* ---------- forms ---------- */
  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:.88rem; color:var(--bone-dim); margin-bottom:7px; }
  .field input, .field select, .field textarea{
    width:100%; padding:13px 15px;
    background:var(--bg); color:var(--bone);
    border:1px solid var(--line); border-radius:var(--r-m);
    font:inherit; font-size:.97rem;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .field textarea{ resize:vertical; min-height:130px; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--signal);
    box-shadow:0 0 0 3px var(--signal-dim);
  }
  .field input::placeholder, .field textarea::placeholder{ color:#6E665C; }
  .form-note{ color:var(--mute); font-size:.86rem; margin-top:14px; }
  .toast{
    position:fixed; left:50%; bottom:88px; transform:translate(-50%,16px);
    background:var(--signal); color:#17130C; font-weight:500;
    padding:13px 22px; border-radius:999px; z-index:150;
    opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .toast.show{ opacity:1; transform:translate(-50%,0); }
  
  /* contact detail list */
  .chan{ display:flex; flex-direction:column; gap:2px; }
  .chan a{
    display:flex; align-items:baseline; justify-content:space-between; gap:18px;
    padding:16px 0; border-bottom:1px solid var(--line-soft);
    text-decoration:none; color:var(--bone);
    transition:color .2s var(--ease);
  }
  .chan a:hover{ color:var(--signal-hi); }
  .chan a span{ color:var(--mute); font-size:.9rem; }
  
  /* ---------- project detail pages ---------- */
  .detail-hero{ padding-block:clamp(44px,7vw,88px) clamp(24px,4vw,44px); }
  .back{ display:inline-flex; align-items:center; gap:8px; color:var(--mute); text-decoration:none; font-size:.92rem; margin-bottom:26px; }
  .back:hover{ color:var(--signal-hi); }
  .feat h3{ font-size:1.08rem; margin-bottom:8px; color:var(--signal-hi); }
  .feat p{ color:var(--mute); font-size:.95rem; margin:0; }
  
  /* ---------- scroll reveal (opacity only, very subtle) ---------- */
  .rv{ opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease); transform:translateY(10px); }
  .rv.in{ opacity:1; transform:none; }
  
  /* =========================================================
     Mobile
     ========================================================= */
  @media (max-width:860px){
    .topnav, .topcta{ display:none; }
  
    .hero .wrap.hero-grid{
      grid-template-columns:1fr;
      gap:42px;
    }
    .hero-photo{
      justify-self:center;
      width:min(360px, 88vw);
    }
    .topbar{ padding:12px var(--pad); }
  
    body{ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
  
    .tabbar{
      position:fixed; left:0; right:0; bottom:0; z-index:100;
      display:flex; align-items:stretch;
      height:calc(66px + env(safe-area-inset-bottom,0px));
      padding-bottom:env(safe-area-inset-bottom,0px);
      background:rgba(15,13,11,.92);
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
      border-top:1px solid var(--line-soft);
    }
    .tabbar a, .tabbar button{
      flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
      background:none; border:0; cursor:pointer;
      color:var(--mute); font-size:.76rem; text-decoration:none;
      padding-top:6px;
    }
    .tabbar .pip{ width:5px; height:5px; border-radius:50%; background:transparent; }
    .tabbar a.is-here{ color:var(--bone); }
    .tabbar a.is-here .pip{ background:var(--signal); }
  
    .sheet{
      position:fixed; inset:0; z-index:120;
      display:flex; flex-direction:column; justify-content:flex-end;
      background:rgba(10,9,8,.6);
      opacity:0; pointer-events:none;
      transition:opacity .3s var(--ease);
    }
    .sheet.open{ opacity:1; pointer-events:auto; }
    .sheet-panel{
      background:var(--bg-raise);
      border-top:1px solid var(--line);
      border-radius:22px 22px 0 0;
      padding:10px var(--pad) calc(28px + env(safe-area-inset-bottom,0px));
      transform:translateY(12%);
      transition:transform .32s var(--ease);
    }
    .sheet.open .sheet-panel{ transform:none; }
    .sheet-grab{ width:42px; height:4px; border-radius:99px; background:var(--line); margin:10px auto 16px; }
    .sheet-panel a{
      display:flex; justify-content:space-between; align-items:center;
      padding:15px 2px; border-bottom:1px solid var(--line-soft);
      text-decoration:none; font-size:1.02rem;
    }
    .sheet-panel a:last-of-type{ border-bottom:0; }
    .sheet-panel a small{ color:var(--mute); font-size:.84rem; }
  
    .work-row{ grid-template-columns:1fr; gap:18px; }
    .work-row .shot{ order:-1; }
    .ledger-row{ grid-template-columns:1fr; gap:4px; padding:16px 0; }
    .ledger-when{ order:3; }
    .toast{ bottom:96px; }
    .foot .wrap{ padding-bottom:34px; }
  }
  
  @media (max-width:520px){
    body{ font-size:16px; }
    .hero-photo{ width:min(320px, 88vw); border-radius:22px; }
    .hero h1{ font-size:clamp(2.4rem,12vw,3.4rem); }
    .btn{ padding:12px 18px; }
    .btn-row .btn{ flex:1 1 auto; justify-content:center; }
  }
  
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    .seq,.rv{ opacity:1 !important; transform:none !important; }
  }
  
  @media print{
    .topbar,.tabbar,.sheet,.band{ display:none !important; }
    body{ background:#fff; color:#000; }
  }
  
  /* ---------- résumé message thread ---------- */
  .thread{
    max-width:460px;
    background:var(--bg-raise);
    border:1px solid var(--line-soft);
    border-radius:var(--r-l);
    overflow:hidden;
  }
  .thread-head{
    display:flex; align-items:center; gap:10px;
    padding:14px 20px; border-bottom:1px solid var(--line-soft);
    font-size:.92rem; color:var(--bone-dim);
  }
  .thread-dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); }
  .thread-body{ padding:20px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
  .bubble{
    margin:0; max-width:86%;
    padding:12px 16px;
    border-radius:16px 16px 16px 5px;
    background:#262119; color:var(--bone-dim);
    font-size:.96rem; line-height:1.5;
  }
  .bubble.file{
    display:flex; flex-direction:column; gap:3px;
    background:var(--signal); color:#17130C;
    text-decoration:none; font-weight:500;
    border-radius:16px 16px 16px 5px;
    transition:background .25s var(--ease);
  }
  .bubble.file small{ font-weight:400; opacity:.75; font-size:.82rem; }
  .bubble.file:hover{ background:var(--signal-hi); }