@font-face{font-family:Newsreader;src:url("assets/fonts/newsreader-variable.ttf") format("truetype");font-style:normal;font-weight:200 800;font-display:swap} @font-face{font-family:Dana;src:url("assets/fonts/dana-regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:Dana;src:url("assets/fonts/dana-demibold.woff") format("woff");font-style:normal;font-weight:600;font-display:swap} @font-face{font-family:Dana;src:url("assets/fonts/dana-bold.woff") format("woff");font-style:normal;font-weight:700;font-display:swap} :root{ --blue:#5d63a7;--green:#4d714d;--cream:#dfc3a4;--dark:#282c35;--light:#f0e6ef; --ink:#293451;--ink-dark:#222c46;--ink-light:#36456d; --pad:clamp(1rem,2vw,2rem);--cv-pad:clamp(1.75rem,6vw,5.5rem);--nav:3.75rem;--gap:clamp(.75rem,1.3vw,1.4rem);--footer-h:10rem; --serif:"Newsreader",Georgia,serif;--persian:"Dana",Tahoma,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--dark)} body{margin:0;background:var(--light);color:var(--dark);font-family:var(--serif);font-size:clamp(1rem,.9rem + .25vw,1.25rem);line-height:1.36;text-rendering:optimizeLegibility} /* /fa/ pages set for correct document semantics, but the grid layouts here were authored left-to-right; direction:rtl on a grid container renumbers its column lines, which would mirror every grid-column placement. Reset to ltr at the body level so the existing layout is unaffected — individual Persian text nodes keep their own dir="rtl"/lang="fa" for correct shaping and punctuation. */ html[dir="rtl"] body{direction:ltr} a{color:inherit;text-decoration:none}img{display:block;width:100%}p,h1,h2,h3,figure,blockquote,dl,dd{margin:0}ol,ul{margin:0;padding:0}.dana,[lang=fa]{font-family:var(--persian)} .field-blue{color:var(--light);background:var(--blue)}.field-green{color:var(--light);background:var(--green)}.field-light{color:var(--dark);background:var(--light)}.field-dark{color:var(--cream);background:var(--dark)}.field-cream{color:var(--dark);background:var(--cream)} .scene{position:relative;min-height:100svh;overflow:clip;padding:calc(var(--nav) + var(--pad)) var(--pad) var(--pad)} .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase} .eyebrow[lang="fa"],.work-state[lang="fa"],dt[lang="fa"],.global-footer>p[lang="fa"],.site-nav a[lang="fa"],.global-footer nav a[lang="fa"]{text-align:left} .eyebrow[lang="fa"]{font-size:calc(.72rem + 2pt)} .site-nav a[lang="fa"]{font-size:calc(.76rem + 2pt)} .work-state[lang="fa"],.current-work span[lang="fa"]{font-size:calc(.7rem + 2pt)} .project-meta dt[lang="fa"]{font-size:calc(.72rem + 2pt)} .detail-dl dt[lang="fa"]{font-size:calc(.66rem + 2pt)} .home-enter span[lang="fa"]{font-size:calc(.72rem + 2pt)} .skip-link{position:fixed;z-index:200;top:.5rem;left:.5rem;padding:.55rem .75rem;background:var(--light);color:var(--dark);transform:translateY(-160%)}.skip-link:focus{transform:none} .site-nav{position:fixed;z-index:100;top:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:var(--nav);padding:0 var(--pad);color:var(--light);border-bottom:1px solid currentColor;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:color 180ms ease} .site-nav[data-tone=light]{color:var(--dark)}.site-nav .nav-primary{display:flex;gap:clamp(1rem,3vw,3rem)}.site-nav a{padding:.35rem .48rem}.site-nav a:hover,.site-nav a:focus-visible{background:var(--light);color:var(--dark);outline:0}.site-nav[data-tone=light] a:hover,.site-nav[data-tone=light] a:focus-visible{background:var(--dark);color:var(--light)} .site-nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}.wordmark{justify-self:start}.lang-toggle{justify-self:end;padding:.35rem .48rem;background:none;border:0;color:inherit;font:inherit;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.lang-toggle:hover,.lang-toggle:focus-visible{background:var(--light);color:var(--dark);outline:0}.site-nav[data-tone=light] .lang-toggle:hover,.site-nav[data-tone=light] .lang-toggle:focus-visible{background:var(--dark);color:var(--light)} .global-footer{display:flex;justify-content:space-between;align-items:flex-end;min-height:var(--footer-h);padding:2rem var(--pad);border-top:1px solid rgba(223,195,164,.5);font-size:.73rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.global-footer nav{display:flex;gap:2rem}.global-footer a[aria-current=page]{text-decoration:underline;text-underline-offset:.35em} /* ==== Home hero: HODJAT -> THE QUESTION -> CURRENT WORK ==== .home-hero-scroll is a scroll runway; .home-opening pins inside it via position:sticky and is driven by --hero-progress (0-1), written per frame by script.js onto each consuming element (see the comment on updateHero() there for why not a single ancestor write). Everything that hides/transforms during the sequence is gated behind html.hero-motion, a class script.js adds only after it confirms the required elements exist and the visitor doesn't prefer reduced motion — so a page with no JS, or a script.js that fails to load, or reduced motion, all fall back to this same plain, fully visible, non-pinned layout by default. */ .home-hero-scroll{position:relative;height:100svh} .hero-motion .home-hero-scroll{height:220vh} .home-opening{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:var(--gap);isolation:isolate} .hero-motion .home-opening{position:sticky;top:0;height:100svh} .home-role{z-index:4;grid-column:1/6;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .hero-motion .home-role{opacity:calc(1 - clamp(0,calc((var(--hero-progress,0) - .20) / .22),1))} .home-name{z-index:3;grid-column:1/13;grid-row:2;align-self:center;margin-left:-.06em;font-size:clamp(7rem,17vw,19rem);font-weight:470;letter-spacing:-.075em;line-height:.65;white-space:nowrap;pointer-events:none;transform-origin:left center} .home-name span{display:block}.home-name span:last-child{margin-left:23vw}.home-name span[dir="rtl"]{text-align:left;margin-left:0;font-size:.55em} .hero-motion .home-name{transform:scale(calc(1 - .26 * clamp(0,calc((var(--hero-progress,0) - .20) / .35),1)))} /* Persian secondary signature — quiet in the first viewport (per the new narrative it arrives with the rest of the identity, not at first glance), then settles in alongside the shrinking Latin wordmark. Always present in the raw HTML/DOM in both EN and FA modes; only its opacity/transform change with scroll. */ .home-name-fa{display:flex;width:fit-content;gap:.5em;pointer-events:none;font-weight:700;line-height:1;grid-column:1/7;grid-row:2;align-self:end;font-size:clamp(1.9rem,4.4vw,4.6rem)} .hero-motion .home-name-fa{opacity:clamp(0,calc((var(--hero-progress,0) - .25) / .3),1);transform:translateY(calc((1 - clamp(0,calc((var(--hero-progress,0) - .25) / .3),1)) * 12px))} /* ==== Persian homepage: حجت سلیمی is the dominant identity ==== On /fa/ (the only place appears) حجت سلیمی takes over the large, primary composition and Hodjat Salimi becomes the quiet Latin secondary signature — the exact mirror of the English hierarchy, not a translated label stapled under the same English-sized name. This also swaps which element gets which scroll treatment: on /fa/ the big Persian name is the one visible from the first frame (scale-only, like the English .home-name), and the small Latin name is the one that fades in partway through (like the English .home-name-fa). Composed for Persian directly — a stacked, right-anchored two-line cascade with normal tracking and softer weight, not the Latin's tight, hard-edged -.075em/470 treatment, since letter-spacing that tight fights the connected letterforms of Persian script. Scoped entirely under [dir="rtl"] so the English page's locked composition never changes. */ html[dir="rtl"] .home-name-fa{ z-index:3; grid-column:1/13; width:auto; flex-direction:column; align-items:flex-end; gap:0; font-size:clamp(6rem,15vw,16.5rem); font-weight:600; line-height:.98; transform-origin:right center; } html[dir="rtl"] .home-name-fa span{display:block} html[dir="rtl"] .home-name-fa span:last-child{margin-right:12vw} html[dir="rtl"].hero-motion .home-name-fa{ opacity:1; transform:scale(calc(1 - .26 * clamp(0,calc((var(--hero-progress,0) - .20) / .35),1))); } html[dir="rtl"] .home-name{ z-index:4; grid-column:1/7; grid-row:2; align-self:end; display:flex; width:fit-content; gap:.4em; margin-left:0; font-size:clamp(1.6rem,3.6vw,3.8rem); font-weight:700; letter-spacing:-.01em; line-height:1; white-space:nowrap; } html[dir="rtl"] .home-name span{display:inline-block} html[dir="rtl"] .home-name span:last-child{margin-left:0} html[dir="rtl"].hero-motion .home-name{ opacity:clamp(0,calc((var(--hero-progress,0) - .25) / .3),1); transform:translateY(calc((1 - clamp(0,calc((var(--hero-progress,0) - .25) / .3),1)) * 12px)); } .home-portrait{z-index:2;grid-column:7/13;grid-row:1/4;align-self:stretch;margin:calc((var(--nav) + var(--pad))*-1) calc(var(--pad)*-1) calc(var(--pad)*-1) 0;overflow:hidden} .home-portrait img{height:100%;object-fit:cover;object-position:54% center;transform-origin:54% center} .hero-motion .home-portrait img{transform:scale(calc(1 + .07 * clamp(0,calc((var(--hero-progress,0) - .20) / .35),1)));will-change:transform} .home-hero-statement{z-index:4;grid-column:1/9;grid-row:3;align-self:end;display:flex;flex-wrap:wrap;align-items:end;gap:1.4rem 2.5rem} .hero-motion .home-hero-statement{visibility:hidden;clip-path:inset(0 0 calc((1 - clamp(0,calc((var(--hero-progress,0) - .45) / .35),1)) * 100%) 0);transform:translateY(calc((1 - clamp(0,calc((var(--hero-progress,0) - .45) / .35),1)) * 22px))} /* Keyboard focus must never land on the CTA while it's clipped away — the masked reveal is continuous (driven by --hero-progress via calc()), but visibility can only be a hard switch, so script.js flips this class at the same threshold (0.45) the mask starts opening. */ .hero-motion .home-hero-statement.is-interactive{visibility:visible} .home-position{max-width:29rem;font-size:clamp(1.05rem,1.35vw,1.5rem);line-height:1.18} .home-enter{display:block;padding-top:.7rem;border-top:1px solid currentColor;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} /* RTL: the statement reads right-to-left (paragraph first, CTA trailing to its left) instead of the LTR visual order used for the English composition — a flex-direction flip only, so DOM/tab order (and therefore reading order for assistive tech) is untouched. */ html[dir="rtl"] .home-hero-statement{flex-direction:row-reverse;justify-content:flex-end} html[dir="rtl"] .home-position{text-align:right} .home-enter:hover,.home-enter:focus-visible,.current-work:hover .work-moment-link,.current-work:focus-visible .work-moment-link,.home-exits a:hover,.home-exits a:focus-visible,.about-links a:hover,.about-links a:focus-visible{text-decoration:underline;text-underline-offset:.25em} .scroll-cue{display:none} .hero-motion .scroll-cue{position:absolute;left:50%;bottom:1.75rem;z-index:4;display:flex;transform:translateX(-50%);flex-direction:column;align-items:center;gap:.5rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;opacity:calc(1 - clamp(0,calc((var(--hero-progress,0) - .06) / .10),1))} .hero-motion .scroll-cue::after{content:"";width:1px;height:1.8rem;background:currentColor;opacity:.6;animation:scroll-cue-move 1.8s ease-in-out infinite} /* Tracked small-caps reads fine in Latin but fights Persian's connected letterforms — drop the tracking/uppercase and compensate with a touch more size and weight so the cue still reads as a quiet UI label. */ html[dir="rtl"].hero-motion .scroll-cue{font-size:.72rem;font-weight:700;letter-spacing:0;text-transform:none} @keyframes scroll-cue-move{0%,100%{transform:scaleY(.4);opacity:.25}50%{transform:scaleY(1);opacity:.7}} /* Current work: a short intro, then one project at a time — image first, title and metadata following it in, not competing with it. */ .home-current{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-content:start;padding-top:calc(var(--nav) + 6rem);padding-bottom:6rem} .current-heading{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)} .current-heading .eyebrow{grid-column:1/3} .current-heading h2{grid-column:4/11;font-size:clamp(3rem,5.4vw,5.6rem);font-weight:410;letter-spacing:-.05em;line-height:.92} .current-heading h2 span{display:block} .current-heading p{grid-column:4/9;margin-top:1.1rem;max-width:32rem;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.42;opacity:.76} .js .current-heading{opacity:0;transform:translateY(18px);transition:opacity 700ms ease,transform 700ms cubic-bezier(.16,.68,.18,1)} .js .current-heading.is-revealed{opacity:1;transform:none} .current-work{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:11rem} .current-work:first-of-type{margin-top:6rem} .work-moment-image{grid-column:1/13;overflow:hidden} .work-moment-image img{height:min(76vh,50rem);object-fit:cover} .work-moment-info{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:baseline;margin-top:1.5rem;border-top:1px solid currentColor;padding-top:1.1rem} .work-moment-title{grid-column:1/7;font-size:clamp(2rem,3.6vw,3.6rem);font-weight:420;letter-spacing:-.04em;line-height:.94} .work-moment-title b{display:inline-block;margin-inline-start:.3em;font-size:.6em;font-weight:600;letter-spacing:0} .work-moment-meta{grid-column:8/13;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .work-moment-desc{grid-column:8/13;margin-top:.7rem;font-size:.95rem;line-height:1.4} .work-moment-link{grid-column:8/13;display:block;margin-top:1.3rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .current-work--sound .work-moment-image img{object-position:43% center} .current-work--archive{padding:3rem var(--pad) 3.5rem;margin-inline:calc(var(--pad)*-1);color:var(--cream);background:var(--dark)} .current-work--archive .work-moment-image{display:flex;justify-content:center} .current-work--archive .work-moment-image img{width:auto;max-width:min(70vw,26rem);height:auto;max-height:60vh;object-fit:contain} .current-work--archive .work-moment-info{border-color:rgba(223,195,164,.4)} .byegones-motion-wrap{display:contents} .home-exits{grid-column:1/13;display:flex;justify-content:space-between;margin-top:7rem;padding-top:1rem;border-top:1px solid currentColor;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} /* One-shot reveal per project: image unmasks first, title follows, then metadata/description/link — one class toggle staggered by transition-delay. */ .js .current-work .work-moment-image{clip-path:inset(0 0 100% 0);transition:clip-path 900ms cubic-bezier(.16,.68,.18,1)} .js .current-work .work-moment-image img{transform:translateY(26px);transition:transform 900ms cubic-bezier(.16,.68,.18,1)} .js .current-work .work-moment-title{clip-path:inset(0 0 100% 0);transform:translateY(16px);transition:clip-path 700ms cubic-bezier(.16,.68,.18,1) 260ms,transform 700ms cubic-bezier(.16,.68,.18,1) 260ms} .js .current-work .work-moment-meta,.js .current-work .work-moment-desc,.js .current-work .work-moment-link{opacity:0;transform:translateY(10px);transition:opacity 550ms ease 460ms,transform 550ms cubic-bezier(.16,.68,.18,1) 460ms} .js .current-work.is-revealed .work-moment-image{clip-path:inset(0 0 0 0)} .js .current-work.is-revealed .work-moment-image img{transform:translateY(0)} .js .current-work.is-revealed .work-moment-title{clip-path:inset(0 0 0 0);transform:translateY(0)} .js .current-work.is-revealed .work-moment-meta,.js .current-work.is-revealed .work-moment-desc,.js .current-work.is-revealed .work-moment-link{opacity:1;transform:translateY(0)} /* Work index */ .index-intro{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:var(--gap)}.index-intro>.eyebrow{grid-column:1/3}.index-title{grid-column:3/12;align-self:center;font-size:clamp(4.5rem,9vw,10.5rem);font-weight:410;letter-spacing:-.06em;line-height:.8}.index-note{grid-column:9/13;align-self:end;max-width:28rem} .work-index{padding:0 var(--pad)}.index-entry{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:baseline;border-top:1px solid currentColor;padding:1rem 0}.index-number{grid-column:1/2;font-family:var(--mono);font-size:.68rem}.index-entry h2{grid-column:2/7;font-size:clamp(2.8rem,5vw,6rem);font-weight:430;letter-spacing:-.05em;line-height:.87}.index-entry h2 b{font-size:.67em;font-weight:600;letter-spacing:0}.index-entry>p{grid-column:8/11}.index-entry time{grid-column:11/13;justify-self:end;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .index-entry--canyous{min-height:65rem;align-content:start}.index-entry--canyous figure{grid-column:5/11;margin-top:4rem;overflow:hidden}.index-entry--canyous figure img{height:40rem;object-fit:cover;object-position:43% center} .index-entry--byegones{min-height:14rem;align-items:center;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);color:var(--cream);background:var(--dark)} .period-threshold{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-content:start;min-height:0;margin-inline:calc(var(--pad)*-1);padding:2rem var(--pad) 3rem;color:var(--light);background:var(--green)}.period-threshold-head{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}.period-threshold-head>.eyebrow{grid-column:1/3;align-self:start}.period-threshold-head h2{grid-column:3/9;font-size:clamp(3.3rem,6vw,7rem);font-weight:420;letter-spacing:-.05em;line-height:.85}.period-threshold-head time{grid-column:9/11;font-size:clamp(1.5rem,2.7vw,3rem)}.earlier-work-list{grid-column:3/11;margin-top:3rem;border-top:1px solid currentColor;list-style:none}.earlier-work-list li{display:grid;grid-template-columns:repeat(8,1fr);align-items:baseline;gap:var(--gap);padding:.9rem 0;border-bottom:1px solid rgba(240,230,239,.35)}.earlier-work-list h3{grid-column:1/5;font-size:1.15rem;font-weight:600;letter-spacing:-.01em}.earlier-work-list p{grid-column:5/8;font-size:.85rem;opacity:.85}.earlier-work-list time{grid-column:8/9;justify-self:end;font-family:var(--mono);font-size:.72rem} /* Shared project structure */ .project-type{grid-column:1/5;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.project-meta{z-index:4;grid-column:8/13;grid-row:3;align-self:end;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-top:.7rem;border-top:1px solid currentColor;font-size:.72rem}.project-meta dt{font-weight:700;letter-spacing:.08em;text-transform:uppercase}.project-meta dd{margin-top:.3rem} .project-next{display:flex;justify-content:space-between;padding:2rem var(--pad);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase} /* Can You S */ .trace figcaption,.about-interruption figcaption{margin-top:.55rem;font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .photo-credit{display:block;margin-top:.4rem;font-size:.62rem;font-weight:400;letter-spacing:.01em;text-transform:none;opacity:.68} .footer-social{display:flex;align-items:center;gap:1.3rem}.footer-social a{display:inline-flex;align-items:center;gap:.4rem;color:inherit;padding:.5rem;margin:-.5rem;border-radius:.4rem}.footer-social svg{display:block}.footer-social a:hover{opacity:.7} /* About */ .about-opening{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:var(--gap);isolation:isolate}.about-opening>.eyebrow{z-index:3;grid-column:1/3}.about-title{z-index:3;grid-column:1/9;grid-row:2;align-self:center;font-size:clamp(4.5rem,8.5vw,9.8rem);font-weight:410;letter-spacing:-.06em;line-height:.82}.about-portrait{z-index:2;grid-column:8/13;grid-row:1/3;align-self:stretch;margin:calc((var(--nav) + var(--pad))*-1) calc(var(--pad)*-1) calc(var(--pad)*-1) 0;overflow:hidden}.about-portrait img{height:100%;object-fit:cover;object-position:57% center} .about-reading{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-content:start;min-height:180svh;padding-top:calc(var(--nav) + 7rem)}.about-lead{grid-column:2/11;font-size:clamp(3rem,5.5vw,6.4rem);font-weight:410;letter-spacing:-.045em;line-height:.94}.about-body{grid-column:8/13;margin-top:7rem}.about-body p+p{margin-top:1.2em}.about-interruption{grid-column:1/8;margin-top:10rem}.about-interruption img{height:min(78vh,55rem);object-fit:cover;object-position:center}.about-links{grid-column:8/13;align-self:end;display:flex;justify-content:space-between;margin-top:12rem;padding-top:1rem;border-top:1px solid currentColor;font-size:.73rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} /* Archive */ .archive-opening{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:var(--gap)}.archive-opening>.eyebrow{grid-column:1/3}.archive-title{grid-column:3/11;align-self:center;font-size:clamp(5rem,10vw,11.5rem);font-weight:410;letter-spacing:-.06em;line-height:.78}.archive-intro{grid-column:9/13;align-self:end} .archive-density{min-height:165svh}.archive-period{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}.archive-period .eyebrow{grid-column:1/4}.archive-period h2{grid-column:4/10;font-size:clamp(4rem,8vw,9rem);font-weight:410;letter-spacing:-.05em;line-height:.82}.archive-traces{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(4rem,auto);gap:var(--gap);min-height:95rem;margin-top:7rem}.trace img{height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}.trace-one{grid-column:1/6;grid-row:1/5;height:24rem}.trace-two{grid-column:8/11;grid-row:3/8;height:34rem}.trace-three{z-index:2;grid-column:5/8;grid-row:7/11;height:29rem}.archive-ledger{grid-column:1/13;grid-row:10/15;list-style:none;border-top:1px solid currentColor}.archive-ledger li{display:grid;grid-template-columns:1fr 5fr 2fr;gap:var(--gap);align-items:baseline;padding:.48rem 0;border-bottom:1px solid rgba(223,195,164,.34)}.archive-ledger time,.archive-ledger small,.archive-annotations span{font-family:var(--mono);font-size:.65rem}.archive-ledger li>span{font-size:clamp(1.3rem,2.2vw,2.4rem)}.archive-ledger small{justify-self:end;text-transform:uppercase}.archive-annotations{grid-column:9/13;grid-row:1/6;font-size:.7rem}.archive-annotations p{display:grid;grid-template-columns:5rem 1fr;padding:.5rem 0;border-bottom:1px solid rgba(223,195,164,.34)} .archive-release{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-content:center;min-height:112svh}.archive-release>.eyebrow{grid-column:1/3}.archive-reading{grid-column:3/8;font-size:clamp(2.8rem,5vw,5.8rem);font-weight:410;letter-spacing:-.04em;line-height:.94}.archive-reading p+p{margin-top:.65em}.context-note{grid-column:8/13;margin-top:5rem;border-block:1px solid currentColor}.context-note summary{padding:.8rem 0;font-size:.72rem;font-weight:700;letter-spacing:.08em;list-style:none;text-transform:uppercase}.context-note summary::-webkit-details-marker{display:none}.context-note summary:after{content:"+";float:right}.context-note[open] summary:after{content:"−"}.context-note p{padding:.8rem 0 1.5rem} /* CV */ .cv-header{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:var(--gap);min-height:78svh;padding-left:var(--cv-pad);padding-right:var(--cv-pad)}.cv-header>.eyebrow{grid-column:1/3}.cv-name{grid-column:2/12;align-self:center;font-size:clamp(5rem,11vw,13rem);font-weight:410;letter-spacing:-.07em;line-height:.78}.cv-role{grid-column:2/7;align-self:end;font-size:1.25rem}.cv-status{grid-column:9/13;align-self:end;font-size:.75rem}.cv-sections{padding:0 var(--cv-pad) 8rem}.cv-section{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:2rem 0;border-top:1px solid currentColor}.cv-section>h2{grid-column:1/4;font-size:clamp(1.8rem,3vw,3.4rem);font-weight:430;letter-spacing:-.03em}.cv-section>h2 span{display:block;font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--blue);letter-spacing:.04em}.cv-section>ol,.cv-section>.cv-prose{grid-column:5/13;list-style:none}.cv-section li{display:grid;grid-template-columns:8rem 1fr;gap:var(--gap);padding:.8rem 0;border-bottom:1px solid rgba(40,44,53,.3)}.cv-section time{font-family:var(--mono);font-size:.68rem}.cv-section h3{font-size:1.5rem;font-weight:500}.cv-section li p{margin-top:.25rem}.cv-prose{max-width:48rem;font-size:1.25rem} .cv-back-link{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:2rem 0}.cv-back-link a{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.3em} /* CV hub: /cv/ — two large panels, no third choice, no cards */ .cv-hub-page{height:calc(100svh - var(--footer-h));overflow:hidden} .cv-hub-choices{display:grid;grid-template-rows:repeat(2,1fr);height:calc(100svh - var(--footer-h))} .cv-hub-choice{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.4rem;padding:1.1rem var(--cv-pad);transition:background 200ms ease,color 200ms ease} .cv-hub-choice:first-child{padding-top:calc(var(--nav) + 1.1rem)} .cv-hub-choice-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7} .cv-hub-choice-label{font-size:clamp(1.8rem,4.2vw,3.6rem);font-weight:410;letter-spacing:-.03em;line-height:1} .cv-hub-choice-sub{font-size:.85rem;opacity:.8} .cv-hub-choice:hover,.cv-hub-choice:focus-visible{outline:0} .cv-hub-choice:hover .cv-hub-choice-label,.cv-hub-choice:focus-visible .cv-hub-choice-label{text-decoration:underline;text-underline-offset:.08em} /* Brand & Communications CV: /cv/communications — two-column resume, numbered sections */ .cv-comm-header{position:relative;isolation:isolate;padding:calc(var(--nav) + 1.8rem) var(--cv-pad) 2.2rem;background:var(--blue);color:var(--light);min-height:0;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end} .cv-comm-mark{display:none} .cv-comm-name-block{grid-column:2/8} .cv-comm-header .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85} .cv-comm-name{margin-top:.4rem;font-size:clamp(2.4rem,5.5vw,4.6rem);font-weight:410;letter-spacing:-.04em;line-height:.92} .cv-comm-role{margin-top:.5rem;font-size:1.05rem;opacity:.92} .cv-comm-contact{grid-column:9/13;align-self:end;display:flex;flex-direction:column;gap:.3rem;font-family:var(--mono);font-size:.7rem;text-align:end} .cv-comm-contact a{text-decoration:underline;text-underline-offset:.25em} .cv-comm-body{display:grid;grid-template-columns:repeat(12,1fr);gap:0;padding:0 0 2rem} .cv-comm-sidebar{grid-column:1/5;background:var(--light);padding:1.8rem 2rem 2rem var(--cv-pad)} html[dir="rtl"] .cv-comm-sidebar{padding:1.8rem var(--cv-pad) 2rem 2rem} .cv-comm-main{grid-column:5/13;padding:1.8rem var(--cv-pad) 2rem calc(var(--gap) + 2rem)} html[dir="rtl"] .cv-comm-main{padding:1.8rem calc(var(--gap) + 2rem) 2rem var(--cv-pad)} .cv-comm-block{padding:1.6rem 0;border-top:1px solid rgba(40,44,53,.2)} .cv-comm-block:first-child{padding-top:0;border-top:0} .cv-comm-block h2{display:flex;align-items:baseline;gap:.6em;font-size:1.15rem;font-weight:600;letter-spacing:-.01em} .cv-comm-block h2 span{font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--blue)} .cv-comm-block p{margin-top:.6em;font-size:.92rem;line-height:1.55} .cv-comm-competency{margin-top:1rem} .cv-comm-competency h3{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .cv-comm-dl div{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid rgba(40,44,53,.15);font-size:.85rem} .cv-comm-sidebar article{margin-top:1rem} .cv-comm-sidebar article h3{font-size:.95rem;font-weight:600} .cv-comm-sidebar article p{margin-top:.15em;font-size:.85rem;opacity:.8} .cv-comm-job{margin-top:1.8rem} .cv-comm-job:first-child{margin-top:1rem} .cv-comm-job-header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap} .cv-comm-company{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)} .cv-comm-job-header h3{margin-top:.15em;font-size:1.3rem;font-weight:500} .cv-comm-progression{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem;list-style:none} .cv-comm-progression li{display:flex;align-items:center;gap:.35em;padding:.3em .7em;background:var(--blue);color:var(--light);border-radius:2em;font-size:.78rem;font-weight:500} .cv-comm-progression li span{font-family:var(--mono);font-size:.68rem;opacity:.75} .cv-comm-job-header time{font-family:var(--mono);font-size:.68rem;white-space:nowrap} .cv-comm-job-summary{font-style:italic} .cv-comm-job ul{margin-top:.7em;list-style:none;padding-inline-start:0} .cv-comm-job li:not(.cv-comm-progression li){position:relative;padding:.15rem 0 .15rem 1.1em;font-size:.92rem;line-height:1.55} html[dir="rtl"] .cv-comm-job li:not(.cv-comm-progression li){padding:.15rem 1.1em .15rem 0} .cv-comm-job li:not(.cv-comm-progression li)::before{content:"—";position:absolute;left:0;opacity:.5} html[dir="rtl"] .cv-comm-job li:not(.cv-comm-progression li)::before{left:auto;right:0} .cv-comm-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:1rem} .cv-comm-value-grid article{padding-top:.6rem;border-top:2px solid var(--blue)} .cv-comm-value-grid article span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)} .cv-comm-value-grid article p{margin-top:.4em} /* Cultural Communications CV: /professional/cv — reuses .cv-comm-* structure (sidebar/main split, numbered blocks, job entries) with a dark header instead of blue, plus its own intersection line, project cards and expertise grid. */ .cv-cult-header{background:var(--dark);color:var(--cream)} .cv-cult-intersection{display:flex;flex-wrap:wrap;gap:.5em .9em;margin:0;padding:1rem var(--cv-pad);background:var(--light);font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .cv-cult-intersection b{opacity:.5;font-weight:400} .cv-cult-lead{font-size:1.05rem;font-weight:500} .cv-cult-profile-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:1rem} .cv-cult-profile-columns p{margin-top:0;font-size:.88rem;line-height:1.55} .cv-cult-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:1rem} .cv-cult-card{padding:1.4rem;color:var(--light)} .cv-cult-card-blue{background:var(--blue)} .cv-cult-card-green{background:var(--green)} .cv-cult-card-year{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.8} .cv-cult-card h3{margin-top:.4rem;font-size:1.5rem;font-weight:500} .cv-cult-card-type{margin-top:.3rem;font-size:.85rem;font-style:italic;opacity:.9} .cv-cult-selected-works{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:1.2rem} .cv-cult-selected-works article time{font-family:var(--mono);font-size:.68rem;color:var(--blue)} .cv-cult-selected-works article h3{margin-top:.3rem;font-size:1rem;font-weight:600} .cv-cult-selected-works article p{margin-top:.15em;font-size:.8rem;opacity:.75} .cv-cult-compact-role .cv-comm-job-summary{font-style:normal;font-size:.88rem;opacity:.85} .cv-cult-expertise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:1rem} .cv-cult-expertise-grid h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .cv-cult-expertise-grid p{margin-top:.3rem;font-size:.85rem;line-height:1.5} .cv-cult-links{display:flex;flex-direction:column;gap:.4rem;font-family:var(--mono);font-size:.75rem} .cv-cult-links a{text-decoration:underline;text-underline-offset:.25em} /* Professional landing page: /professional — editorial catalogue composition. Charcoal hero (asymmetric headline + narrow info column) followed by two full-bleed color panels, each a single accessible link out to a CV. Panel backgrounds use a quiet two-stop gradient (archival parchment / ink-indigo) rather than a flat fill, with a large low-opacity numeral and a faint procedural grain as the only decoration — no imagery, no shadows. */ .professional-hero{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:var(--gap);min-height:86svh} .professional-hero>.eyebrow{grid-column:1/4} .professional-title{grid-column:1/8;grid-row:2;align-self:center;max-width:none;font-size:clamp(4rem,7vw,8.5rem);font-weight:410;letter-spacing:-.045em;line-height:.9} .professional-info{grid-column:8/13;grid-row:2;align-self:center;display:flex;flex-direction:column;gap:1.7rem;max-width:none;padding-left:calc(var(--gap)*1.4);border-left:1px solid rgba(240,230,239,.25)} .professional-lead{font-size:1.08rem;font-weight:500;line-height:1.58} .professional-body{font-size:.92rem;opacity:.78;line-height:1.68} .professional-panels{display:flex;flex-direction:column} .professional-panel{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:repeat(12,1fr);align-items:start;gap:var(--gap);padding:5.5rem var(--pad);transition:background 280ms ease,color 280ms ease} .professional-panel--cultural{background:linear-gradient(160deg,color-mix(in srgb,var(--cream) 90%,#fff) 0%,var(--cream) 52%,color-mix(in srgb,var(--cream) 88%,#b8926a) 100%);color:var(--dark)} .professional-panel--brand{background:linear-gradient(160deg,var(--ink-light) 0%,var(--ink) 52%,var(--ink-dark) 100%);color:var(--light)} .professional-panel::before{content:"";position:absolute;inset:0;z-index:0;opacity:.045;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .professional-panel-numeral{position:absolute;top:50%;right:clamp(.5rem,3vw,3.5rem);z-index:0;transform:translateY(-50%);font-size:clamp(9rem,24vw,20rem);font-weight:500;line-height:1;letter-spacing:-.02em;color:currentColor;opacity:.13;pointer-events:none;user-select:none} .professional-panel-index{position:relative;z-index:1;grid-column:1/2;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.05em} .professional-panel-content{position:relative;z-index:1;grid-column:2/11} .professional-panel-title{font-size:clamp(2.6rem,5.5vw,5.8rem);font-weight:410;letter-spacing:-.04em;line-height:.96;transition:transform 280ms cubic-bezier(.2,.65,.3,1)} .professional-panel-sub{display:block;margin-top:1.1rem;font-size:1rem;font-weight:500;opacity:.8} .professional-panel-arrow{position:relative;z-index:1;grid-column:12/13;justify-self:end;font-size:1.9rem;line-height:1;transition:transform 280ms cubic-bezier(.2,.65,.3,1)} .professional-panel:hover .professional-panel-title,.professional-panel:focus-visible .professional-panel-title{transform:translateX(.4rem)} .professional-panel:hover .professional-panel-arrow,.professional-panel:focus-visible .professional-panel-arrow{transform:translate(.3rem,-.3rem)} .professional-panel:focus-visible{outline:2px solid currentColor;outline-offset:-.6rem} /* Contact */ .contact-scene{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:var(--gap);isolation:isolate}.contact-scene>.eyebrow{grid-column:1/3}.contact-title{grid-column:1/9;align-self:center;font-size:clamp(6rem,13vw,15rem);font-weight:410;letter-spacing:-.07em;line-height:.72}.contact-details{grid-column:8/13;grid-row:3;align-self:end;padding-top:1rem;border-top:1px solid currentColor}.contact-details p+p{margin-top:1rem}.contact-email{font-family:var(--mono);font-size:.75rem}.contact-email a{text-decoration:underline;text-underline-offset:.2em} /* Restrained reveal only. */ .js .reveal{opacity:0;transform:translateY(1.2rem);transition:opacity 500ms ease,transform 500ms cubic-bezier(.2,.65,.3,1)}.js .reveal.is-visible{opacity:1;transform:none} /* ---- Simplified project template: title, 3-line lead, central image, paragraph, optional video, supplementary detail, carousel ---- */ .simple-hero{display:flex;flex-direction:column;justify-content:center;gap:2rem;min-height:88svh} .simple-title{font-size:clamp(4.5rem,13vw,13rem);font-weight:410;letter-spacing:-.065em;line-height:.8} .simple-title b{display:block;margin-top:.15em;font-size:.5em;font-weight:600;letter-spacing:0} .simple-hero .project-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:44rem;padding-top:.7rem;border-top:1px solid currentColor;font-size:.72rem} .simple-hero .project-meta dt{font-weight:700;letter-spacing:.08em;text-transform:uppercase} .simple-hero .project-meta dd{margin-top:.3rem} .simple-lead{display:flex;align-items:center;min-height:44svh;padding-block:3rem} .simple-lead p{max-width:38rem;font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:410;letter-spacing:0;line-height:1.28} .simple-image{padding:0} .simple-image img{height:min(88vh,58rem);object-fit:cover} .simple-image figcaption{padding:.6rem var(--pad) 0} .simple-body{display:flex;align-items:center;min-height:44svh;padding-block:3rem} .simple-body-inner{max-width:38rem} .simple-body p{font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:0;line-height:1.6} .simple-body p+p{margin-top:1.2em} .simple-details{padding-block:4rem} .simple-details>.eyebrow{display:block;margin-bottom:2rem} .detail-block{max-width:42rem;margin:0 0 4.5rem} .detail-block:last-child{margin-bottom:0} .detail-block h2{font-size:1.25rem;font-weight:600;letter-spacing:0;margin-bottom:.5rem} .detail-block p{font-size:1.02rem;line-height:1.62;letter-spacing:0} .detail-block p+p{margin-top:1.1em} .detail-block p a{text-decoration:underline;text-underline-offset:.2em} .detail-quote{font-size:clamp(1.3rem,2.2vw,1.85rem);font-weight:410;font-style:italic;letter-spacing:0;line-height:1.35;max-width:38rem} .detail-quote+.detail-quote{margin-top:1.5rem} .detail-list{list-style:none;border-top:1px solid currentColor;max-width:42rem} .detail-list li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--gap);padding:.9rem 0;border-bottom:1px solid currentColor;align-items:baseline} .detail-list span{font-family:var(--mono);font-size:.68rem} .detail-list p{font-size:1.02rem;letter-spacing:0} .detail-dl{display:grid;gap:0;border-top:1px solid currentColor;max-width:42rem} .detail-dl div{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:.7rem 0;border-bottom:1px solid rgba(223,195,164,.35)} .detail-dl dt{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .detail-dl dd{font-size:.95rem} .simple-carousel{padding-block:1rem 5rem} .simple-carousel>.eyebrow{display:block;padding-bottom:1.5rem} .carousel-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 1rem;-webkit-overflow-scrolling:touch} .carousel-track figure{flex:0 0 auto;width:min(64vw,22rem);scroll-snap-align:start} .carousel-track img{height:15rem;object-fit:cover} .carousel-track figcaption{margin-top:.5rem;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7} @media(max-width:760px){ .simple-title{font-size:clamp(3.5rem,17vw,6rem)} .simple-hero .project-meta{grid-template-columns:1fr} .carousel-track figure{width:min(70vw,16rem)} .carousel-track img{height:11rem} } /* ---- Lightbox: click any content photo to preview larger, page through with prev/next ---- */ .lightbox-trigger{cursor:zoom-in} .lightbox-trigger:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #000} .lightbox-frame{position:relative;overflow:hidden} .lightbox-frame img{transition:transform 450ms cubic-bezier(.2,.65,.3,1)} .lightbox-frame:hover img{transform:scale(1.045)} .lightbox-hint{position:absolute;right:.6rem;bottom:.6rem;z-index:2;display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(20,20,24,.55);opacity:.85;transition:opacity 200ms ease,transform 200ms ease;pointer-events:none} .lightbox-frame:hover .lightbox-hint{opacity:1;transform:scale(1.1)} .lightbox-hint svg{width:1.05rem;height:1.05rem;color:#fff} @media(hover:none){ .lightbox-frame:active img{transform:scale(1.02)} .lightbox-hint{opacity:.9} } .lightbox{position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;background:rgba(10,10,12,.94);opacity:0;pointer-events:none;transition:opacity 200ms ease} .lightbox.is-open{display:flex;opacity:1;pointer-events:auto} .lightbox[hidden]{display:none} .lightbox-img{display:block;width:auto;max-width:min(92vw,80rem);max-height:78vh;object-fit:contain} .lightbox-caption{max-width:80vw;margin:0;color:#f0e6ef;font-size:.85rem;text-align:center;letter-spacing:0} .lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:none;border:0;color:#f0e6ef;cursor:pointer} .lightbox-close{top:1.2rem;right:1.5rem;font-size:2.2rem;line-height:1;padding:.25rem .6rem} .lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);font-size:2rem;padding:.5rem 1rem} .lightbox-prev{left:.5rem} .lightbox-next{right:.5rem} .lightbox-counter{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:#f0e6ef;font-family:var(--mono);font-size:.68rem;opacity:.7} @media(max-width:760px){ .lightbox{padding:1rem} .lightbox-img{max-height:64vh} .lightbox-prev,.lightbox-next{font-size:1.5rem;padding:.5rem .7rem} } @media(max-width:760px){ :root{--pad:1rem;--nav:3.3rem;--gap:.75rem;--footer-h:10.5rem}body{font-size:1rem}.site-nav{grid-template-columns:auto 1fr auto;font-size:.61rem;letter-spacing:.04em}.site-nav .nav-primary{justify-content:center;gap:.2rem}.site-nav a{padding:.35rem .36rem}.global-footer{display:block;min-height:9rem}.global-footer p{margin-top:1.5rem}.global-footer .footer-social{margin-top:1.5rem} .home-hero-scroll{height:100svh}.hero-motion .home-hero-scroll{height:170vh} .home-opening{grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr auto auto auto;min-height:100svh}.hero-motion .home-opening{min-height:0} .home-role{grid-column:1/2;grid-row:1;max-width:6.5rem;font-size:.63rem} .home-portrait{grid-column:2/5;grid-row:1/5;margin:calc((var(--nav) + var(--pad))*-1) calc(var(--pad)*-1) 0 0;height:72svh}.home-portrait img{object-position:50% center} .hero-motion .home-portrait img{transform:scale(calc(1 + .03 * clamp(0,calc((var(--hero-progress,0) - .20) / .35),1)))} .home-name{grid-column:1/5;grid-row:2;align-self:end;font-size:clamp(6rem,30vw,9rem);line-height:.69;white-space:normal;transform-origin:left bottom}.home-name span:last-child{margin-left:10vw}.home-name span[dir="rtl"]{margin-left:0} .hero-motion .home-name{transform:scale(calc(1 - .16 * clamp(0,calc((var(--hero-progress,0) - .20) / .35),1)))} .home-name-fa{grid-column:1/5;grid-row:3;align-self:start;margin-top:.5rem;gap:.35em;font-size:clamp(1.4rem,6vw,2.1rem)} /* Persian mobile: same hierarchy swap as desktop — حجت سلیمی large in row 2, Hodjat Salimi small in row 3 (row order unchanged, only which name is large/small and the resulting sizes swap). */ html[dir="rtl"] .home-name-fa{grid-row:2;align-self:end;margin-top:0;flex-direction:column;align-items:flex-end;gap:0;font-size:clamp(3.4rem,17vw,6rem);line-height:1} html[dir="rtl"] .home-name-fa span:last-child{margin-right:5vw} html[dir="rtl"].hero-motion .home-name-fa{opacity:1;transform:scale(calc(1 - .16 * clamp(0,calc((var(--hero-progress,0) - .20) / .35),1)))} html[dir="rtl"] .home-name{grid-row:3;align-self:start;margin-top:.5rem;font-size:clamp(1.3rem,5.5vw,1.9rem);gap:.3em} html[dir="rtl"].hero-motion .home-name{transform:none;opacity:clamp(0,calc((var(--hero-progress,0) - .25) / .3),1)} .home-hero-statement{grid-column:1/5;grid-row:4/6;align-self:start;margin-top:1.2rem;display:flex;flex-direction:column;align-items:start;gap:1.2rem} .home-position{grid-column:auto;font-size:1rem} .home-enter{grid-column:auto;margin-top:0} .scroll-cue{bottom:1.1rem} .home-current{grid-template-columns:repeat(4,1fr);padding-top:calc(var(--nav) + 4rem)}.current-heading{grid-column:1/5;grid-template-columns:repeat(4,1fr)}.current-heading .eyebrow{grid-column:1/3}.current-heading h2{grid-column:1/5;margin-top:2rem;font-size:3rem}.current-heading p{grid-column:1/5;max-width:none} .current-work{grid-column:1/5;grid-template-columns:repeat(4,1fr);margin-top:6rem}.current-work:first-of-type{margin-top:4rem} .work-moment-image{grid-column:1/5}.work-moment-image img{height:52svh} .current-work--sound .work-moment-image img{object-position:38% center} .work-moment-info{grid-column:1/5;grid-template-columns:repeat(4,1fr)} .work-moment-title{grid-column:1/5;font-size:2.4rem} .work-moment-meta,.work-moment-desc,.work-moment-link{grid-column:1/5} .work-moment-desc{margin-top:.5rem} .current-work--archive{margin-top:6rem;padding:2.5rem var(--pad) 3rem}.current-work--archive .work-moment-image img{max-width:80vw;max-height:46vh} .home-exits{grid-column:1/5;margin-top:5rem} .index-intro{grid-template-columns:repeat(4,1fr)}.index-intro>.eyebrow{grid-column:1/3}.index-title{grid-column:1/5;font-size:4.2rem}.index-note{grid-column:2/5}.index-entry{grid-template-columns:repeat(4,1fr)}.index-number{grid-column:1/2}.index-entry h2{grid-column:1/5;margin-top:1rem;font-size:3.2rem}.index-entry>p{grid-column:2/5}.index-entry time{grid-column:2/5;justify-self:start}.index-entry--canyous{min-height:43rem}.index-entry--canyous figure{grid-column:1/5;margin-top:2rem;width:calc(100% + var(--pad))}.index-entry--canyous figure img{height:25rem;object-position:38% center}.index-entry--byegones{min-height:17rem}.period-threshold{grid-template-columns:repeat(4,1fr);min-height:0;padding-bottom:2rem}.period-threshold-head{grid-column:1/5;grid-template-columns:repeat(4,1fr)}.period-threshold-head>.eyebrow{grid-column:1/3}.period-threshold-head h2{grid-column:1/5;font-size:3.4rem}.period-threshold-head time{grid-column:1/3}.earlier-work-list{grid-column:1/5;margin-top:2rem}.earlier-work-list li{grid-template-columns:repeat(4,1fr)}.earlier-work-list h3{grid-column:1/5}.earlier-work-list p{grid-column:1/4;margin-top:.2rem}.earlier-work-list time{grid-column:4/5} .project-type{grid-column:1/4}.project-meta{grid-column:1/5;grid-row:5;grid-template-columns:repeat(3,1fr);margin-top:2rem}.project-next{font-size:.63rem} .footer-social{gap:1rem} .about-opening{grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr auto}.about-opening>.eyebrow{grid-column:1/3}.about-title{grid-column:1/5;grid-row:2;font-size:4rem}.about-title[dir="rtl"]{font-size:2.6rem}.about-portrait{grid-column:2/5;grid-row:2/4;margin:5rem calc(var(--pad)*-1) calc(var(--pad)*-1) 0;height:54svh;align-self:end}.about-portrait img{object-position:58% center}.about-reading{grid-template-columns:repeat(4,1fr);min-height:0}.about-lead{grid-column:1/5;font-size:2.8rem}.about-body{grid-column:2/5;margin-top:5rem}.about-interruption{grid-column:1/5;margin-top:7rem}.about-interruption img{height:52svh}.about-links{grid-column:1/5;margin-top:6rem} .archive-opening{grid-template-columns:repeat(4,1fr)}.archive-opening>.eyebrow{grid-column:1/3}.archive-title{grid-column:1/5;font-size:4.8rem}.archive-intro{grid-column:2/5}.archive-density{min-height:0}.archive-period{grid-template-columns:repeat(4,1fr)}.archive-period .eyebrow{grid-column:1/3}.archive-period h2{grid-column:1/5;margin-top:2rem;font-size:4rem}.archive-traces{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;min-height:0;row-gap:1.5rem}.trace-one{grid-column:1/4;grid-row:1;height:15rem}.archive-annotations{grid-column:2/5;grid-row:2}.trace-two{grid-column:2/5;grid-row:3;height:23rem}.trace-three{grid-column:1/3;grid-row:4;height:19rem}.archive-ledger{grid-column:1/5;grid-row:5;margin-top:2rem}.archive-ledger li{grid-template-columns:3rem 1fr}.archive-ledger small{grid-column:2;justify-self:start}.archive-release{grid-template-columns:repeat(4,1fr);align-content:start;min-height:120svh}.archive-release>.eyebrow{grid-column:1/3}.archive-reading{grid-column:1/5;margin-top:4rem;font-size:2.9rem}.context-note{grid-column:1/5;margin-top:4rem} .cv-header{grid-template-columns:repeat(4,1fr);min-height:70svh}.cv-header>.eyebrow{grid-column:1/3}.cv-name{grid-column:1/5;font-size:5rem}.cv-role{grid-column:1/4}.cv-status{grid-column:2/5;margin-top:2rem}.cv-section{grid-template-columns:repeat(4,1fr)}.cv-section>h2{grid-column:1/5}.cv-section>ol,.cv-section>.cv-prose{grid-column:1/5;margin-top:2rem}.cv-section li{grid-template-columns:4.5rem 1fr}.cv-section h3{font-size:1.3rem} .cv-hub-choice{padding:.9rem var(--cv-pad);gap:.2rem}.cv-hub-choice:first-child{padding-top:calc(var(--nav) + .9rem)}.cv-hub-choice-label{font-size:1.7rem}.cv-hub-choice-sub{font-size:.72rem}.cv-hub-choice-eyebrow{font-size:.62rem} .cv-comm-header{grid-template-columns:repeat(4,1fr);padding-top:calc(var(--nav) + 1.2rem)}.cv-comm-mark{grid-column:1/2}.cv-comm-name-block{grid-column:1/5;margin-top:1rem}.cv-comm-contact{grid-column:1/5;align-items:flex-start;text-align:start;margin-top:1.5rem}.cv-comm-body{grid-template-columns:repeat(4,1fr)}.cv-comm-sidebar{grid-column:1/5;margin:0;padding:1.5rem var(--cv-pad) 1.5rem}.cv-comm-main{grid-column:1/5;padding:1.5rem var(--cv-pad)}.cv-comm-job-header{flex-direction:column;align-items:flex-start;gap:.2rem}.cv-comm-value-grid{grid-template-columns:1fr} .cv-cult-intersection{padding:1rem var(--cv-pad)}.cv-cult-profile-columns{grid-template-columns:1fr}.cv-cult-cards{grid-template-columns:1fr}.cv-cult-selected-works{grid-template-columns:repeat(2,1fr)}.cv-cult-expertise-grid{grid-template-columns:1fr} .professional-hero{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;min-height:0;gap:1.6rem} .professional-hero>.eyebrow{grid-column:1/3} .professional-title{grid-column:1/5;grid-row:2;font-size:clamp(2.6rem,11vw,3.6rem)} .professional-info{grid-column:1/5;grid-row:3;gap:1.3rem;padding-left:1rem} .professional-panel{grid-template-columns:repeat(4,1fr);padding:3.6rem var(--pad);row-gap:.9rem} .professional-panel-index{grid-column:1/2} .professional-panel-content{grid-column:1/5} .professional-panel-title{font-size:clamp(2.1rem,10vw,2.8rem)} .professional-panel-arrow{grid-column:4/5;grid-row:1;justify-self:end} .professional-panel-numeral{right:-1rem;font-size:38vw;opacity:.1} .contact-scene{grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr auto}.contact-scene>.eyebrow{grid-column:1/3}.contact-title{grid-column:1/5;font-size:5.5rem}.contact-details{grid-column:2/5;grid-row:3} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.js .reveal{opacity:1;transform:none} /* Hero: script.js already refuses to add .hero-motion when reduced motion is preferred, but this is enforced again here in CSS so the safe, fully visible, non-pinned layout is guaranteed regardless of JS. */ .hero-motion .home-hero-scroll{height:auto!important} .hero-motion .home-opening{position:static!important;height:auto!important;min-height:100svh} .hero-motion .home-role{opacity:1!important} .hero-motion .home-name{opacity:1!important;transform:none!important} .hero-motion .home-name-fa{opacity:1!important;transform:none!important} .hero-motion .home-portrait img{transform:none!important} .hero-motion .home-hero-statement{visibility:visible!important;clip-path:none!important;transform:none!important} .hero-motion .scroll-cue{display:none!important} .js .current-heading,.js .current-work .work-moment-image,.js .current-work .work-moment-title{opacity:1!important;clip-path:none!important;transform:none!important} .js .current-work .work-moment-image img,.js .current-work .work-moment-meta,.js .current-work .work-moment-desc,.js .current-work .work-moment-link{opacity:1!important;transform:none!important} } /* Print / PDF export for the CV pages (docs/CV-SYSTEM-SPEC.md Phase 2). Rendered by WeasyPrint at build time (build/build_pdf.py) — this is the only stylesheet path it sees, so these rules ARE the PDF's design, not a browser print fallback. clamp()/vw-based type (fine in a real viewport) is overridden here with fixed pt sizes because WeasyPrint's page-box viewport does not track a browser window the way vw expects. */ @media print{ html,body{background:#fff} .skip-link,.site-nav,.global-footer,.cv-back-link{display:none!important} .js .reveal{opacity:1!important;transform:none!important} .cv-header{min-height:0;padding:14mm 14mm 0;grid-template-rows:auto auto auto;gap:.6rem} .cv-name{font-size:34pt;grid-column:1/13} .cv-role{font-size:12pt;grid-column:1/13} .cv-status{font-size:8pt;grid-column:1/13;justify-self:start;margin-top:.3rem} .cv-sections{padding:1rem 14mm 0} .cv-section{padding:.9rem 0} .cv-section li{break-inside:avoid} .cv-section>h2{font-size:13pt} .cv-section h3{font-size:11pt} .cv-section li p,.cv-prose{font-size:9pt} .cv-comm-page{padding:0} .cv-comm-header{margin:0;padding:14mm 14mm 10mm;grid-template-columns:auto 1fr auto;align-items:start} .cv-comm-mark{display:block;grid-column:auto} .cv-comm-name-block{grid-column:auto} .cv-comm-contact{grid-column:auto;font-size:7.5pt} .cv-comm-name{font-size:26pt} .cv-comm-role{font-size:10.5pt} .cv-comm-body{padding:0} .cv-comm-sidebar{margin:0;padding-inline-start:14mm;padding-inline-end:8mm;padding-top:8mm;padding-bottom:14mm} .cv-comm-main{padding-inline-start:8mm;padding-inline-end:14mm;padding-top:8mm;padding-bottom:14mm} .cv-comm-block{padding:.6rem 0} .cv-comm-job{break-inside:avoid} .cv-comm-job-header h3{font-size:11pt} .cv-comm-block p,.cv-comm-job li{font-size:8.5pt} .cv-comm-progression li{font-size:7.5pt;padding:.25em .6em} .cv-cult-intersection{padding:8mm 14mm;font-size:6.5pt} .cv-cult-lead{font-size:9.5pt} .cv-cult-profile-columns p{font-size:8pt} .cv-cult-card{break-inside:avoid;padding:.8rem} .cv-cult-card h3{font-size:13pt} .cv-cult-card-type{font-size:7.5pt} .cv-cult-selected-works{break-inside:avoid} .cv-cult-selected-works article h3{font-size:8.5pt} .cv-cult-selected-works article p{font-size:7pt} .cv-cult-compact-role{break-inside:avoid} .cv-cult-expertise-grid p{font-size:7.5pt} .cv-cult-links{font-size:7.5pt} @page{size:A4;margin:0 0 12mm; @bottom-center{content:"HODJAT SALIMI \00B7 RESUME " counter(page) " / " counter(pages);font-family:var(--mono);font-size:7pt;color:#666} } }