/* ===== Leo Martins — One Page (white) ===== */ :root{ /* Gap from the bottom of a section title to the top of that section's first content block. One value for every section, so the rhythm below every title is identical. */ --sec-gap:44px; /* Height of the fixed top bar. The sections derive their top clearance from it, so shrinking the bar genuinely gives its height back to the content below. */ --nav-h:76px; /* Height of the gallery-chooser pill. The portfolio grid gives it up when galleries are present, and the focus picture reserves it ALWAYS — so the picture's bottom limit is the grid's live-galleries bottom edge whether galleries exist or not. */ --chooser-h:76px; --orange:#ff9900; --blog-cover-ar:0.72; --ink:#0a0a0a; --paper:#ffffff; --paper2:#efefec; --line:rgba(10,10,10,.12); --muted:rgba(10,10,10,.55); --disp:"Oswald",sans-serif; --grot:"Oswald",sans-serif; --body:"Archivo",sans-serif; --serif:"Newsreader",serif; --navh:70px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;overflow-x:clip;} /* scroll-snap is toggleable via [data-snap] on (Tweaks). Default (no attr) keeps the original proximity snapping so the live site is unchanged. */ html,html[data-snap="full"]{scroll-snap-type:y proximity;} html[data-snap="off"]{scroll-snap-type:none;} html[data-snap="pause"]{scroll-snap-type:none;} /* JS aligns after scrolling stops */ html[data-snap="partial"]{scroll-snap-type:y proximity;} /* Partial = only ABOUT + BLOG assist-snap; the rest scroll freely (fewer catches). */ html[data-snap="partial"] .op-hero, html[data-snap="partial"] .op-carousel-gap, html[data-snap="partial"] .op-work, html[data-snap="partial"] .op-contact{scroll-snap-align:none;} body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} a{cursor:pointer;color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} img{display:block;max-width:100%;} ::selection{background:var(--orange);color:#000;} .kicker{font-family:var(--grot);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:16px;} .kicker .kn{color:var(--orange);font-weight:700;} .kicker::after{content:"";height:1px;width:64px;background:var(--line);} /* reveal-on-scroll */ .rev{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);} .rev.in{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){ .rev{opacity:1;transform:none;transition:none;} } /* ============ WORDMARK ============ */ .wordmark{ font-family:var(--disp); font-weight:700; color:var(--orange); mix-blend-mode:difference; text-transform:uppercase; white-space:nowrap; line-height:1; letter-spacing:0; margin:0;user-select:none;pointer-events:none; } /* ============ HERO ============ */ .op-root{position:relative;--blk-w:clamp(300px, 28vw, 720px);--blk-gap:clamp(26px, 2.6vw, 64px);--pf-w:clamp(300px, 25vw, 560px);} .op-hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:#0a0a0a;isolation:isolate;z-index:1;scroll-snap-align:start;} .op-hero-photoWrap{position:absolute;inset:0;z-index:0;will-change:transform;} .op-hero-photo{position:absolute;inset:0;} .op-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 64%,rgba(0,0,0,.42));} .op-hero-grain{position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .op-hero-subtitle{position:absolute;right:0;top:50%;transform:translate(calc(50% - 22px), -50%) rotate(-90deg);display:flex;flex-direction:row;align-items:center;gap:24px;writing-mode:horizontal-tb;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.6s ease;z-index:4;mix-blend-mode:difference;} .op-hero.active .op-hero-subtitle{opacity:1;} .op-hero-subtitle-name{font-family:var(--serif);font-size:26px;font-weight:400;font-style:italic;color:#fff;letter-spacing:.04em;} .op-hero-subtitle-role{font-family:var(--grot);font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.16em;} .op-hero-subtitle-media{font-family:var(--serif);font-size:15px;font-weight:400;font-style:italic;color:rgba(255,255,255,.85);letter-spacing:.04em;} .op-hero-subtitle-year{font-family:var(--grot);font-size:15px;font-weight:500;color:rgba(255,255,255,.85);letter-spacing:.12em;} @media (max-width:800px){.op-hero-subtitle{display:none;}} .op-hero-word{position:fixed;top:0;left:0;z-index:1;pointer-events:none;will-change:opacity;} .op-hero-word.gone{visibility:hidden;} .op-hero-word.preload{visibility:hidden;} /* ---- one-time opening intro: wordmark flies in from the top-right & bumps; nav bar rises ---- */ .op-hero-word.op-intro-word-pre{opacity:0;transform:translateX(75vw);} .op-hero-word.op-intro-word-fly{animation:op-word-fly .85s cubic-bezier(.16,.82,.3,1) both;} @keyframes op-word-fly{ 0%{opacity:0;transform:translateX(75vw);} 44%{opacity:1;} 64%{transform:translateX(0);} 73%{transform:translateX(16px);} 82%{transform:translateX(-8px);} 90%{transform:translateX(4px);} 100%{transform:translateX(0);} } .op-hero-top{transition:opacity .6s ease;} .op-hero-top.op-intro-fade-hidden{opacity:0;pointer-events:none;} .op-hero-foot.op-intro-foot-hidden{transform:translateY(0)!important;} .op-hero-foot.op-intro-foot-rise{animation:op-foot-rise .75s cubic-bezier(.2,.9,.3,1) both;} @keyframes op-foot-rise{from{transform:translateY(0);}to{transform:translateY(-100%);}} @media (prefers-reduced-motion: reduce){ .op-hero-word.op-intro-word-pre,.op-hero-word.op-intro-word-fly{animation:none!important;opacity:1!important;transform:none!important;} .op-hero-top.op-intro-fade-hidden{opacity:1!important;} .op-hero-foot.op-intro-foot-hidden{transform:translateY(-100%)!important;} } .op-after{position:relative;z-index:3;background:var(--paper);} .op-after-content{position:relative;z-index:2;background:var(--paper);} /* transparent scroll region that reveals the fixed carousel background */ .op-carousel-gap{position:relative;z-index:0;height:100vh;height:100svh;pointer-events:none;background:transparent;scroll-snap-align:start;} .op-hero-top{position:absolute;top:0;right:0;z-index:6;padding:28px 40px;} .op-hero-studio{font-family:var(--grot);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85);background:none;border:1px solid rgba(255,255,255,.34);padding:9px 16px;border-radius:40px;transition:.25s;} .op-hero-studio:hover{background:#fff;color:#000;border-color:#fff;} .op-hero-foot{position:absolute;left:0;right:0;top:100vh;top:100svh;transform:translateY(-100%);z-index:2;min-height:var(--nav-h);display:flex;align-items:center;gap:24px;padding:20px 40px 20px 48px;background:#ffffff;color:var(--ink);} .op-hero-tag{font-family:var(--serif);font-style:italic;font-size:18px;flex:1;min-width:0;} /* yellow SPECIAL GALLERY oval — rides on the hero foot bar, floats above it, appears ~.5s after the bar */ /* SPECIAL GALLERY hazard bar — zips in from the right ~.5s after the nav bar lands, full width, rides on top of the hero foot; click anywhere to open the gallery */ .op-special-bar{position:absolute;left:0;right:0;bottom:100%;height:30px;overflow:hidden;border:none;padding:0;cursor:pointer;background:none;visibility:hidden;pointer-events:none;} .op-special-bar.in{visibility:visible;pointer-events:auto;} /* One moving unit: stripes + label live on repeated full-width segments (band and label are physically the same object). An outer SLIDE gives the fast decelerating entrance once; the inner TRACK marquees forever at constant speed — as one segment's label exits right, the next identical segment enters from the left (seamless). */ .op-special-bar-slide{position:absolute;top:0;left:0;width:100%;height:100%;transform:translateX(-100%);} .op-special-bar.in .op-special-bar-slide{animation:op-bar-in 1.4s cubic-bezier(.1,.7,.75,.94) .5s forwards;} @keyframes op-bar-in{from{transform:translateX(-100%);}to{transform:translateX(0);}} .op-special-bar-track{position:absolute;top:0;left:0;width:200%;height:100%;display:flex;transform:translateX(-50%);background:repeating-linear-gradient(-45deg,#f6c916 0 17px,#111 17px 34px);} .op-special-bar.in .op-special-bar-track{animation:op-bar-loop 6s linear .5s infinite;} @keyframes op-bar-loop{from{transform:translateX(-50%);}to{transform:translateX(0);}} .op-special-bar-seg{flex:0 0 50%;height:100%;display:flex;align-items:center;justify-content:flex-end;} .op-special-bar-label{display:flex;align-items:center;gap:8px;height:100%;background:#f6c916;padding:0 40px;} .op-special-bar-k,.op-special-bar-n{font-family:var(--grot);font-weight:700;font-size:27px;letter-spacing:.04em;text-transform:uppercase;color:#111;white-space:nowrap;line-height:1;} @media (prefers-reduced-motion: reduce){.op-special-bar.in .op-special-bar-slide{animation:none;transform:translateX(0);}.op-special-bar.in .op-special-bar-track{animation:none;}} .op-hero-nav{display:flex;gap:30px;} .op-hero-nav a{font-family:var(--grot);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;position:relative;padding:7px 13px;border-radius:0;white-space:nowrap;transition:color .2s,background .2s;} .op-hero-nav a:hover{color:var(--orange);} .op-social{display:flex;align-items:center;gap:56px;margin-left:60px;} .op-social a{display:flex;color:var(--ink);opacity:.78;transition:color .2s,opacity .2s,transform .2s;} .op-social a:hover{color:var(--orange);opacity:1;transform:translateY(-2px);} .op-hero-lang{flex:1;min-width:0;display:flex;justify-content:flex-end;} /* desktop: align both bars to the content grid — first nav link at the left block's left edge, social icons at the right block's left edge (same tracks as the sections) */ @media(min-width:1100.98px){ header.op-nav, div.op-hero-foot{gap:0;} .op-nav > .op-nav-brand, .op-hero-foot > .op-hero-tag{flex:0 0 var(--pf-w, 540px);} .op-nav > .op-hero-nav, .op-hero-foot > .op-hero-nav{flex:0 0 480px;display:flex;gap:30px;} .op-nav > .op-hero-nav a, .op-hero-foot > .op-hero-nav a{justify-self:auto;margin-left:0;} .op-nav > .op-hero-nav a:first-child, .op-hero-foot > .op-hero-nav a:first-child{margin-left:-13px;} /* social block: first icon aligns with the LEFT edge of the second text column in ABOUT / CONTACT (track = --pf-w + 35 + --blk-w + --blk-gap). Because the brand (--pf-w) + nav links (480) + nav padding (48) precede it, the --pf-w cancels and the needed offset is blk-w + blk-gap - 493. max() keeps narrow desktops from pulling social left into the nav links (falls back to the old 96px). */ /* DEFAULT: icons live in the flex row and compress — safe at any width and before JS has measured anything. The grid-aligned absolute placement is opt-IN: setX adds html.op-social-grid only once it has actually written a collision-free x. */ .op-nav > .op-social, .op-hero-foot > .op-social{margin-left:clamp(16px,2.5vw,40px);gap:clamp(16px,2.6vw,40px);flex:0 1 auto;min-width:0;display:flex;align-items:center;} .op-nav > .op-hero-nav, .op-hero-foot > .op-hero-nav{flex:0 1 auto;} html.op-social-grid .op-nav > .op-social, html.op-social-grid .op-hero-foot > .op-social{position:absolute;top:0;bottom:0;left:var(--op-social-x);margin-left:0;gap:56px;flex:0 0 auto;} html.op-social-grid .op-nav > .op-hero-nav, html.op-social-grid .op-hero-foot > .op-hero-nav{flex:0 0 480px;} /* FLOW mode only: the switcher must keep its intrinsic width (as flex:1/min-width:0 it collapses to 0 and its right-aligned label overflows back across the icons). The shortfall is absorbed by the links and the icon gaps instead. */ /* FLOW mode. The real cause of the collision: the LEFT slot is a fixed, non-shrinking 540px track and the links overflow their own 480px basis (~543px) — together they eat the row before the icons get any space. So in flow mode the left slot becomes the shrinking one (it's a tagline / wordmark: clipping it is harmless), while links, icons and the switcher all keep their intrinsic width and can never overlap. */ html:not(.op-social-grid) .op-nav > .op-nav-brand, html:not(.op-social-grid) .op-hero-foot > .op-hero-tag{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} html:not(.op-social-grid) .op-nav > .op-hero-nav, html:not(.op-social-grid) .op-hero-foot > .op-hero-nav{flex:0 0 auto;min-width:0;gap:clamp(4px,1vw,30px);} html:not(.op-social-grid) .op-nav > .op-hero-nav a, html:not(.op-social-grid) .op-hero-foot > .op-hero-nav a{padding:7px clamp(5px,.8vw,13px);letter-spacing:clamp(.06em,.6vw,.16em);margin-left:0;} html:not(.op-social-grid) .op-nav > .op-hero-nav a:first-child, html:not(.op-social-grid) .op-hero-foot > .op-hero-nav a:first-child{margin-left:0;} html:not(.op-social-grid) .op-nav > .op-social, html:not(.op-social-grid) .op-hero-foot > .op-social{flex:0 0 auto;min-width:0;gap:clamp(10px,1.2vw,22px);margin-left:clamp(30px,4vw,52px);} html:not(.op-social-grid) .op-nav > .op-social a svg, html:not(.op-social-grid) .op-hero-foot > .op-social a svg{width:16px;height:16px;} html:not(.op-social-grid) .op-nav > .op-hero-lang, html:not(.op-social-grid) .op-hero-foot > .op-hero-lang{flex:0 0 auto;min-width:max-content;margin-left:clamp(30px,4vw,52px);} /* No dividers. The three groups are told apart by RHYTHM alone: links inside a group sit close, and the space between groups is roughly three times that gap — the standard way a dense bar stays readable without extra ink. Social icons also lose a little size so the icon run reads as one object rather than three separate links. */ html.op-social-grid .op-nav > .op-hero-lang, html.op-social-grid .op-hero-foot > .op-hero-lang{margin-left:clamp(26px,3vw,40px);} /* Section links stay tight to each other so they read as one group against the wider gaps that follow. */ html:not(.op-social-grid) .op-nav > .op-hero-nav, html:not(.op-social-grid) .op-hero-foot > .op-hero-nav{gap:clamp(2px,.6vw,14px);} } /* ============ STICKY NAV ============ */ /* Sticky nav mirrors the hero footer bar EXACTLY (same layout, links, social, lang) so the handoff at the top is seamless — nothing shifts or disappears. The only difference: the left slot is the orange "Leo Martins" wordmark instead of the italic tagline. */ .op-nav{position:fixed;top:0;left:0;right:0;z-index:50;min-height:var(--nav-h);display:flex;align-items:center;gap:24px;padding:20px 40px 20px 48px;background:#ffffff;color:var(--ink);border-bottom:1px solid var(--line);visibility:hidden;} /* No slide-in: the nav simply appears in place exactly where the (identical) hero footer bar sits, so it just touches the top and stays — no jump. */ .op-nav.show{visibility:visible;} /* while the blog reader overlay is open, keep the nav clickable above it */ body.blog-reader-open .op-nav{z-index:210;} .op-nav-brand{flex:1;min-width:0;font-family:var(--disp);font-weight:700;font-size:30px;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--orange);letter-spacing:.01em;cursor:pointer;} /* active-section link: filled orange box, black text */ .op-hero-nav a.on{color:#000;background:var(--orange);} .op-hero-nav a.on:hover{color:#000;} /* ============ SECTIONS ============ */ .sec{max-width:1480px;margin:0 auto;padding:0 56px;} .sec-head{display:flex;flex-direction:column;gap:24px;margin-left:min(0px, calc(50% - 50vw + 56px));} .sec-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.02;margin:0;font-size:clamp(44px,7.2vw,118px);letter-spacing:.005em;} /* ============ WORK ============ */ .op-work{padding-top:calc(var(--nav-h) + 28px);height:100svh;min-height:600px;display:flex;flex-direction:column;position:relative;z-index:2;scroll-snap-align:start;} .op-tabs{display:flex;flex-wrap:wrap;gap:14px 36px;margin:56px 0 76px;border-top:1px solid var(--line);padding-top:26px;} .op-tab{background:none;border:none;padding:4px 0;font-family:var(--grot);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);position:relative;transition:color .2s;} .op-tab sup{font-size:10px;color:var(--orange);margin-left:6px;font-weight:700;} .op-tab:hover{color:var(--ink);} .op-tab.on{color:var(--ink);} .op-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--orange);} .op-rail-wrap{--railh:clamp(330px,58vh,640px);position:relative;margin-top:6px;} .op-rail{display:flex;gap:30px;overflow-x:auto;overflow-y:hidden;padding:2px 0 30px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;user-select:none;} .op-rail::-webkit-scrollbar{display:none;} .op-rail.drag{cursor:grabbing;scroll-snap-type:none;} .op-rph{flex:0 0 auto;scroll-snap-align:start;cursor:zoom-in;} .op-rph-imgwrap{height:var(--railh);overflow:hidden;background:#f2f1ee;} .op-rph-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1);} .op-rph:hover .op-rph-img{transform:scale(1.045);} .op-rph-cap{display:flex;flex-direction:column;gap:4px;margin-top:16px;max-width:340px;} .op-rph-num{font-family:var(--grot);font-size:11px;color:var(--orange);font-weight:700;letter-spacing:.08em;} .op-rph-name{font-family:var(--grot);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;} .op-rph-role{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--muted);} .op-rail-arrow{position:absolute;top:calc(var(--railh) / 2);transform:translateY(-50%);width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;z-index:3;box-shadow:0 8px 30px rgba(0,0,0,.12);transition:opacity .25s ease,background .2s,color .2s;} .op-rail-arrow.left{left:-4px;} .op-rail-arrow.right{right:-4px;} .op-rail-arrow:hover{background:var(--orange);color:#000;border-color:var(--orange);} .op-rail-arrow.hide{opacity:0;pointer-events:none;} .op-rail-track{position:relative;height:2px;background:var(--line);margin-top:2px;overflow:hidden;} .op-rail-bar{position:absolute;top:0;height:100%;background:var(--orange);transition:left .1s linear,width .1s linear;} .op-empty{padding:70px 0;text-align:center;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:21px;} /* ---- portfolio: full-viewport section. PORTFOLIO title top-left, a vertical infinite grid spanning the word's width below it, the focus image centred, rail at far right ---- */ .op-work-head{margin-bottom:0;} /* animated head swap (PORTFOLIO ⇄ special gallery name; kicker zip) */ .op-work-title-anim{overflow:hidden;} .op-work-title-inner{display:inline-block;will-change:transform;} .op-work-title-anim.swap-out .op-work-title-inner{animation:op-title-up-out .38s cubic-bezier(.6,0,.35,1) forwards;} .op-work-title-anim.swap-in .op-work-title-inner{animation:op-title-up-in .5s cubic-bezier(.2,.85,.3,1);} @keyframes op-title-up-out{to{transform:translateY(-112%);opacity:0;}} @keyframes op-title-up-in{from{transform:translateY(112%);opacity:0;}to{transform:translateY(0);opacity:1;}} .op-work-kicker span{display:inline-block;will-change:transform;} .op-work-kicker.swap-out span{animation:op-kick-out .32s cubic-bezier(.6,0,.35,1) forwards;} .op-work-kicker.swap-in span{animation:op-kick-in .46s cubic-bezier(.2,.85,.3,1);} @keyframes op-kick-out{to{transform:translateX(-125%);opacity:0;}} @keyframes op-kick-in{from{transform:translateX(-125%);opacity:0;}to{transform:translateX(0);opacity:1;}} .op-work-title{display:inline-block;width:max-content;max-width:100%;} .op-work-stage{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:var(--pf-w,600px) auto clamp(200px,18vw,280px);gap:clamp(28px,4vw,80px);align-items:stretch;margin-top:clamp(20px,3vh,44px);margin-bottom:0;margin-left:min(0px, calc(50% - 50vw + 56px));width:calc(100vw - 112px - var(--sbw,0px));} .op-focus-rail{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;text-align:right;gap:26px;} .op-focus-meta{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-height:clamp(120px,13.5vh,148px);} .op-focus-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.05;font-size:clamp(16px,1.5vw,23px);color:var(--ink);text-wrap:balance;} .op-focus-role{font-family:var(--serif);font-style:italic;font-size:clamp(13px,1.15vw,17px);color:var(--muted);line-height:1.35;} .op-focus-func{font-family:var(--grot);font-size:clamp(11px,0.95vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.3;} .op-focus-nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;} /* pinned to the bottom of the (fixed min-height) meta block so it never pushes the SHARE/nav row down. Same visual language as "ler tudo"/"ver mais" (.op-post-more): full-orange underlined grotesk + arrow that slides on hover */ .op-focus-alsoblog{position:absolute;bottom:0;right:0;width:148px;appearance:none;background:none;border:none;cursor:pointer;font-family:var(--grot);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--orange);padding:0 0 4px;border-bottom:1px solid var(--orange);display:inline-flex;align-items:center;justify-content:space-between;white-space:nowrap;transition:border-color .25s;} .op-focus-alsoblog .op-more-arrow{flex:none;display:block;color:var(--ink,#111);transition:transform .2s;} .op-focus-alsoblog:hover{border-bottom-color:var(--ink,#111);} .op-focus-alsoblog:hover .op-more-arrow{transform:translateX(5px);} /* German label ("ZU SEHEN IN BLOG") runs slightly wide for the 148px underline — tighten the spacing a touch (font-size unchanged) and shorten the arrow's shaft (its head stays full-size) so text + arrow fit exactly. */ .op-focus-alsoblog.is-de{letter-spacing:.12em;} /* "+ blog + pages" links — each individually underlined, orange, spread across the full 148px line (= the three nav balls). When only one applies it aligns right. */ .op-focus-morein{position:absolute;bottom:0;right:0;width:148px;display:flex;align-items:baseline;justify-content:flex-end;gap:16px;} .op-focus-morein.two{justify-content:space-between;} .op-focus-morein .mi-link{appearance:none;background:none;border:none;padding:0 0 3px;margin:0;font-family:var(--grot);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--orange);border-bottom:1px solid var(--orange);cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;} .op-focus-morein .mi-link:hover{color:var(--ink);border-bottom-color:var(--ink);} /* white pill search bar, aligned exactly below the 3 balls (3×40 + 2×14 gap = 148px) */ .op-focus-search{width:148px;margin-top:16px;position:relative;} .op-focus-search input{width:100%;height:40px;box-sizing:border-box;border-radius:20px;border:1px solid rgba(10,10,10,.35);background:#fff;padding:0 20px;font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#111);outline:none;transition:border-color .2s;} .op-focus-search.has-val input{padding-right:38px;} .op-focus-search input:focus{border-color:var(--ink,#111);} /* hide the browser's native search clear so we show only our own X */ .op-focus-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;} .op-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;background:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(10,10,10,.55);transition:color .15s,background .15s;} .op-search-clear:hover{color:var(--ink,#111);background:rgba(10,10,10,.07);} /* "BLOG" return pill in the blog solo overlay — same shape/size/slot as the search bar, linear white (outline + text) for the dark overlay background */ .op-focus-backblog{width:100%;height:40px;box-sizing:border-box;border-radius:20px;border:1px solid rgba(255,255,255,.55);background:none;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;cursor:pointer;font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s ease,background .2s ease;} .op-focus-backblog:hover{border-color:#fff;background:rgba(255,255,255,.08);} .op-focus-search input::placeholder{color:var(--muted);font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:1;} /* light bg: arrows are filled black circles with white glyphs (inverted) */ .op-focus-arrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink,#111);background:var(--ink,#111);color:var(--paper,#fff);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s;} .op-focus-arrow:hover{background:transparent;color:var(--ink,#111);} .op-focus-arrow:active{transform:scale(.9);} /* share button: outline style like BLOG, but black lines */ .op-focus-arrow.op-focus-share{background:transparent;border-color:rgba(10,10,10,.35);color:rgba(10,10,10,.35);} .op-focus-arrow.op-focus-share:hover{background:var(--ink,#111);color:var(--paper,#fff);} .op-focus-fig{margin:0;min-width:0;min-height:0;height:100%;display:flex;align-items:flex-start;justify-content:center;} /* minimum bottom margin of the focus pic == nav bar height (76px), in normal + solo (dark) PORTFOLIO views and the BLOG solo overlay (all share this element) */ .op-focus-imgbtn{position:relative;padding:0;border:none;background:none;cursor:default;display:flex;align-items:flex-start;justify-content:center;height:calc((100% - var(--chooser-h)) * var(--fhf,1));width:var(--fbw,auto);aspect-ratio:var(--fr,0.8);max-width:none;flex:0 0 auto;} /* the full-res layer sits exactly over the medium one and fades in over ~.6s */ .op-focus-img-hi{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;animation:opFocusHi .8s cubic-bezier(.4,0,.2,1) both;} @keyframes opFocusHi{from{opacity:0}to{opacity:1}} /* Height is measured against the BAND, width follows the photo's own ratio — so a vertical photo reaches the band's bottom edge no matter how wide the column happens to be. */ /* The BOX carries the geometry (band-derived height x the photo's ratio), so the picture simply fills it — a vertical photo therefore always reaches the band's bottom edge, whatever the column happens to be. */ .op-focus-img{display:block;object-fit:contain;object-position:top center;width:100%;height:100%;filter:blur(0);transition:filter .2s cubic-bezier(.2,.7,.2,1);} /* WORK "solo" view — index/title + grid hidden but their SPACE is preserved, so the focus pic stays in exactly the same position and size as normal mode */ .op-work-solo .op-work-head{visibility:hidden;} .op-work-solo .op-grid-col{visibility:hidden;} /* full-viewport black backdrop (also covers the scrollbar gutter, so the fixed carousel can't leak through). The solo section is lifted above its sibling sections (BLOG/CONTACT) but stays below the fixed nav bar (z-index 50), so no other section's title can bleed through; the pic + rail ride on top. */ .op-work-solo{z-index:40;} /* PORTFOLIO solo layout reused as a fixed overlay (from a blog entry). The fixed wrapper matches the page CONTENT box (viewport minus the scrollbar) so the inner .sec.op-work keeps its exact normal box model — the stage's full-bleed math (50%/100vw/--sbw) then resolves identically, placing image + rail pixel-for-pixel like WORK solo. Above the blog reader (200), below the sticky nav (210). */ .op-solo-overlay{position:fixed;top:0;left:0;bottom:0;width:calc(100vw - var(--sbw,0px));z-index:205;} .op-work-solo::before{content:"";position:fixed;inset:0;background:#201f1d;opacity:1;z-index:0;} .op-work-solo > *{position:relative;z-index:1;} /* subtitles + navigation go white against the black */ .op-work-solo .op-focus-name{color:#fff;} .op-work-solo .op-focus-func{color:rgba(255,255,255,.85);} .op-work-solo .op-focus-role{color:rgba(255,255,255,.6);} .op-work-solo .op-focus-count{color:rgba(255,255,255,.7);} /* solo/dark bg — invert everything: arrows are white circles with black glyphs */ .op-work-solo .op-focus-arrow{background:#fff;border-color:#fff;color:#000;} .op-work-solo .op-focus-arrow:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);} .op-work-solo .op-focus-arrow.op-focus-share{background:transparent;border-color:rgba(255,255,255,.7);color:#fff;} .op-work-solo .op-focus-arrow.op-focus-share:hover{background:#fff;border-color:#fff;color:#000;} .op-work-solo .op-focus-alsoblog .op-more-arrow{color:#fff;} .op-work-solo .op-focus-alsoblog:hover{border-bottom-color:#fff;} .op-focus-img.is-loading{filter:blur(12px);} @media (prefers-reduced-motion: reduce){.op-focus-img,.op-focus-img.is-loading{transition:none;filter:blur(0);}.op-focus-img-hi{animation:none;}} @media (max-width:860px){ .op-work{min-height:auto;height:auto;} .op-work-stage{grid-template-columns:1fr;width:auto;margin-left:0;gap:18px;} .op-focus-fig{height:auto;order:-1;} .op-focus-imgbtn{height:auto;aspect-ratio:auto;max-width:100%;} .op-focus-img{width:auto !important;height:auto !important;max-width:100%;max-height:52vh;} .op-focus-rail{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;text-align:left;gap:12px;} .op-focus-meta{align-items:flex-start;} } /* ---- portfolio frame: infinite 2-D draggable field of centre-cropped squares ---- */ .op-gridframe{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;overflow:hidden;background:transparent;cursor:grab;touch-action:none;user-select:none;perspective:1200px;} .op-grid-col{position:relative;min-width:0;} /* when the gallery chooser is present the grid is shortened by one nav-bar height (76px) so its bottom rests level with the minimum bottom margin of the vertical focus pic; the freed 76px band below holds the chooser pill. */ .op-grid-col.has-chooser .op-gridframe{height:calc(100% - var(--chooser-h));} /* ---- gallery chooser (static pill; no slide animation) ---- */ .op-gallery-chooser{position:absolute;left:0;right:0;bottom:0;height:76px;z-index:6;pointer-events:none;transition:bottom .55s cubic-bezier(.22,1,.36,1);} .op-gallery-pillwrap{position:absolute;bottom:18px;right:calc(100% - var(--pf-w));pointer-events:auto;} .op-gallery-pill{position:relative;z-index:2;height:40px;box-sizing:border-box;border-radius:20px;border:2px solid transparent;background:var(--ink,#111);color:var(--paper,#fff);display:inline-flex;align-items:center;gap:12px;padding:0 22px;font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s;} .op-gallery-pill:hover{background:var(--orange);color:#000;border-color:transparent;} .op-gallery-chooser.toggle.special-on .op-gallery-pill{background:var(--orange);color:#000;} .op-gallery-pill-more{opacity:.7;padding-left:12px;border-left:1px solid currentColor;font-weight:500;letter-spacing:0;font-size:20px;line-height:1;} /* list — hidden until open; no slide, just a quick fade */ .op-gallery-list{position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;} .op-gallery-chooser.open .op-gallery-list{opacity:1;visibility:visible;pointer-events:auto;} .op-gallery-list-inner{display:flex;} .op-gallery-opt{background:none;border:none;padding:0;font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#595959;cursor:pointer;white-space:nowrap;transition:color .2s;} .op-gallery-opt:hover{color:var(--orange);} /* ALL / portfolio mode: list expands RIGHT of the pill, text separated by "|" */ .op-gallery-chooser.mode-right .op-gallery-list{left:100%;bottom:0;margin-left:16px;} .op-gallery-chooser.mode-right .op-gallery-list-inner{display:flex;align-items:center;flex-wrap:nowrap;} .op-gallery-chooser.mode-right .op-gallery-opt{line-height:40px;padding:0 14px;} .op-gallery-chooser.mode-right .op-gallery-opt:first-child{padding-left:0;} .op-gallery-chooser.mode-right .op-gallery-opt:not(:first-child){border-left:1px solid rgba(10,10,10,.28);} /* selected-gallery mode: list DROPS below, right-aligned to pill's right edge */ .op-gallery-chooser.mode-down .op-gallery-list{top:100%;right:0;margin-top:14px;} .op-gallery-chooser.mode-down .op-gallery-list-inner{flex-direction:column;align-items:flex-end;gap:18px;text-align:right;} .op-sq.sel{outline:3px solid var(--orange);outline-offset:-3px;z-index:2;} .op-gridframe:active{cursor:grabbing;} .op-grid-plane{position:absolute;top:0;left:0;will-change:transform;transform-style:preserve-3d;} .op-sq{position:absolute;padding:0;border:none;background-color:#ededed;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:inherit;overflow:hidden;will-change:transform;backface-visibility:hidden;} .op-sq::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,0);transition:background .3s ease;} .op-gridframe:not(:active) .op-sq:hover::after{background:rgba(10,10,10,.18);} /* ---- static search grid: frozen, each result once, same cell size, same area ---- */ .op-gridframe-static{cursor:default;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;} .op-gridframe-static::-webkit-scrollbar{display:none;} .op-grid-static{display:grid;justify-content:start;align-content:start;} .op-sq-cell{box-sizing:border-box;} .op-sq-static{position:relative;top:auto;left:auto;width:100%;height:100%;padding:0;border:none;background-color:#ededed;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer;overflow:hidden;} .op-sq-static::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,0);transition:background .3s ease;} .op-sq-static:hover::after{background:rgba(10,10,10,.18);} .op-sq-static.sel{outline:3px solid var(--orange);outline-offset:-3px;z-index:2;} /* ============ PARALLAX BAND (temporary exception: not a full-viewport section) ============ */ .op-band{position:relative;height:72vh;min-height:420px;overflow:hidden;margin-top:0;background:#111;} .op-band-inner{position:absolute;inset:-16% 0;will-change:transform;} .op-band-img{position:absolute;inset:0;} .op-band-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 38%,rgba(0,0,0,.3));} .op-band-loc{position:absolute;left:56px;bottom:36px;color:#fff;font-family:var(--grot);font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:12px;} .op-band-loc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;} /* ============ ABOUT ============ */ /* locked to EXACTLY one viewport (not less, not more) — like the BLOG section */ .op-about{position:relative;height:100svh;max-height:100svh;box-sizing:border-box;margin-top:0;padding-top:calc(var(--nav-h) + clamp(8px,3svh,28px));padding-bottom:clamp(28px,8svh,80px);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;} .op-about::before{content:"";position:absolute;top:0;bottom:0;left:calc(-50vw + 50%);width:100vw;background:#ff9900;z-index:0;} .op-about > *{position:relative;z-index:1;} .op-about .kicker{color:rgba(10,10,10,.62);} .op-about .kicker::after{background:rgba(10,10,10,.28);} .op-about .op-lead{color:var(--ink);} .op-about .op-about-body p{color:rgba(10,10,10,.74);} .op-about .btn-line{color:var(--ink);border-bottom-color:rgba(10,10,10,.4);} .op-about .btn-line svg{color:#fff;} .op-about .btn-line:hover{border-bottom-color:#fff;} .op-about .op-clients{margin-top:56px;border-top:1px solid rgba(10,10,10,.2);padding-top:26px;} .op-about .op-clients-h{color:rgba(10,10,10,.62);} .op-about .op-clients-list span{color:rgba(10,10,10,.82);} .op-about .op-about-fig{background:#2c2b28;} .op-about .op-about-figcap{color:rgba(10,10,10,.55);} .op-about .op-about-credit{color:rgba(10,10,10,.55);} .op-about-grid{display:grid;grid-template-columns:1.05fr .85fr;gap:110px;align-items:center;margin-top:0;width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));} /* two text columns matching the CONTACT grid tracks (same width + left offset) */ .op-about-cols{display:grid;grid-template-columns:var(--blk-w) var(--blk-w);justify-content:start;gap:var(--blk-gap);align-items:stretch;margin-top:28px;width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));padding-left:var(--pf-w, 540px);} .op-about-textcol{display:flex;flex-direction:column;gap:16px;min-height:452px;} .op-about-textcol p{font-size:15px;line-height:1.62;color:rgba(10,10,10,.78);margin:0;text-align:justify;hyphens:auto;} /* editorial: two content blocks aligned to CONTACT's two columns, with the portrait floating as an "eye" centred over the gutter between them */ .op-about-editorial{position:relative;--blk-gap:50px;--about-img-w:clamp(220px,19vw,320px);display:grid;grid-template-columns:var(--blk-w) var(--blk-w);justify-content:start;gap:var(--blk-gap);align-items:start;width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));padding-left:var(--pf-w, 540px);margin-top:0;} .op-about-col{display:block;max-width:none;} .op-about-col--l{justify-self:start;grid-column:1;grid-row:1;} .op-about-col--r{justify-self:start;grid-column:2;grid-row:1;} .op-about-col p{font-size:14px;line-height:1.62;color:rgba(10,10,10,.74);margin:0 0 13px;text-align:justify;hyphens:auto;} .op-about-col .btn-line{display:inline-flex;margin-top:8px;} .op-about-col .op-lead{color:var(--ink);} .op-lead--ghost{visibility:hidden;pointer-events:none;user-select:none;} /* float clearance boxes: reserve the centre region in each column so text wraps around the portrait */ .op-about-clear{width:calc(var(--about-img-w)/2 - var(--blk-gap)/2 + 28px);height:calc(var(--about-img-w) * 4 / 3 + 72px);} .op-about-clear--l{float:right;} .op-about-clear--r{float:left;} .op-about-centerpic{position:absolute;left:calc(var(--pf-w, 540px) + var(--blk-w) + var(--blk-gap)/2);top:50%;transform:translate(-50%,-50%);width:var(--about-img-w);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;} .op-about-centerpic .op-about-fig{width:100%;aspect-ratio:3/4;overflow:hidden;position:relative;background:#2c2b28;box-sizing:border-box;border:1px solid #404040;} .op-about-centerpic .op-about-credit{position:static;writing-mode:horizontal-tb;transform:none;font-family:var(--grot);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,10,.55);} /* full-width statement line above the two-column block, indented to the grid's right edge */ .op-about-lead{box-sizing:border-box;width:calc(var(--blk-w) * 2 + var(--blk-gap));max-width:none;margin:24px 0 .5em min(0px, calc(50% - 50vw + 56px));padding-left:0;} /* CTA dropped to the bottom of the ABOUT section so its gap to the section bottom equals the BLOG buttons' gap to the viewport bottom (both = the 80px section padding-bottom). margin-top:auto absorbs the free space above it. */ .op-about-cta{width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));padding-left:var(--pf-w, 540px);margin-top:auto;} .op-lead{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.1;margin:.55em 0 .8em;text-wrap:balance;} .op-about-body{max-width:560px;} .op-about-body p{font-size:16.5px;line-height:1.7;color:rgba(10,10,10,.72);margin:0 0 20px;} .btn-line{display:inline-flex;align-items:center;gap:14px;font-family:var(--grot);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:7px;margin-top:10px;} .btn-line svg{color:var(--orange);} .btn-line:hover svg{transform:translateX(5px);transition:.2s;} .op-clients{margin-top:56px;border-top:1px solid var(--line);padding-top:26px;} .op-clients-h{font-family:var(--grot);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:18px;} .op-clients-list{display:flex;flex-wrap:wrap;gap:10px 28px;} .op-clients-list span{font-size:14px;font-weight:500;color:rgba(10,10,10,.78);} .op-about-figwrap{display:flex;align-items:flex-end;gap:14px;width:75%;margin-left:auto;} .op-about-fig{overflow:hidden;aspect-ratio:3/4;position:relative;background:#f2f1ee;flex:1;min-width:0;} .op-about-figinner{position:absolute;inset:0;will-change:transform;} .op-about-photo{position:absolute;inset:0;} .op-about-figcap{margin-top:14px;display:flex;justify-content:space-between;font-family:var(--grot);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);} .op-about-credit{flex:none;align-self:flex-end;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--grot);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;} /* ---- ABOUT v2: one-screen editorial profile. Header pinned top, CTA pinned bottom; the editorial spread (translatable about.* copy + the editable state.aboutPhoto) sits in the middle band, reflows by aspect ratio, and is JS-scaled via --ab2-s so the section fills EXACTLY one viewport at ANY resolution / aspect ratio — never scrolled, clipped, or left with a void. ---- */ .op-ab2-fit{flex:1 1 auto;min-height:0;display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden;width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));} /* columns share the BLOG/CONTACT track system: a left --pf-w zone (holding the small portrait, echoing the hero profile) + two --blk-w text columns, so the grid lines up vertically with the rest of the one-page site. */ .op-ab2-stage{--abimg-w:calc(clamp(158px,13vw,222px) * var(--abimg-scale,1));transform:translateX(var(--ab2-tx,0px)) scale(var(--ab2-s,1));transform-origin:left top;width:100%;margin-top:28px;display:grid;grid-template-columns:calc(var(--pf-w, 560px) - var(--blk-gap)) var(--blk-w) var(--blk-w);column-gap:var(--blk-gap);row-gap:clamp(18px,2.6vh,40px);justify-content:start;align-items:start;} /* two text columns keep their exact tracks; the portrait floats centered on the gutter between them, with float reserves in each column wrapping the text. */ .op-ab2-cols{grid-column:2 / 4;grid-row:2;position:relative;display:flex;gap:var(--blk-gap);align-items:flex-start;} .op-ab2-figure{position:absolute;left:50%;top:var(--abimg-figtop,0px);transform:translateX(-50%);z-index:2;margin:0;display:flex;flex-direction:column;gap:12px;width:var(--abimg-w);} .op-ab2-frame{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#2c2b28;box-sizing:border-box;border:1px solid #404040;} .op-ab2-photo{position:absolute;inset:0;} /* credit sits just OUTSIDE the picture's right edge, reading bottom-to-top, 50% grey */ .op-ab2-credit{position:absolute;left:100%;bottom:0;margin:0 0 0 2px;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;text-orientation:mixed;font-family:var(--grot);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.5);} .op-ab2-lead{grid-column:2 / 4;grid-row:1;margin:0;white-space:nowrap;} .op-ab2-col{flex:none;width:var(--blk-w);min-width:0;} /* invisible float reserves: each takes the half of the portrait that overlaps its column (plus a text gap), sized from the photo's ACTUAL width (--abimg-into) and vertically placed per-column (--abimg-mt1/2) by the JS measure step. */ .op-ab2-wrap{display:block;} .op-ab2-wrapL{float:right;width:calc(var(--abimg-into,80px) + 22px);height:var(--abimg-rh1,0px);shape-outside:inset(var(--abimg-top1,0px) 0px 0px 0px);} .op-ab2-wrapR{float:left;width:calc(var(--abimg-into,80px) + 22px);height:var(--abimg-rh2,0px);shape-outside:inset(var(--abimg-top2,0px) 0px 0px 0px);} .op-ab2-col p{font-size:16px;line-height:1.72;color:rgba(10,10,10,.8);margin:0 0 14px;text-align:justify;hyphens:auto;} .op-ab2-col p:last-child{margin-bottom:0;} /* calligraphic drop-cap — uses initial-letter (NOT float) so it follows the inline contour of the photo-wrap (shape-outside) and sits flush-left in BOTH columns, baseline sunk to the 3rd line. font-size is the fallback for browsers without initial-letter (there it's a large inline cap rather than a competing float). */ .op-ab2-col p::first-letter{font-family:'Mea Culpa','Monsieur La Doulaise',cursive;font-style:normal;font-weight:400;color:var(--ink);font-size:3.3em;line-height:1;-webkit-initial-letter:3;initial-letter:3;margin-right:.14em;} /* no calligraphic capitular for CJK — the scripts don't suit a drop-cap */ html:lang(zh) .op-ab2-col p::first-letter, html:lang(ja) .op-ab2-col p::first-letter{font-family:inherit;font-size:inherit;line-height:inherit;-webkit-initial-letter:normal;initial-letter:normal;margin-right:0;} .op-ab2-foot{flex:0 0 auto;display:flex;justify-content:flex-end;border-top:1px solid rgba(10,10,10,.24);padding-top:26px;width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));} .op-ab2-foot .btn-line{margin-top:0;} /* Stacking is for PORTRAIT-ish screens only (full mobile revamp pending → portrait on top, then lead + stacked copy). A short LANDSCAPE window is narrow in px but wide in shape: stacking it there made the spread one tall column that no amount of widening can shorten, so the fit scale bottomed out and the closing copy was clipped. Landscape keeps the two-column spread at any width and reflows by scale instead. */ @media(max-width:1100.98px) and (max-aspect-ratio:13/10){ .op-ab2-fit,.op-ab2-foot{width:auto;margin-left:0;} .op-ab2-foot{justify-content:flex-start;} .op-ab2-stage{grid-template-columns:1fr;row-gap:clamp(18px,2.6vh,30px);width:auto;margin-left:0;} .op-ab2-cols{grid-column:1;flex-direction:column;gap:clamp(18px,2.6vh,30px);} .op-ab2-col{width:auto;} .op-ab2-wrap{display:none;} .op-ab2-figure{position:relative;transform:none;left:auto;top:auto;width:clamp(140px,38vw,190px);order:-1;} .op-ab2-lead{grid-column:1;max-width:none;} } /* ============ PAGES (published pages featuring Leo's pictures) ============ */ /* white background, locked to EXACTLY one viewport like BLOG / ABOUT */ .op-pages{position:relative;min-height:100svh;max-height:100svh;box-sizing:border-box;margin-top:0;padding-top:104px;padding-bottom:80px;color:var(--ink);display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;} .op-pages::before{content:"";position:absolute;top:0;bottom:0;left:calc(-50vw + 50%);width:100vw;background:#e6e6e6;z-index:0;} .op-pages > *{position:relative;z-index:1;} .op-pages-fit{flex:1 1 auto;min-height:0;position:relative;overflow:visible;} .op-pages-row{position:absolute;left:calc(-50vw + 50%);bottom:0;width:100vw;height:100%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;} .op-pages-row:active{cursor:grabbing;} .op-pages-track{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;will-change:transform;} .op-pages-tile{position:relative;flex:0 0 auto;padding:0;margin:0;border:0;background:none;transform-origin:bottom center;cursor:pointer;overflow:hidden;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .3s ease;} .op-pages-tile.is-focus{box-shadow:0 20px 55px rgba(0,0,0,.30);} /* entry links: real anchors (crawlable, open-in-new-tab) that must look exactly as the blocks they replaced */ .op-rph{color:inherit;text-decoration:none;} .op-rph-cap{display:block;} .op-blog-cover,.op-blog-nextitem,.op-blog-indexrow{color:inherit;text-decoration:none;} .op-blog-cover:hover,.op-blog-nextitem:hover,.op-blog-indexrow:hover{color:inherit;} .op-pages-img{position:relative;display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;pointer-events:none;} /* full-res layer over the medium one, faded in so the upgrade is never a visible flip */ .op-pages-img-hi{position:absolute;inset:0;background-repeat:no-repeat;animation:opPagesHi .8s cubic-bezier(.4,0,.2,1) both;} @keyframes opPagesHi{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion: reduce){.op-pages-img-hi{animation:none;}} /* subtitle rail — full-bleed content box mirroring the PORTFOLIO work-stage grid, so the rail lands in the SAME right-hand column / on-screen slot as the focus-pic rail. Overlay is click-through except the rail itself, so the strip stays draggable. */ .op-pages-cap{position:absolute;top:0;left:calc(-50vw + 50% + 56px);width:calc(100vw - 112px - var(--sbw,0px));display:grid;grid-template-columns:var(--pf-w,600px) minmax(0,1fr) clamp(200px,18vw,280px);gap:clamp(28px,4vw,80px);pointer-events:none;z-index:500;} .op-pages-cap .op-pages-rail{grid-column:3;pointer-events:auto;} /* ============ BLOG (journal) ============ */ .op-blog{position:relative;min-height:100svh;max-height:100svh;box-sizing:border-box;margin-top:0;padding-top:calc(var(--nav-h) + 28px);padding-bottom:80px;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;} .op-blog::before{content:"";position:absolute;top:0;bottom:0;left:calc(-50vw + 50%);width:100vw;background:#201f1d;z-index:0;} .op-blog > *{position:relative;z-index:1;} .op-blog .kicker{color:rgba(255,255,255,.62);} .op-blog .kicker::after{background:rgba(255,255,255,.22);} .op-blog-list{margin-top:46px;display:flex;flex-direction:column;gap:0;width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));} /* two columns matching the CONTACT/ABOUT grid tracks (same width + left offset) */ .op-blog-grid{display:grid;grid-template-columns:var(--blk-w) var(--blk-w);grid-template-rows:minmax(0,1fr);justify-content:start;gap:var(--blk-gap);align-items:stretch;flex:1 1 auto;min-height:0;margin-top:var(--sec-gap);width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));padding-left:var(--pf-w, 540px);} /* Column 1 — latest entry as a magazine cover */ .op-blog-latest{position:relative;display:flex;flex-direction:column;min-width:0;min-height:min(58vh,560px);} .op-blog-cover-wrap{position:relative;flex:1 1 auto;min-height:0;} .op-blog-morewrap-next{margin-top:auto;padding-top:18px;padding-bottom:72px;} .op-blog-cover{position:absolute;inset:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;background:#0d0b05;} .op-blog-cover-img,.op-blog-cover-noimg{position:absolute;inset:0;width:100%;height:100%;} .op-blog-cover-img{object-fit:cover;object-position:center;display:block;} .op-blog-cover-noimg{background:linear-gradient(135deg,#241f16,#0d0b05);} .op-blog-cover-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.14) 26%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.5) 74%,rgba(0,0,0,.86) 100%);} .op-blog-cover-share{position:absolute;top:20px;right:20px;z-index:3;color:#fff;} .op-blog-cover-top{position:absolute;left:0;right:0;top:0;padding:22px 28px 0;z-index:2;} .op-blog-cover-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 28px 46px;z-index:2;} .op-blog-cover-title{font-family:var(--disp);text-transform:uppercase;font-weight:700;line-height:1.02;font-size:clamp(30px,3.3vw,54px);margin:0;display:flex;flex-direction:column;text-shadow:0 2px 26px rgba(0,0,0,.55);text-wrap:balance;} .op-blog-cover-blurb{font-family:var(--serif);font-size:clamp(15px,1.4vw,19px);line-height:1.5;margin:0 0 16px;max-width:36ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 14px rgba(0,0,0,.7);} /* A blurb typed by hand in the Studio is shown in full — as many lines as it needs. */ .op-blog-cover-blurb.is-full{display:block;-webkit-line-clamp:unset;overflow:visible;} /* per-element cover colors (title / blurb / link are set independently in Studio) */ .op-blog-cover-title.tcol-white,.op-blog-cover-blurb.tcol-white{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55);} .op-blog-cover-title.tcol-orange,.op-blog-cover-blurb.tcol-orange{color:var(--orange);text-shadow:0 2px 22px rgba(0,0,0,.5);} .op-blog-cover-title.tcol-black,.op-blog-cover-blurb.tcol-black{color:#0a0a0a;text-shadow:none;} /* link black/white versions; arrow stays site-standard orange for contrast */ .op-blog-cover-more.lcol-white{color:#fff;border-bottom-color:rgba(255,255,255,.5);} .op-blog-cover-more.lcol-black{color:#0a0a0a;border-bottom-color:rgba(10,10,10,.45);text-shadow:none;} .op-blog-cover-more.lcol-orange{color:var(--orange);border-bottom-color:rgba(255,153,0,.6);} .op-blog-cover-more .op-more-arrow path{stroke:var(--orange);} .op-blog-cover-more.lcol-orange .op-more-arrow path{stroke:#fff;} .op-blog-cover-more{cursor:pointer;} .op-blog-cover-more{appearance:none;font-family:var(--grot);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px;transition:color .25s,border-color .25s;} .op-blog-cover-more .op-more-arrow{flex:none;transition:transform .2s;} .op-blog-cover-more:hover{color:var(--orange);} .op-blog-cover-more:hover .op-more-arrow{transform:translateX(5px);} .op-blog-cover-more.lcol-white:hover,.op-blog-cover-more.lcol-black:hover{border-bottom-color:var(--orange);} .op-blog-cover-more.lcol-orange:hover{border-bottom-color:#fff;} /* Column 2 — journal index (matches the latest entry's type scale so the columns align) */ .op-blog-next{display:flex;flex-direction:column;min-width:0;} .op-blog-nextlist{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;min-width:0;} .op-blog-nextlist .op-blog-nextitem:first-child{border-top:0;padding-top:0;} .op-blog-nextitem{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid rgba(255,255,255,.16);padding:20px 0;cursor:pointer;color:inherit;font:inherit;transition:border-color .25s;} .op-blog-nextitem:last-child{border-bottom:1px solid rgba(255,255,255,.16);} .op-blog-nextitem.is-empty{cursor:default;opacity:.38;} .op-blog-next-date{display:block;font-family:var(--grot);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:14px;} .op-blog-nextitem.is-empty .op-blog-next-date{color:rgba(255,255,255,.42);} .op-blog-next-title{font-family:var(--disp);font-style:normal;font-weight:700;text-transform:uppercase;font-size:clamp(23px,2vw,32px);line-height:1.1;margin:0 0 .5em;color:var(--orange);} .op-blog-next-excerpt{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.62);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .op-blog-nextitem:not(.is-empty):hover{border-top-color:rgba(255,255,255,.4);} .op-blog-nextitem:not(.is-empty):hover .op-blog-next-title{color:var(--orange);} .op-post-meta{display:flex;justify-content:flex-end;padding-top:16px;padding-right:36px;} .op-post-date{font-family:var(--grot);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700;white-space:nowrap;} .op-post-body{max-width:1000px;} .op-post-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom, rgba(32,31,29,0), #201f1d 88%);pointer-events:none;} .op-blog-morewrap .op-post-more,.op-post-morewrap .op-post-more,.op-blog-postnav .op-post-more{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--grot);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;padding:0 0 4px;border-bottom:1px solid rgba(255,255,255,.4);transition:color .25s,border-color .25s;display:inline-flex;align-items:center;gap:12px;} .op-post-more .op-more-arrow{flex:none;display:block;transition:transform .2s;} .op-post-more:hover{border-color:var(--orange);} .op-post-more:hover .op-more-arrow{transform:translateX(5px);} /* full-entry overlay */ /* end-of-post invitation: matches the ABOUT/BLOG section buttons (.op-post-more) */ .op-blog-postnav{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px 48px;margin-top:54px;padding-top:30px;border-top:1px solid rgba(255,255,255,.16);} .op-blog-postnav-left{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;} .op-blog-postnav-cap{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,21px);color:rgba(255,255,255,.66);line-height:1.2;} .op-blog-postnav-end{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(255,255,255,.5);} .op-blog-postnav .op-post-more{margin-left:auto;} .op-blog-postnav .op-post-more .op-more-arrow{color:var(--orange);} .op-blog-postnav-left .op-post-more{margin-left:0;} .op-blog-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);display:flex;align-items:stretch;justify-content:center;padding:76px 4vw 0;overflow:hidden;overscroll-behavior:contain;} .op-blog-overlay-inner{position:relative;display:flex;flex-direction:column;background:#201f1d;color:#fff;width:100%;max-width:920px;max-height:none;overflow:hidden;} .op-blog-overlay-head{flex:none;position:relative;padding:40px clamp(26px,5vw,84px) 22px;border-bottom:1px solid rgba(255,255,255,.1);} .op-blog-overlay-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:34px clamp(26px,5vw,84px) 56px;} .op-blog-overlay-close{position:absolute;top:22px;right:24px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:16px;cursor:pointer;transition:background .25s,color .25s;} .op-blog-overlay-close:hover{background:#fff;color:#201f1d;} .op-blog-overlay-date{display:block;margin-bottom:14px;} .op-blog-overlay-title{margin:0;font-size:clamp(23px,2.6vw,38px);max-width:none;padding-right:48px;} /* opened blog entry (reader overlay, not the index) — title in orange */ .op-blog-overlay-inner:not(.op-blog-index-inner) .op-blog-overlay-title{color:var(--orange);padding-right:124px;} /* circular white share buttons (match the overlay close button) */ .op-share-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s,border-color .2s;} .op-share-btn:hover{background:#fff;color:#201f1d;border-color:#fff;} .op-share-btn.lg{width:42px;height:42px;} .op-blog-overlay-share{position:absolute;top:22px;right:74px;z-index:2;} /* entry title + share button share one row, button pinned to the line end */ .op-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} .op-titlerow-txt{flex:1 1 auto;min-width:0;} .op-titlerow .op-share-btn{margin-top:.15em;} /* "link copied" toast */ .op-share-toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:#0a0a0a;color:#fff;border:1px solid rgba(255,255,255,.28);padding:12px 24px;border-radius:30px;font-family:var(--grot);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;z-index:9999;box-shadow:0 10px 34px rgba(0,0,0,.45);animation:opShareToast .25s ease;} @keyframes opShareToast{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}} /* journal index search (inside the "see more" overlay) */ .op-blog-search-wrap{position:relative;display:flex;align-items:center;gap:12px;margin-top:22px;} .op-blog-search-ico{position:absolute;left:15px;width:17px;height:17px;color:rgba(255,255,255,.45);pointer-events:none;} .op-blog-search{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:8px;color:#fff;font-family:var(--grot);font-size:16px;letter-spacing:.01em;padding:12px 16px 12px 42px;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none;} .op-blog-search::-webkit-search-cancel-button{display:none;} .op-blog-search::placeholder{color:rgba(255,255,255,.42);} .op-blog-search:focus{border-color:var(--orange);background:rgba(255,255,255,.09);} .op-blog-search-clear{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:rgba(255,255,255,.7);font-size:12px;cursor:pointer;transition:background .2s,color .2s;} .op-blog-search-clear:hover{background:#fff;color:#201f1d;} .op-blog-search-count{flex:none;font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);min-width:42px;text-align:right;} .op-blog-noresults{padding:54px 0;text-align:center;color:rgba(255,255,255,.45);font-family:var(--serif);font-style:italic;font-size:20px;} /* full journal index overlay (reached via "see more") */ .op-blog-indexlist{display:flex;flex-direction:column;} .op-blog-indexrow{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,52px);align-items:start;width:100%;text-align:left;background:none;border:0;border-top:1px solid rgba(255,255,255,.14);padding:24px 0;cursor:pointer;color:inherit;font:inherit;transition:border-color .25s;} .op-blog-indexrow:first-child{border-top:0;} .op-blog-indexrow:last-child{border-bottom:1px solid rgba(255,255,255,.14);} .op-blog-indexrow:hover{border-top-color:rgba(255,255,255,.4);} .op-blog-indexrow:hover .op-blog-next-title{color:var(--orange);} .op-blog-indexrow .op-blog-next-date{margin-bottom:0;padding-top:.55em;} .op-blog-indexrow .op-blog-next-title{margin:0 0 .3em;} .op-blog-indexrow-main{min-width:0;} .op-blog-overlay .op-post-body{max-width:768px;margin-left:auto;margin-right:auto;} .op-blog-overlay .op-post-text{max-width:none;margin:0;} .op-blog-overlay .op-post-text p{max-width:none;} /* desktop: open the article over the two columns, slightly wider than them */ @media(min-width:1100.98px){ /* Shift the whole window left so that, with its normal balanced inner padding, the first text line still starts exactly at the nav link ("Sobre"). The clamp() here matches the head/scroll inner padding, so it cancels out and the line start always resolves to --pf-w + 35px (= "Sobre") at every screen width. */ .op-blog-overlay{justify-content:flex-start;align-items:stretch;padding-top:76px;padding-bottom:0;padding-right:56px;padding-left:calc(var(--pf-w) + 35px - clamp(26px,5vw,84px));} .op-blog-overlay-inner{max-width:calc(2 * var(--blk-w) + var(--blk-gap) + 88px);margin:0;} /* article column stays centered at the reading measure */ .op-blog-overlay .op-post-body{margin-left:auto;margin-right:auto;} } .op-post-title{font-family:var(--disp);font-style:normal;font-weight:700;text-transform:uppercase;font-size:clamp(26px,3vw,42px);line-height:1.08;margin:0 0 .6em;color:#fff;text-wrap:balance;max-width:760px;} .op-post-text p{font-family:var(--serif);font-size:20px;line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 18px;max-width:660px;text-align:justify;-webkit-hyphens:auto;hyphens:auto;} /* image blocks — every image is shown WHOLE (never cropped) and capped by both a width and a height band. Bands are fluid: clamp(floor, viewport-relative, ceiling), so heights track the viewport (an image never dominates the screen) while px floors/ceilings keep them sane on tiny phones and huge monitors. */ .op-post-img{display:block;position:relative;max-width:100%;overflow:visible;background:none;cursor:default;} .op-post-img-el{display:block;width:100%;height:auto;object-fit:contain;} /* blog post images: no crop, no hover zoom/animation (per brief) */ .op-post-img:hover .op-post-img-el{transform:none;} /* hover tooltip: Name / Function / Year */ .op-post-imgmeta{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px;padding:11px 14px;background:rgba(10,10,10,.82);color:#fff;opacity:0;transition:opacity .18s ease;pointer-events:none;max-width:100%;box-sizing:border-box;} .op-post-img:hover .op-post-imgmeta{opacity:1;} .op-post-imgmeta-name{font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;} .op-post-imgmeta-func{font-family:var(--serif);font-style:italic;font-size:13px;color:rgba(255,255,255,.82);} .op-post-imgmeta-year{font-family:var(--grot);font-size:10.5px;letter-spacing:.18em;color:var(--orange);font-weight:700;} @media (prefers-reduced-motion: reduce){.op-post-imgmeta{transition:none;}} .op-post-img.pos-left{float:left;clear:left;margin:0 38px 22px 0;} .op-post-img.pos-right{float:right;clear:right;margin:0 0 22px 38px;} .op-post-img.pos-bl{clear:both;margin:clamp(14px,2vh,24px) auto clamp(14px,2vh,24px) 0;} .op-post-img.pos-bc{clear:both;margin:clamp(14px,2vh,24px) auto;} .op-post-img.pos-br{clear:both;margin:clamp(14px,2vh,24px) 0 clamp(14px,2vh,24px) auto;} /* centered block, smaller than the column (sized by the width slider) */ .op-post-img.pos-center{float:none;clear:both;margin:clamp(14px,2vh,24px) auto;} /* two or more images side by side at equal heights (a row) */ .op-post-row,.op-post-duo{clear:both;display:flex;gap:clamp(10px,1.6vw,22px);margin:clamp(14px,2vh,24px) 0;align-items:flex-start;} .op-post-row.gap-tight{gap:clamp(4px,.5vw,8px);} .op-post-row.gap-wide{gap:clamp(20px,3.2vw,44px);} .op-post-row>.op-post-img,.op-post-duo .op-post-img{margin:0;float:none;flex:1 1 0;min-width:0;width:auto;} .op-post-clear{clear:both;} /* a paragraph immediately before an image shouldn't add its bottom margin on top of the image's own margin — keeps the gap above an image equal to the gap below */ .op-post-text:has(+ .op-post-img) p:last-child,.op-post-text:has(+ .op-post-duo) p:last-child,.op-post-text:has(+ .op-post-row) p:last-child{margin-bottom:0;} @media(max-width:820px){ .op-blog-list{width:auto;margin-left:0;} .op-post{grid-template-columns:1fr;gap:16px;} .op-post-meta{justify-content:flex-start;padding-right:0;} .op-post-body--clamp{max-height:52vh;columns:1;} .op-post-morewrap{padding-left:0;} .op-post-img{float:none !important;clear:both !important;width:auto !important;max-width:100% !important;margin:24px auto !important;} /* a row keeps its shape on a phone, just smaller */ .op-post-row>.op-post-img{width:auto !important;margin:0 !important;} } /* ---- blog studio panel (block editor) ---- */ .bp .cp-top{align-items:center;} .bp-online,.bp-pub{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);padding:9px 15px;border-radius:40px;font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;} .bp-online-dot,.bp-pub-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);flex:none;} .bp-online.on,.bp-pub.on{background:rgba(255,153,0,.16);border-color:var(--orange);color:#fff;} .bp-online.on .bp-online-dot,.bp-pub.on .bp-pub-dot{background:var(--orange);} .bp-new{margin:22px 0 24px;background:var(--orange);color:#000;border:none;font-family:var(--grot);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;border-radius:6px;cursor:pointer;} .bp-new:hover{filter:brightness(1.07);} .bp-empty{padding:60px;text-align:center;color:rgba(255,255,255,.4);font-style:italic;font-family:var(--serif);font-size:19px;} .bp-list{display:flex;flex-direction:column;gap:22px;} /* compact index */ .bp-toolbar{display:flex;align-items:center;gap:14px;margin:22px 0 18px;} .bp-toolbar .bp-new{margin:0;} .bp-search-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:140px;} .bp-search-ico{position:absolute;left:12px;width:15px;height:15px;color:rgba(255,255,255,.4);pointer-events:none;} .bp-search{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:7px;color:#fff;font-family:var(--grot);font-size:13px;padding:10px 32px 10px 34px;outline:none;transition:border-color .15s,background .15s;-webkit-appearance:none;appearance:none;} .bp-search::-webkit-search-cancel-button{display:none;} .bp-search::placeholder{color:rgba(255,255,255,.4);} .bp-search:focus{border-color:var(--orange);background:rgba(255,255,255,.08);} .bp-search-clear{position:absolute;right:8px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);font-size:11px;line-height:1;cursor:pointer;transition:background .15s,color .15s;} .bp-search-clear:hover{background:#fff;color:#201f1d;} .bp-expandall{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;border-radius:7px;cursor:pointer;transition:.15s;} .bp-expandall:hover{border-color:rgba(255,255,255,.4);color:#fff;} .bp-count{margin-left:auto;font-family:var(--grot);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700;} .bp-index{display:flex;flex-direction:column;gap:8px;} .bp-row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;transition:border-color .15s;} .bp-row.live{border-color:rgba(255,153,0,.32);} .bp-row.open{border-color:rgba(255,255,255,.24);} .bp-pubfilter{display:flex;gap:4px;margin-right:auto;background:rgba(255,255,255,.05);padding:3px;border-radius:20px;} .bp-pubf{background:none;border:none;color:rgba(255,255,255,.55);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:20px;cursor:pointer;} .bp-pubf.on{background:var(--orange);color:#000;} .bp-pubf-n{font-style:normal;margin-left:6px;opacity:.65;font-variant-numeric:tabular-nums;} .bp-row-headwrap{display:flex;align-items:stretch;} .bp-row-head{display:flex;align-items:center;gap:14px;flex:1;min-width:0;background:none;border:none;cursor:pointer;color:inherit;text-align:left;padding:15px 18px 15px 4px;font:inherit;} .bp-row-head:hover{background:rgba(255,255,255,.03);} /* status ball doubles as the publish/draft toggle */ .bp-row-dot{appearance:none;flex:none;align-self:center;margin-left:18px;width:13px;height:13px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .15s, box-shadow .15s, transform .12s;} .bp-row-dot:hover{background:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.1);} .bp-row-dot:active{transform:scale(.88);} .bp-row-dot.on{background:var(--orange);box-shadow:0 0 0 3px rgba(255,153,0,.18);} .bp-row-dot.on:hover{background:var(--orange);box-shadow:0 0 0 4px rgba(255,153,0,.3);} .bp-row-title{flex:0 1 auto;max-width:42%;min-width:0;font-family:var(--serif);font-style:italic;font-size:17px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bp-row-untitled{color:rgba(255,255,255,.4);} .bp-row-covertag{flex:none;margin-left:9px;font-family:var(--grot);font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#141311;background:var(--orange);border-radius:999px;padding:2px 7px;} .bp-row-meta{font-family:var(--grot);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55);flex:none;order:9;margin-left:auto;text-align:right;} .bp-row-thumbs{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;justify-content:flex-end;overflow:hidden;} .bp-row-thumb{flex:none;width:36px;height:36px;border-radius:4px;overflow:hidden;background:#0d0b05;display:flex;align-items:center;justify-content:center;} .bp-row-thumb-img{width:100%;height:100%;object-fit:cover;display:block;} .bp-row-thumb-more{font-family:var(--grot);font-size:11px;font-weight:700;color:rgba(255,255,255,.62);background:rgba(255,255,255,.08);} .bp-row-count{font-family:var(--grot);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.38);flex:none;min-width:78px;text-align:right;} .bp-row-chev{flex:none;color:rgba(255,255,255,.5);font-size:13px;transition:transform .18s;} .bp-row-edit{flex:none;font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .15s,transform .15s;} .bp-row-head:hover .bp-row-edit{color:var(--orange);transform:translateX(2px);} .bp-row.open .bp-row-chev{transform:rotate(180deg);} .bp-row .bp-post{background:none;border:none;border-top:1px solid rgba(255,255,255,.1);border-radius:0;padding:18px;} .bp-row .bp-post.live{border-color:transparent;border-top-color:rgba(255,153,0,.28);} @media(max-width:620px){ .bp-row-count{display:none;} .bp-row-thumbs{display:none;} .bp-row-head{flex-wrap:wrap;gap:8px 12px;} } .bp-post{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:20px;} .bp-post.live{border-color:rgba(255,153,0,.4);} .bp-post-head{display:flex;gap:14px;margin-bottom:14px;} .bp-post-title{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);color:#fff;padding:12px 14px;border-radius:6px;font-family:var(--serif);font-style:italic;font-size:19px;} .bp-post-date{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);padding:12px 14px;border-radius:6px;font-family:var(--grot);font-size:13px;color-scheme:dark;} /* block list */ .be-list{display:flex;flex-direction:column;gap:10px;border:1.5px dashed rgba(255,255,255,.14);border-radius:8px;padding:12px;margin-bottom:12px;} .be-empty{font-style:italic;font-family:var(--serif);color:rgba(255,255,255,.4);padding:10px;font-size:14px;} .be-block{display:flex;gap:12px;align-items:flex-start;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px;} .be-img{align-items:flex-start;} .be-textarea{flex:1;width:100%;min-width:0;box-sizing:border-box;display:block;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.14);color:#eee;padding:11px 12px;border-radius:6px;font-family:var(--body);font-size:14px;line-height:1.6;resize:vertical;} .be-thumb{width:92px;height:92px;border-radius:6px;background:#000 center/cover no-repeat;flex:none;} .be-img-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;} /* five-position picker */ .be-pos{display:flex;flex-direction:column;gap:4px;} .be-pos-row{display:flex;gap:4px;} .be-pos-b{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:6px;color:rgba(255,255,255,.6);font-family:var(--grot);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:7px 4px;cursor:pointer;transition:.12s;} .be-pos-b:hover{border-color:rgba(255,255,255,.4);color:#fff;} .be-pos-b.on{background:rgba(255,153,0,.16);border-color:var(--orange);color:#fff;} .be-pos-b svg{width:13px;height:13px;flex:none;} /* live zoom slider */ .be-zoom{display:flex;flex-direction:column;gap:6px;} .be-zoom-top{display:flex;align-items:baseline;gap:8px;} .be-zoom-lbl{font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);} .be-zoom-val{margin-left:auto;font-family:var(--grot);font-size:12px;font-weight:600;color:var(--orange);font-variant-numeric:tabular-nums;} .be-zoom-val small{color:rgba(255,255,255,.4);font-weight:500;} .be-zoom-row{display:flex;align-items:center;gap:8px;} .be-zoom-step{width:26px;height:26px;flex:none;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);font-size:15px;line-height:1;cursor:pointer;transition:.12s;} .be-zoom-step:hover{border-color:var(--orange);color:#fff;} .be-zoom-range{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:rgba(255,255,255,.16);outline:none;cursor:pointer;} .be-zoom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--orange);border:2px solid #1b1a18;box-shadow:0 0 0 1px var(--orange);cursor:pointer;} .be-zoom-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--orange);border:2px solid #1b1a18;box-shadow:0 0 0 1px var(--orange);cursor:pointer;} /* live post preview (inside the studio card) */ .be-preview{margin:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:#1b1a18;} .be-preview-head{display:flex;align-items:baseline;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.1);} .be-preview-tag{font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);} .be-preview-sub{font-family:var(--grot);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38);} .be-preview-toggle{margin-left:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:6px;cursor:pointer;transition:.12s;} .be-preview-toggle:hover{border-color:var(--orange);color:#fff;} .be-preview-stage{padding:34px clamp(20px,3.2vw,56px) 42px;background:#201f1d;} .be-preview-paper{max-width:880px;margin:0 auto;} .be-preview-empty{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.42);font-size:15px;padding:6px 0 2px;} .be-preview .op-post-img{cursor:default;} .be-preview .op-post-img:hover .op-post-imgmeta{opacity:0;} .be-preview .op-post-title{margin-top:.15em;} .be-preview .op-post-body{max-width:768px;margin-left:auto;margin-right:auto;} .be-preview .op-post-text p{max-width:none;} .be-preview .op-post-text p{font-family:var(--body);} /* blog section-heading editor (kicker + title above the journal) */ .bp-sectionhead{margin:0 0 16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);} .bp-sectionhead-toggle{width:100%;display:flex;align-items:baseline;gap:12px;background:none;border:none;padding:12px 16px;cursor:pointer;text-align:left;} .bp-sectionhead-toggle:hover .bp-sectionhead-tag{color:var(--orange);} .bp-sectionhead-tag{font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f3efe6;transition:color .12s;} .bp-sectionhead-sub{font-family:var(--grot);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.38);} .bp-sectionhead-toggle .bp-row-chev{margin-left:auto;align-self:center;} .bp-sectionhead-toggle[aria-expanded="true"] .bp-row-chev{transform:rotate(180deg);} .bp-sectionhead-body{padding:2px 16px 14px;} /* expanded post: NARROW tools left, FULL-SIZE live preview filling the rest */ .cp.bp{max-width:min(1480px,100%);container-type:inline-size;} .bp-preview-bar{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.03);} .bp-preview-bar .be-preview-tag{font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);} .bp-preview-bar .be-preview-sub{font-family:var(--grot);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38);} .bp-preview-bar .be-preview-toggle{margin-left:auto;} .bp-post-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;} .bp-post-tools{min-width:0;} .bp-post-previewcol{min-width:0;} @container (min-width:760px){ .bp-post-grid{grid-template-columns:360px minmax(0,1fr);} .bp-post-grid.solo{grid-template-columns:1fr;} .bp-post-previewcol{position:sticky;top:6px;align-self:start;max-height:calc(100vh - 104px);overflow:auto;border-radius:10px;} } .be-ctrl{display:flex;flex-direction:column;gap:4px;flex:none;} .be-ctrl button{width:28px;height:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#ddd;border-radius:5px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;} .be-ctrl button:hover:not(:disabled){border-color:var(--orange);color:#fff;} .be-ctrl button:disabled{opacity:.3;cursor:default;} .be-ctrl .be-x:hover{background:#ff5a46;border-color:#ff5a46;color:#fff;} .be-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;} .be-add > button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#f3efe6;padding:9px 15px;border-radius:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;font-family:var(--grot);} .be-add > button:hover{border-color:var(--orange);color:#fff;} .be-add-hint{font-size:11.5px;color:rgba(255,255,255,.4);flex:1;min-width:160px;line-height:1.4;} /* insert-existing-image picker (blog) */ .bmp-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:5vh 4vw;} .bmp{width:min(1200px,100%);max-height:92vh;display:flex;flex-direction:column;background:#1b1a18;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);} .bmp-head{display:flex;align-items:center;gap:18px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1);flex:none;} .bmp-title{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;color:#f3efe6;} .bmp-tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:4px;border-radius:8px;} .bmp-tab{background:none;border:none;color:rgba(255,255,255,.6);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:5px;display:flex;align-items:center;gap:7px;} .bmp-tab span{font-size:10px;color:rgba(255,255,255,.4);background:rgba(255,255,255,.08);padding:1px 6px;border-radius:20px;} .bmp-tab:hover{color:#fff;} .bmp-tab.on{background:var(--orange);color:#000;} .bmp-tab.on span{color:rgba(0,0,0,.55);background:rgba(0,0,0,.14);} .bmp-close{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.6);font-size:24px;line-height:1;padding:0 4px;} .bmp-close:hover{color:#fff;} .bmp-search{flex:none;padding:14px 18px 0;} .bmp-search input{width:100%;box-sizing:border-box;height:42px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#111;color:#fff;padding:0 16px;font-family:var(--grot);font-size:13px;outline:none;transition:border-color .2s;} .bmp-search input:focus{border-color:var(--orange);} .bmp-search input::-webkit-search-cancel-button{-webkit-appearance:none;} .bmp-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:60px;color:rgba(255,255,255,.4);font-style:italic;font-family:var(--serif);font-size:17px;} .bmp-grid{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,100px);grid-auto-rows:max-content;gap:14px;align-content:start;justify-content:start;} .bmp-tile{position:relative;align-self:start;background:#151309;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;cursor:pointer;padding:0;display:flex;flex-direction:column;transition:.15s;} .bmp-tile:hover{border-color:rgba(255,255,255,.3);} .bmp-tile.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);} .bmp-imgwrap{height:100px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#0d0b05;overflow:hidden;} .bmp-img{width:100%;height:100%;object-fit:cover;} .bmp-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#000;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;} .bmp-name{padding:6px 7px;font-size:11.5px;font-weight:600;color:#f3efe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;} .bmp-name em{color:rgba(255,255,255,.4);font-style:italic;font-weight:400;} .bmp-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);} .bmp-cancel{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);padding:9px 18px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;} .bmp-cancel:hover{border-color:rgba(255,255,255,.4);color:#fff;} .bmp-add{background:var(--orange);border:1px solid var(--orange);color:#000;padding:9px 18px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;} .bmp-add:disabled{opacity:.4;cursor:default;} .bp-msg{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--orange);} .bp-post-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;} .bp-foot-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .bp-xlate{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75);padding:9px 15px;border-radius:40px;font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.15s;} .bp-xlate:hover{border-color:var(--orange);color:#fff;} .bp-xlate:disabled{cursor:default;opacity:.8;} .bp-xlate.translating{border-color:var(--orange);color:var(--orange);} .bp-xlate.done{border-color:rgba(120,210,140,.6);color:#86e0a0;} .bp-xlate.error{border-color:rgba(255,120,100,.6);color:#ff8a78;} .be-text-actions{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;} .bp-xlate.sm{padding:5px 11px;font-size:11px;gap:5px;} .bp-del{background:none;border:1px solid rgba(255,90,70,.5);color:#ff8a78;padding:9px 15px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;font-family:var(--grot);} .bp-del:hover{background:#ff5a46;border-color:#ff5a46;color:#fff;} /* ============ CONTACT ============ */ .op-contact{min-height:100svh;padding-top:calc(var(--nav-h) + 28px);padding-bottom:80px;display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;--crow:58px;} .op-contact-grid{display:grid;grid-template-columns:var(--blk-w) var(--blk-w);justify-content:start;gap:var(--blk-gap);align-items:start;margin-top:var(--sec-gap);width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));padding-left:var(--pf-w, 540px);} .op-contact-col1{display:flex;flex-direction:column;} .op-contact-lead{box-sizing:border-box;width:calc(var(--pf-w, 540px) + var(--blk-w));max-width:none;padding-left:var(--pf-w, 540px);margin:24px 0 0 min(0px, calc(50% - 50vw + 56px));} .contact-details{display:flex;flex-direction:column;margin-top:0;} .cd-row{display:flex;align-items:center;gap:20px;height:var(--crow);padding:0;border-top:1px solid var(--line);box-sizing:border-box;} .cd-row:last-child{border-bottom:1px solid var(--line);} .cd-l{font-family:var(--grot);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;width:130px;flex:none;} .cd-v{font-size:17px;font-weight:600;color:var(--ink);} a.cd-row:hover .cd-v{color:var(--orange);} .cd-based{margin-top:52px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);} .contact-form{display:flex;flex-direction:column;gap:0;margin-top:calc(var(--crow) * -1);} /* thick black frame around the form fields, expanding beyond top/bottom/sides WITHOUT moving the fields: negative margins cancel the padding so field positions are pixel-identical to before, the black just bleeds outward. */ .contact-form{background:var(--ink);border-radius:6px;padding:38px 40px 44px;margin-top:calc(var(--crow) * -1 - 38px);margin-left:-40px;margin-right:-40px;margin-bottom:-44px;box-sizing:border-box;} .contact-form .field span{color:#fff;} /* SEND is the exact BLOG "read full entry" button (.op-post-more): white underlined text + orange arrow; only the underline turns orange on hover */ .contact-form .op-post-more{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--grot);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;padding:0 0 4px;border-bottom:1px solid rgba(255,255,255,.4);transition:color .25s,border-color .25s;display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:calc(var(--crow) - 16px);} .contact-form .op-post-more .op-more-arrow{flex:none;display:block;color:var(--orange);transition:transform .2s;} .contact-form .op-post-more:hover{border-color:var(--orange);} .contact-form .op-post-more:hover .op-more-arrow{transform:translateX(5px);} .field{display:flex;flex-direction:column;gap:0;} .contact-form .btn-solid{margin-top:calc(var(--crow) - 16px);} .field span{font-family:var(--grot);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;height:var(--crow);display:flex;align-items:flex-end;padding-bottom:10px;box-sizing:border-box;} .field input,.field select,.field textarea{font-family:var(--body);font-size:16px;background:#fff;border:1px solid var(--line);padding:0 14px;color:#111;border-radius:3px;width:100%;height:var(--crow);box-sizing:border-box;} .field textarea{height:calc(var(--crow)*2);min-height:var(--crow);padding:14px;resize:vertical;} .cf-human{display:flex;flex-direction:column;gap:10px;margin-top:calc(var(--crow) - 10px);} .cf-check{display:flex;align-items:center;gap:14px;padding:14px 18px;background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;text-align:left;} .cf-check:hover{border-color:rgba(255,255,255,.4);} .cf-box{width:24px;height:24px;border-radius:3px;border:1.5px solid rgba(255,255,255,.4);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .18s,border-color .18s,color .18s;} .cf-check.on .cf-box{background:var(--orange);border-color:var(--orange);color:#0a0a0a;} .cf-check-t{font-family:var(--grot);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.78);} .cf-check.has-err{border-color:#ff7a5c;} .cf-pow{display:flex;align-items:center;gap:9px;min-height:16px;font-family:var(--grot);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);} .cf-pow.ok{color:rgba(255,255,255,.5);} .cf-spin{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);border-top-color:var(--orange);animation:cfsp .7s linear infinite;} .cf-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);} @keyframes cfsp{to{transform:rotate(360deg);}} .field-err{display:flex;align-items:center;gap:6px;font-family:var(--grot);font-size:13px;letter-spacing:.02em;font-style:normal;font-weight:600;color:#c0392b;margin-top:8px;} .field-err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#c0392b;color:#fff;font-size:11px;font-weight:700;flex:none;} .field.has-err input,.field.has-err textarea,.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b;} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);} .btn-solid{display:inline-flex;align-items:center;justify-content:center;height:40px;background:var(--ink);color:#fff;border:none;padding:0 22px;font-family:var(--grot);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-radius:20px;transition:background .25s,color .25s;align-self:flex-start;} .btn-solid:hover{background:var(--orange);color:#000;} .form-sent{font-family:var(--grot);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#0a7d3c;display:flex;align-items:center;gap:10px;padding:14px 18px;border:1.5px solid #0a7d3c;border-radius:8px;background:rgba(10,125,60,.08);animation:formSentIn .4s ease both;} .form-sent::before{content:"✓";font-size:18px;line-height:1;} @keyframes formSentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ============ FOOTER (black) ============ */ .op-footer{background:#0a0a0a;color:#f2f2ef;padding:100px 56px 36px;} .op-footer-grid{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:70px;} .op-footer-noterail{max-width:1480px;margin:22px auto 0;} .op-footer-note{margin:0 auto;max-width:min(74ch,100%);text-align:center;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.42);text-wrap:pretty;} .fc-h{font-family:var(--grot);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700;margin-bottom:20px;} .op-footer-col a{display:block;font-size:15px;color:#ececea;font-weight:500;padding:6px 0;} .op-footer-col a:hover{color:var(--orange);} .op-langgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 30px;} .op-langbtn{display:flex;align-items:baseline;gap:10px;background:none;border:none;color:rgba(255,255,255,.78);padding:6px 0;font-size:14px;text-align:left;font-family:var(--body);} .op-langbtn .lc{font-family:var(--grot);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.38);width:34px;flex:none;font-weight:700;} .op-langbtn:hover{color:#fff;} .op-langbtn.on{color:var(--orange);} .op-langbtn.on .lc{color:var(--orange);} .op-footer-word{max-width:1480px;margin:96px auto 0;overflow:hidden;} .op-footer-word h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--orange);line-height:.95;margin:0;white-space:nowrap;} .op-footer-bottom{max-width:1480px;margin:36px auto 0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:22px;font-size:12.5px;color:rgba(255,255,255,.45);flex-wrap:wrap;} /* ============ LIGHTBOX + LOUPE ============ */ .op-lb{position:fixed;inset:0;z-index:90;background:rgba(253,253,252,.985);display:flex;flex-direction:column;animation:lbfade .3s ease;} @keyframes lbfade{from{opacity:0;}} .op-lb-top{display:flex;align-items:center;justify-content:space-between;padding:24px 36px;flex:none;} .op-lb-count{font-family:var(--grot);font-size:12px;letter-spacing:.2em;color:var(--muted);font-weight:600;} .op-lb-close{background:none;border:none;font-size:20px;color:var(--ink);opacity:.65;} .op-lb-close:hover{opacity:1;} .op-lb-mid{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 90px;position:relative;} .op-lb-stage{position:relative;max-height:100%;display:flex;} .op-lb-img{max-height:72vh;max-width:min(1100px,78vw);object-fit:contain;} /* The two layers must be sized by the SAME constraints, so the full-res one inherits the base rule's max-* and is merely centred on top — no width/height of its own, which would resolve against the middle band instead of the picture. */ .op-lb-img-hi{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:opLbHi .8s cubic-bezier(.4,0,.2,1) both;} @keyframes opLbHi{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion: reduce){.op-lb-img-hi{animation:none;}} .op-loupe{position:absolute;width:260px;height:260px;border-radius:50%;pointer-events:none;border:1px solid rgba(0,0,0,.16);box-shadow:0 24px 70px rgba(0,0,0,.3),inset 0 0 0 6px #fff;background-repeat:no-repeat;background-color:#fff;z-index:3;} .op-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;font-size:46px;font-weight:300;color:rgba(10,10,10,.38);padding:10px 26px;line-height:1;z-index:4;} .op-lb-arrow:hover{color:var(--ink);} .op-lb-arrow.left{left:8px;} .op-lb-arrow.right{right:8px;} .op-lb-foot{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 30px 30px;} .op-lb-name{font-family:var(--grot);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;} .op-lb-role{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);} .op-lb-hint{font-family:var(--grot);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.3);margin-top:8px;} /* dark viewer (opened from a blog entry) — matches PORTFOLIO solo mode charcoal. Sits above the blog reader overlay (z-index 200) but below the sticky nav (210), so nav links stay clickable and close both layers. */ .op-lb-dark{background:#201f1d;z-index:205;} .op-lb-dark .op-lb-count{color:rgba(255,255,255,.7);} .op-lb-dark .op-lb-close{color:#fff;} .op-lb-dark .op-lb-arrow{color:rgba(255,255,255,.55);} .op-lb-dark .op-lb-arrow:hover{color:#fff;} .op-lb-dark .op-lb-name{color:#fff;} .op-lb-dark .op-lb-role{color:rgba(255,255,255,.6);} /* ============ LANG SWITCHER ============ */ .lang{position:relative;} .lang-btn{display:flex;align-items:center;gap:7px;background:none;border:none;color:inherit;font-family:var(--grot);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:6px 2px;} .lang-btn.compact{color:#fff;} .lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;color:#111;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.25);min-width:178px;z-index:60;padding:6px;border-radius:4px;max-height:60vh;overflow-y:auto;} .lang-menu.up{top:auto;bottom:calc(100% + 8px);box-shadow:0 -18px 50px rgba(0,0,0,.25);} .lang-item{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;text-align:left;padding:9px 11px;font-size:13px;color:#222;border-radius:3px;font-family:var(--body);} .lang-item:hover{background:var(--paper2);} .lang-item.on{color:#000;font-weight:700;} .lang-item .lc{width:34px;font-family:var(--grot);font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--orange);flex:none;} /* ============ MANAGER (Studio) ============ */ .mgr{position:fixed;inset:0;background:#15140f;color:#f3efe6;display:flex;flex-direction:column;z-index:50;font-family:var(--grot);} .mgr-top{display:flex;align-items:center;justify-content:space-between;padding:0 26px;height:64px;border-bottom:1px solid rgba(255,255,255,.1);flex:none;background:#19180f;} .mgr-top-l{display:flex;align-items:center;gap:22px;} .mgr-back{display:flex;align-items:center;gap:10px;background:none;border:none;color:#f3efe6;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;} .mgr-back svg{color:var(--orange);} .mgr-back:hover{color:var(--orange);} .mgr-brand{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;} .mgr-brand span{color:var(--orange);} .mgr-sections{display:flex;gap:4px;margin-left:14px;background:rgba(255,255,255,.05);padding:4px;border-radius:40px;} .mgr-sec{background:none;border:none;color:rgba(255,255,255,.6);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:7px 15px;border-radius:40px;white-space:nowrap;} .mgr-sec:hover{color:#fff;} .mgr-sec.on{background:var(--orange);color:#000;} .mgr-scroll{flex:1;overflow-y:auto;min-height:0;} .mgr-top-r{display:flex;align-items:center;gap:18px;} .mgr-top-r .mgr-gap-l{margin-left:26px;} .mgr-top-r .lang-btn{color:#f3efe6;} .mgr-reset{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:8px 13px;border-radius:40px;white-space:nowrap;} .mgr-reset:hover{border-color:var(--orange);color:var(--orange);} .mgr-backup{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:8px 13px;border-radius:40px;white-space:nowrap;cursor:pointer;font-family:var(--grot);} .mgr-backup:hover{border-color:var(--orange);color:var(--orange);} .mgr-restore-ov{position:fixed;inset:0;z-index:120;background:rgba(8,8,6,.66);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;} .mgr-restore-box{width:440px;max-width:92vw;background:#1c1b13;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px 24px 20px;box-shadow:0 24px 70px rgba(0,0,0,.5);} .mgr-restore-h{font-family:var(--grot);font-size:18px;font-weight:700;letter-spacing:.02em;color:#f3efe6;} .mgr-restore-sub{margin-top:6px;font-size:12.5px;line-height:1.5;color:rgba(243,239,230,.6);} .mgr-restore-empty{margin-top:18px;font-size:13px;line-height:1.55;color:rgba(243,239,230,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 16px;} .mgr-restore-list{margin-top:18px;display:flex;flex-direction:column;gap:10px;} .mgr-restore-item{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:14px 16px;cursor:pointer;font-family:var(--grot);transition:border-color .15s,background .15s;} .mgr-restore-item:hover:not(:disabled){border-color:var(--orange);background:rgba(224,122,74,.1);} .mgr-restore-item:disabled{opacity:.55;cursor:default;} .mgr-restore-date{font-size:14px;font-weight:600;color:#f3efe6;} .mgr-restore-meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);white-space:nowrap;} .mgr-restore-foot{margin-top:20px;display:flex;justify-content:flex-end;gap:10px;} .mgr-publish{position:relative;background:var(--orange);border:1px solid var(--orange);color:#000;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:8px 16px;border-radius:40px;white-space:nowrap;cursor:pointer;font-family:var(--grot);} .mgr-publish:hover{filter:brightness(1.07);} .mgr-publish:disabled{opacity:.55;cursor:default;filter:none;} .mgr-publish.has-changes{animation:mgrPubBlink 1.1s ease-in-out infinite;} @keyframes mgrPubBlink{0%,100%{opacity:1}50%{opacity:.35}} .mgr-pubhint{align-self:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--orange);white-space:nowrap;background:none;border:0;border-bottom:1px dotted rgba(255,153,0,.6);padding:0 0 1px;cursor:pointer;font-family:inherit;} .mgr-pubhint:hover{color:#ffb340;border-bottom-color:#ffb340;} .mgr-chg-box{width:560px;} .mgr-chg-list{margin-top:18px;display:flex;flex-direction:column;gap:16px;max-height:52vh;overflow:auto;scrollbar-gutter:stable;} .mgr-chg-group{display:flex;flex-direction:column;gap:7px;} .mgr-chg-gname{display:flex;align-items:center;gap:8px;font-family:var(--grot);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);} .mgr-chg-gn{font-style:normal;font-size:10px;color:rgba(243,239,230,.55);background:rgba(255,255,255,.08);border-radius:999px;padding:1px 7px;} .mgr-chg-items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;} .mgr-chg-items li{position:relative;padding-left:14px;font-size:13px;line-height:1.5;color:rgba(243,239,230,.85);text-wrap:pretty;} .mgr-chg-items li::before{content:"";position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:50%;background:rgba(255,153,0,.7);} .mgr-test{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:8px 13px;border-radius:40px;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;} .mgr-test:hover{border-color:var(--orange);color:var(--orange);} .mgr-test:disabled{opacity:.6;cursor:default;} .mgr-test.ok{border-color:#6fbf73;color:#8fd18f;text-transform:none;letter-spacing:.02em;} .mgr-test.err{border-color:#d98a6a;color:#e8a07f;text-transform:none;letter-spacing:.02em;} .mgr-body{flex:1;display:flex;min-height:0;} .mgr-side{width:262px;flex:none;border-right:1px solid rgba(255,255,255,.1);padding:22px 16px;overflow-y:auto;background:#181711;} .mgr-side-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:700;padding:0 8px 12px;} .mgr-cat{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:#e9e4d8;padding:11px 12px;border-radius:6px;font-size:14px;font-weight:600;text-align:left;cursor:pointer;position:relative;transition:.15s;} .mgr-cat:hover{background:rgba(255,255,255,.06);} .mgr-cat.on{background:rgba(255,153,0,.16);color:#fff;} .mgr-cat .mc-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mgr-cat .mc-n{font-size:11px;color:rgba(255,255,255,.5);font-weight:700;} .mgr-cat.draggable{cursor:grab;} .mgr-cat.draggable:active{cursor:grabbing;} .mgr-cat.off .mc-name{opacity:.5;} .mc-grip{font-size:12px;color:rgba(255,255,255,.32);flex:none;margin-right:-2px;} .mgr-cat:hover .mc-grip{color:rgba(255,255,255,.6);} .mc-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:none;flex:none;padding:0;transition:.15s;position:relative;} .mc-dot.on{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,153,0,.18);} .mc-dot:hover{border-color:var(--orange);} /* SPECIAL GALLERY slot + S toggles (red accent) */ .mgr-special{margin-top:6px;border:1px dashed rgba(255,90,70,.5);} .mgr-special.on{background:rgba(255,90,70,.16);} .mgr-special.off{opacity:.55;} .mc-sflag{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#ff5a46;color:#fff;font-size:11px;font-weight:800;} .mc-sname{flex:1;min-width:0;background:none;border:none;color:inherit;font-size:13px;font-weight:600;padding:2px 0;outline:none;} .mc-sname::placeholder{color:rgba(255,255,255,.4);font-weight:500;} .mgr-special-wrap.open{background:rgba(255,90,70,.06);border-radius:6px;padding-bottom:4px;} /* Unified gallery-name editor (regular + special) */ .mgr-gal-wrap{border-radius:6px;} .mgr-gal-wrap.open{background:rgba(255,153,0,.05);} .mgr-special-wrap{margin-top:6px;} .gn{padding:0 8px 8px;display:flex;flex-direction:column;gap:5px;--gn-a:var(--orange);} .gn-spec{--gn-a:#ff5a46;} .gn-langs{display:flex;gap:2px;} .gn-chip{flex:1 1 0;min-width:0;background:rgba(255,255,255,.06);border:1px solid transparent;color:rgba(255,255,255,.5);font-size:9px;font-weight:700;letter-spacing:.02em;padding:4px 0;border-radius:4px;cursor:pointer;text-align:center;} .gn-chip:hover{color:#fff;background:rgba(255,255,255,.12);} .gn-chip.filled{color:var(--gn-a);} .gn-chip.on{background:var(--gn-a);border-color:var(--gn-a);color:#fff;} .gn-chip.locked{box-shadow:inset 0 -2px 0 var(--orange);} .gn-row{display:flex;align-items:center;gap:4px;} .mc-namein{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:600;padding:3px 6px;border-radius:4px;outline:none;font-family:inherit;} .mc-namein:focus{border-color:var(--orange);} .mgr-special .mc-namein:focus{border-color:#ff5a46;} .mc-namein.locked{border-style:dashed;border-color:rgba(255,153,0,.55);} .mc-namein::placeholder{color:rgba(255,255,255,.34);font-weight:500;} .gn-lock,.gn-go{flex:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);border-radius:4px;cursor:pointer;} .gn-lock{width:24px;height:22px;display:flex;align-items:center;justify-content:center;} .gn-lock:hover{color:#fff;} .gn-lock.on{background:rgba(255,153,0,.16);border-color:var(--orange);color:var(--orange);} .gn-go{height:22px;padding:0 8px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;} .gn-go:hover:not(:disabled){border-color:var(--gn-a);color:var(--gn-a);} .gn-go:disabled{opacity:.4;cursor:default;} .gn-go.busy{color:var(--gn-a);} .gn-stat{flex:1;min-width:0;font-size:9.5px;letter-spacing:.03em;color:rgba(255,255,255,.4);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gn-stat.err{color:#e8a07f;} /* ---- multi-select + batch edit (LIBRARY and PAGES) ---- */ .mgr-tile.sel{outline:2px solid var(--orange);outline-offset:-1px;box-shadow:0 0 0 4px rgba(255,153,0,.16);} .mgr-tile.sel .mt-imgwrap::after{content:"✓";position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;background:var(--orange);color:#141310;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:3;} .mgr-tile .mt-imgwrap{position:relative;} .bsel-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:#1d1b16;border:1px solid rgba(255,153,0,.5);border-radius:8px;padding:8px 12px;box-shadow:0 14px 40px rgba(0,0,0,.55);} .bsel-n{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);} .bsel-go{background:var(--orange);border:none;color:#141310;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:5px;} .bsel-b{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);font-size:11px;font-weight:600;padding:6px 10px;border-radius:5px;} .bsel-b:hover{color:#fff;border-color:rgba(255,255,255,.32);} .bsel-hint{font-size:10px;color:rgba(255,255,255,.38);letter-spacing:.02em;} .bd-strip{display:flex;flex-wrap:wrap;gap:3px;padding:0 0 10px;align-items:center;} .bd-thumb{width:38px;height:38px;object-fit:cover;border-radius:3px;} .bd-more{font-size:11px;color:rgba(255,255,255,.5);padding-left:4px;} .bd-note{font-size:11px;line-height:1.5;color:rgba(255,255,255,.5);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px;} .bd-cur{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.02em;} .bd-fieldfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px;} .bd-clear{background:none;border:none;color:rgba(255,255,255,.42);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 0;} .bd-clear:hover{color:#e8a07f;} .bd-applyrow{padding-bottom:4px;} .bd-segs{display:flex;flex-direction:column;gap:6px;margin:6px 0 16px;} .bd-seg{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.04);border-radius:6px;padding:7px 10px;} .bd-seg-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:7px;} .bd-seg-l em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.36);text-transform:none;} .bd-seg-b{display:flex;gap:4px;} .bd-seg-b button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:4px;} .bd-seg-b .bd-on:hover{background:rgba(255,153,0,.18);border-color:var(--orange);color:var(--orange);} .bd-seg-b .bd-off:hover{border-color:rgba(255,255,255,.4);color:#fff;} .bd-toggles{margin:6px 0 16px;} .bd-cats{gap:5px;} .bd-catchip{display:inline-flex;align-items:stretch;border:1px solid rgba(255,255,255,.16);border-radius:5px;overflow:hidden;} .bd-catchip.some{border-color:rgba(255,153,0,.4);} .bd-catchip.all{border-color:var(--orange);} .bd-catadd{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:none;color:rgba(255,255,255,.78);font-size:11px;font-weight:600;padding:6px 9px;} .bd-catadd:hover{background:rgba(255,153,0,.16);color:#fff;} .bd-catadd em{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.4);} .bd-catdel{background:rgba(255,255,255,.03);border:none;border-left:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.42);font-size:10px;padding:0 7px;} .bd-catdel:hover:not(:disabled){color:#e8a07f;background:rgba(232,160,127,.12);} .bd-catdel:disabled{opacity:.3;cursor:default;} .bd-msg{font-size:11px;font-weight:600;color:var(--orange);background:rgba(255,153,0,.1);border-radius:5px;padding:8px 10px;margin-bottom:10px;} .bd-msg.warn{color:#e8a07f;background:rgba(232,160,127,.12);} /* Studio fields whose value the SITE renders in uppercase (photo name, profession, gallery names, post title) show uppercase here too, so the field matches the page. Placeholders and hints stay in normal case. */ .mgr-drawer input.up,.mc-namein,.mc-name,.bee-title{text-transform:uppercase;} .mgr-drawer input.up::placeholder,.mc-namein::placeholder,.bee-title::placeholder{text-transform:none;} .mc-name em{text-transform:none;} .mc-slangs{display:flex;flex-wrap:wrap;gap:3px;padding:2px 10px 6px;} .mc-slangbtn{background:rgba(255,255,255,.06);border:1px solid transparent;color:rgba(255,255,255,.55);font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 6px;border-radius:4px;cursor:pointer;text-transform:uppercase;} .mc-slangbtn:hover{color:#fff;background:rgba(255,255,255,.12);} .mc-slangbtn.filled{color:#ff8a7a;} .mc-slangbtn.on{background:#ff5a46;border-color:#ff5a46;color:#fff;} .mc-sdot.on{background:#ff5a46;border-color:#ff5a46;box-shadow:0 0 0 3px rgba(255,90,70,.22);} .mt-s.on{color:#ff5a46;} .md-s.on{border-color:#ff5a46;color:#ff5a46;} .md-toggle-s{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;background:#ff5a46;color:#fff;font-size:10px;font-weight:800;margin-right:3px;} .mgr-side-hint{font-size:11px;line-height:1.5;color:rgba(255,255,255,.34);padding:14px 8px 0;} .mgr-cat .mc-actions{display:none;gap:2px;} .mgr-cat:hover .mc-actions{display:flex;} .mc-actions button{background:none;border:none;color:rgba(255,255,255,.55);padding:3px;border-radius:4px;display:flex;} .mc-actions button:hover{color:var(--orange);background:rgba(255,255,255,.08);} .mc-rename{width:100%;background:#111;border:1px solid var(--orange);color:#fff;padding:8px;border-radius:4px;font-size:14px;} .mgr-addcat{width:100%;background:none;border:1px dashed rgba(255,255,255,.22);color:rgba(255,255,255,.6);padding:11px;border-radius:6px;font-size:13px;font-weight:600;margin-top:10px;letter-spacing:.04em;} .mgr-addcat:hover{border-color:var(--orange);color:var(--orange);} .mgr-newcat{margin-top:10px;background:rgba(255,255,255,.05);padding:10px;border-radius:6px;} .mgr-newcat input{width:100%;background:#111;border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px;border-radius:4px;font-size:14px;margin-bottom:8px;} .mgr-newcat-row{display:flex;gap:8px;} .mini-solid{background:var(--orange);color:#000;border:none;padding:7px 14px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;} .mini-ghost{background:none;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75);padding:7px 14px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;} .mini-danger{background:none;border:1px solid rgba(255,90,70,.5);color:#ff7a66;padding:7px 14px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;} .mini-danger:hover{background:#ff5a46;color:#fff;} .mgr-main{flex:1;overflow-y:auto;padding:24px 28px 60px;min-width:0;} .mgr-filter{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;} .mgr-filter-l{font-size:15px;font-weight:700;color:#f3efe6;display:flex;align-items:baseline;gap:12px;} .mgr-filter-n{font-size:12px;font-weight:600;color:var(--orange);letter-spacing:.06em;text-transform:uppercase;} .mgr-seg{display:flex;flex-wrap:wrap;gap:2px;background:rgba(255,255,255,.05);padding:3px;border-radius:8px;} .mgr-seg-b{background:none;border:none;color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:7px 12px;border-radius:6px;white-space:nowrap;cursor:pointer;} .mgr-seg-b:hover{color:#fff;} .mgr-seg-n{margin-left:6px;opacity:.6;font-weight:700;} .mgr-seg-b.on{background:rgba(255,255,255,.14);color:#fff;} .mgr-sortrow{margin-top:-6px;} .mgr-filterbar{flex-wrap:nowrap;overflow-x:auto;gap:12px;} .mgr-filterbar .mgr-filter-l{flex:none;} .mgr-filterbar .mgr-seg{flex-wrap:nowrap;} .mgr-filterbar .mgr-sort-label{flex:none;margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700;} .mgr-blogrow{justify-content:flex-end;margin-top:-10px;margin-bottom:14px;} .mgr-blogseg .mgr-seg-b.on{background:#c9973a;color:#1c1305;} .mgr-sort-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;} .mgr-groups{display:flex;flex-direction:column;gap:30px;} .mgr-group-h{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:700;color:#f3efe6;letter-spacing:.02em;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);text-transform:capitalize;} .mgr-group-n{font-size:11px;font-weight:600;color:var(--orange);letter-spacing:.06em;} .mgr-drop{border:2px dashed rgba(255,255,255,.22);border-radius:10px;padding:26px;text-align:center;cursor:pointer;transition:.2s;margin-bottom:26px;background:rgba(255,255,255,.02);} .mgr-drop-mini{padding:11px 12px;margin:16px 0 0;border-radius:8px;} .mgr-drop-mini .mgr-drop-icon{margin-bottom:4px;} .mgr-drop-mini .mgr-drop-text{font-size:12px;line-height:1.3;} .mgr-drop-mini .mgr-drop-hint{display:none;} .mgr-drop-mini .mgr-drop-size{margin-top:7px;font-size:10px;padding:2px 6px;} .mgr-drop:hover,.mgr-drop.over{border-color:var(--orange);background:rgba(255,153,0,.08);} .mgr-drop-icon{color:var(--orange);display:flex;justify-content:center;margin-bottom:8px;} .mgr-drop-text{font-size:15px;font-weight:600;color:#f3efe6;} .mgr-drop-hint{font-size:12px;color:rgba(255,255,255,.4);margin-top:6px;} .mgr-drop-size{margin-top:11px;display:inline-block;font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--orange);background:rgba(255,153,0,.12);border:1px solid rgba(255,153,0,.32);padding:6px 13px;border-radius:40px;} .be-add-size{color:var(--orange)!important;font-weight:700;} .mgr-empty{padding:60px;text-align:center;color:rgba(255,255,255,.4);font-style:italic;font-family:var(--serif);font-size:19px;} .mgr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px;} .mgr-tile{background:#1f1d15;border:1px solid rgba(255,255,255,.08);border-radius:7px;overflow:hidden;cursor:grab;transition:.15s;} .mgr-tile:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);} .mgr-tile:active{cursor:grabbing;} .mt-imgwrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;} .mt-img{width:100%;height:100%;object-fit:cover;} .mt-star{position:absolute;top:8px;left:8px;background:var(--orange);color:#000;font-size:12px;font-weight:800;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;} .mt-mob{left:38px;background:#2a6fdb;color:#fff;font-size:13px;} /* colored status badges over the thumbnail */ .mt-flags{position:absolute;top:8px;left:8px;display:flex;gap:4px;z-index:2;pointer-events:none;} .mt-flag{width:21px;height:21px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;box-shadow:0 1px 5px rgba(0,0,0,.45);} .mt-flag.f-live{background:#ffcc00;color:#3a2c00;} .mt-flag.f-home{background:#3ec46d;color:#00250f;} .mt-flag.f-mob{background:#3aa0ff;color:#001f3d;} .mt-flag.f-spec{background:#ff5a46;color:#fff;} .mgr-tile.dim .mt-imgwrap{opacity:.5;} .mgr-tile.dim{border-color:rgba(255,255,255,.06);} .mt-off{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.72);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:40px;} .mt-multi{position:absolute;bottom:8px;right:8px;background:rgba(255,153,0,.92);color:#000;font-size:10px;font-weight:800;padding:3px 7px;border-radius:40px;letter-spacing:.02em;} /* --- focus control --- */ .fc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:13px;margin-bottom:6px;} .fc-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:10px;} .fc-val{color:var(--orange);font-size:12px;} .fc-row{display:flex;gap:12px;align-items:stretch;} .fc-stage{position:relative;width:160px;height:160px;flex:none;border-radius:6px;overflow:hidden;cursor:ns-resize;background:#000;touch-action:none;} .fc-stage-x{cursor:ew-resize;} .fc-crop{position:absolute;inset:0;background-size:contain;background-position:center center;background-repeat:no-repeat;} .fc-line{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(255,153,0,.9);pointer-events:none;display:flex;justify-content:center;} /* horizontal (mobile focusX) control: vertical dashed line, drags left/right */ .fc-vline{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed rgba(255,153,0,.9);pointer-events:none;display:flex;align-items:center;} .fc-dot{width:13px;height:13px;border-radius:50%;background:var(--orange);border:2px solid #fff;margin-top:-7px;box-shadow:0 1px 5px rgba(0,0,0,.5);pointer-events:auto;cursor:pointer;flex:0 0 auto;box-sizing:border-box;} .fc-vline .fc-dot{margin-top:0;margin-left:-7px;} .fc-grab{position:absolute;right:6px;bottom:6px;color:#fff;font-size:13px;opacity:.7;text-shadow:0 1px 3px #000;pointer-events:none;} .fc-slider{flex:1;align-self:center;writing-mode:vertical-lr;direction:rtl;width:22px;height:150px;accent-color:var(--orange);} .fc-hint{font-size:11px;line-height:1.5;color:rgba(255,255,255,.4);margin-top:10px;} /* --- drawer toggles + membership chips --- */ .md-toggles{display:flex;gap:8px;} .md-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);padding:11px 8px;white-space:nowrap;border-radius:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;} .md-toggle .md-toggle-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);} .md-toggle.md-online.on{background:#ffcc00;border-color:#ffcc00;color:#3a2c00;} .md-toggle.md-home.on{background:#3ec46d;border-color:#3ec46d;color:#00250f;} .md-toggle.md-mob.on{background:#3aa0ff;border-color:#3aa0ff;color:#001f3d;} .md-toggle.md-spec.on{background:#ff5a46;border-color:#ff5a46;color:#fff;} .md-toggle-m{font-weight:800;font-size:13px;line-height:1;} .md-toggle.on .md-toggle-dot{background:var(--orange);box-shadow:0 0 0 3px rgba(255,153,0,.2);} .md-note{font-size:12px;color:rgba(255,153,0,.85);font-style:italic;margin-top:-4px;} .md-cats{display:flex;flex-wrap:wrap;gap:7px;} .md-catchip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75);padding:8px 12px;border-radius:40px;font-size:12.5px;font-weight:600;} .md-catchip:hover{border-color:rgba(255,255,255,.4);} .md-catchip.on{background:var(--orange);border-color:var(--orange);color:#000;font-weight:700;} .md-catchip.blocked{opacity:.4;cursor:not-allowed;} .md-catdot{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);flex:none;} .md-catdot.live{background:var(--orange);border-color:var(--orange);} .md-hint{font-size:11px;line-height:1.5;color:rgba(255,255,255,.4);margin-top:8px;} .md-xlate{flex:none;background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.16);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:0 13px;height:40px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:.15s;} .md-xlate:hover:not(:disabled){border-color:var(--orange);color:var(--orange);} .md-xlate:disabled{opacity:.4;cursor:not-allowed;} .md-xlate.busy{color:var(--orange);border-color:var(--orange);} .md-xlate.done{color:#7bb37b;border-color:#7bb37b;} /* FUNÇÃO field: header row (label + translate/fixed toggle) + per-photo translate */ .md-fieldhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:2px;} .md-fieldhead span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;} .md-xlate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;} .md-xlate-btn{background:none;border:1px solid var(--orange);color:var(--orange);font-family:var(--grot);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:5px;cursor:pointer;} .md-xlate-btn:hover{background:var(--orange);color:#000;} .md-xlate-btn:disabled{opacity:.5;cursor:default;background:none;color:var(--orange);} .md-xlate-status{font-size:11.5px;font-weight:600;letter-spacing:.01em;} .md-xlate-status .working{color:rgba(255,255,255,.72);} .md-xlate-status .done{color:var(--orange);} .md-xlate-status .error{color:#e8836b;} /* --- content panel --- */ .cp{max-width:780px;margin:0 auto;padding:30px 28px 80px;} .cp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px;} .cp-title{font-family:var(--disp);font-weight:700;font-size:23px;text-transform:uppercase;letter-spacing:.02em;} .cp-langs{display:flex;gap:3px;flex-wrap:wrap;background:rgba(255,255,255,.05);padding:4px;border-radius:8px;} .cp-lang{background:none;border:none;color:rgba(255,255,255,.6);font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 11px;border-radius:5px;} .cp-lang:hover{color:#fff;} .cp-lang.on{background:var(--orange);color:#000;} .cp-note{font-size:13px;color:rgba(255,255,255,.45);line-height:1.5;margin-bottom:24px;max-width:560px;} /* ===== Focused blog entry editor (full-screen overlay) ===== */ .bee-overlay{position:fixed;inset:0;z-index:320;background:rgba(8,7,5,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:3vh 3vw;box-sizing:border-box;} .bee-shell{width:100%;max-width:1600px;height:94vh;background:#1c1b19;border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);} .bee-head{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.1);flex:none;} .bee-back{background:none;border:none;color:rgba(255,255,255,.7);font-family:var(--grot);font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:6px 10px;border-radius:6px;flex:none;} .bee-back:hover{color:#fff;background:rgba(255,255,255,.06);} .bee-head-mid{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;} .bee-title{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:6px;color:#fff;font-family:var(--serif);font-style:italic;font-size:19px;padding:7px 12px;outline:none;} .bee-title:focus{border-color:rgba(255,153,0,.6);background:rgba(255,255,255,.06);} .bee-date{flex:none;background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:6px;color:rgba(255,255,255,.8);font-family:var(--grot);font-size:12px;padding:7px 10px;outline:none;color-scheme:dark;} .bee-date:focus{border-color:rgba(255,153,0,.6);} .bee-langs{display:flex;gap:3px;flex-wrap:wrap;background:rgba(255,255,255,.05);padding:4px;border-radius:8px;flex:none;} .bee-pub{flex:none;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:7px;color:rgba(255,255,255,.65);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer;} .bee-pub .bee-pub-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);} .bee-pub.on{color:#ffcf80;border-color:rgba(255,153,0,.5);background:rgba(255,153,0,.12);} .bee-pub.on .bee-pub-dot{background:var(--orange);box-shadow:0 0 8px rgba(255,153,0,.8);} .bee-del{flex:none;background:none;border:1px solid rgba(255,90,70,.35);border-radius:7px;color:rgba(255,120,100,.85);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;cursor:pointer;} .bee-del:hover{background:rgba(255,90,70,.14);color:#ff8a75;} .bee-body{flex:1 1 auto;display:flex;min-height:0;} .bee-write{flex:none;width:min(560px,44%);display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.1);min-height:0;overflow-y:auto;} .bee-write-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 8px;flex:none;} .bee-write-tag{font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);} .bee-textarea{flex:1 1 auto;min-height:380px;resize:vertical;background:rgba(0,0,0,.22);border:none;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-family:var(--body);font-size:15.5px;line-height:1.75;padding:18px;outline:none;} .bee-textarea::placeholder{color:rgba(255,255,255,.32);} .bee-write-hint{flex:none;padding:8px 16px 12px;font-family:var(--grot);font-size:10.5px;letter-spacing:.03em;color:rgba(255,255,255,.34);line-height:1.5;} .bee-preview-wrap{flex:1 1 auto;min-width:0;overflow:hidden;background:#201f1d;display:flex;flex-direction:column;} .bee-selbar{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 16px;background:#201f1d;border-bottom:1px solid rgba(255,255,255,.12);} .bee-selbar-tag{font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);} .bee-selbar-hint{font-family:var(--grot);font-size:10.5px;letter-spacing:.03em;color:rgba(255,255,255,.4);margin-left:auto;} .bee-preview-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:34px clamp(26px,5vw,84px) 72px;display:flex;flex-direction:column;align-items:center;} /* identical to the published reader column: dark bg, white text, 768px measure */ .bee-preview-paper{background:transparent;color:#fff;width:768px;margin:0;padding:0;} .bee-preview-paper .op-post-title{color:var(--orange);font-size:clamp(23px,2.6vw,38px);margin:0 0 .5em;max-width:none;} .bee-preview-paper .op-post-text{max-width:none;margin:0;} .bee-preview-paper .op-post-text p{max-width:none;} .bee-preview-empty{font-family:var(--grot);font-size:13px;letter-spacing:.03em;color:rgba(255,255,255,.4);padding:24px 0;text-align:center;} /* gaps between paragraphs — reveal insert buttons on hover, highlight as a drop target */ .bee-gap{position:relative;min-height:14px;margin:0;transition:min-height .12s;} .bee-gap-line{position:absolute;left:0;right:0;top:50%;height:2px;border-radius:2px;background:transparent;transition:background .12s;} .bee-gap-acts{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2;} .bee-gap:hover .bee-gap-acts{opacity:1;pointer-events:auto;} .bee-gap:hover{min-height:34px;} .bee-gap-acts button{background:#242220;border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--grot);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:20px;cursor:pointer;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.35);} .bee-gap-acts button:hover{background:var(--orange);color:#000;} .bee-gap.armed{min-height:30px;} .bee-gap.armed .bee-gap-line{background:rgba(255,153,0,.35);} .bee-gap.over{min-height:44px;} .bee-gap.over .bee-gap-line{background:var(--orange);height:3px;box-shadow:0 0 10px rgba(255,153,0,.7);} /* image in the preview — selectable, draggable, with a floating toolbar */ .bee-fig{cursor:grab;position:relative;outline:2px solid transparent;outline-offset:2px;border-radius:2px;transition:outline-color .12s;} .bee-fig:hover{outline-color:rgba(255,153,0,.35);} .bee-fig.bee-sel{outline-color:var(--orange);cursor:default;} /* a figure being dragged onto, inside a row */ .bee-fig-over{outline:2px solid var(--orange) !important;outline-offset:2px;} .bee-fig.bee-sel2{outline-color:rgba(255,153,0,.72);outline-style:dashed;cursor:default;} .bee-rowbtn{font-family:var(--grot);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#141311;background:var(--orange);border:0;border-radius:999px;padding:7px 14px;cursor:pointer;} .bee-rowbtn:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.45);cursor:not-allowed;} .bee-fig .op-post-img-el{pointer-events:none;} .bee-fig-missing{aspect-ratio:1.5;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.08);color:rgba(10,10,10,.4);font-family:var(--grot);font-size:12px;letter-spacing:.05em;text-transform:uppercase;} .bee-imgbar{position:absolute;top:8px;left:8px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:min(440px,94%);background:#201f1d;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 8px;box-shadow:0 8px 22px rgba(0,0,0,.4);cursor:default;} .bee-imgbar-seg{display:flex;gap:2px;} .bee-imgbar-grip{display:flex;align-items:center;justify-content:center;cursor:grab;color:rgba(255,255,255,.5);font-size:15px;padding:0 4px;user-select:none;} .bee-imgbar-grip:active{cursor:grabbing;} .bee-imgbar-grip:hover{color:var(--orange);} .bee-imgbar-b{background:rgba(255,255,255,.06);border:none;color:rgba(255,255,255,.7);font-family:var(--grot);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:5px;cursor:pointer;} .bee-imgbar-b:hover{color:#fff;background:rgba(255,255,255,.12);} .bee-imgbar-b.on{background:var(--orange);color:#000;} .bee-imgbar-w{display:flex;align-items:center;gap:7px;padding:0 4px;border-left:1px solid rgba(255,255,255,.12);} .bee-imgbar-wl{font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);} .bee-imgbar-w input[type=range]{width:96px;accent-color:var(--orange);} .bee-imgbar-wv{font-family:var(--grot);font-size:11px;font-weight:700;color:#fff;min-width:34px;text-align:right;} .bee-imgbar-x{background:none;border:none;color:rgba(255,120,100,.85);font-family:var(--grot);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 8px;border-radius:5px;cursor:pointer;border-left:1px solid rgba(255,255,255,.12);} .bee-imgbar-x:hover{background:rgba(255,90,70,.16);color:#ff8a75;} @media(max-width:820px){ .bee-body{flex-direction:column;} .bee-write{width:100%;flex:none;height:44%;border-right:none;border-bottom:1px solid rgba(255,255,255,.1);} .bee-preview-wrap{flex:1 1 auto;} .bee-head{flex-wrap:wrap;} } /* upload size reminder — always visible in the blog editor's write pane */ .bee-sizenote{flex:none;margin:0 16px 12px;padding:10px 12px;border:1px solid rgba(255,153,0,.34);border-left:3px solid var(--orange);border-radius:6px;background:rgba(255,153,0,.07);display:flex;flex-direction:column;gap:4px;font-family:var(--grot);font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.66);} .bee-sizenote-k{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);} .bee-sizenote b{color:#fff;font-weight:700;} /* Cover fields in the blog editor's write pane */ .bee-cover{flex:none;margin:0 16px 16px;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px;} .bee-cover-head{font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:8px;} .bee-cover-toggle{width:100%;justify-content:space-between;background:none;border:none;padding:2px 0;cursor:pointer;text-align:left;} .bee-cover-toggle:hover{color:#fff;} .bee-cover-chev{color:rgba(255,255,255,.5);font-size:12px;} .bee-cover-f{display:flex;flex-direction:column;gap:5px;} .bee-cover-f>span{font-family:var(--grot);font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);} .bee-cover-f textarea{resize:vertical;min-height:44px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:rgba(255,255,255,.9);font-family:var(--body);font-size:14px;line-height:1.5;padding:9px 11px;outline:none;} .bee-cover-f textarea:focus{border-color:rgba(255,153,0,.6);} .bee-cover-cols{display:flex;gap:8px;} .bee-cover-col{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:rgba(255,255,255,.7);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:8px 6px;cursor:pointer;} .bee-cover-col:hover{background:rgba(255,255,255,.1);color:#fff;} .bee-cover-col.on{border-color:var(--orange);color:#fff;} .bee-cover-sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex:none;} /* WYSIWYG cover crop: stage held at the on-screen cover proportion; a frame (same aspect) is panned/zoomed; title+blurb overlays render in place for the decision. */ .bee-ccrop{position:relative;width:100%;aspect-ratio:var(--blog-cover-ar,0.82);border-radius:6px;overflow:hidden;background:#0d0b05;user-select:none;cursor:grab;display:flex;flex-direction:column;justify-content:space-between;} .bee-ccrop:active{cursor:grabbing;} .bee-ccrop-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;} .bee-ccrop .op-blog-cover-shade{z-index:1;} .bee-ccrop-top{position:absolute;left:0;right:0;top:0;padding:14px 16px 0;z-index:2;display:flex;flex-direction:column;pointer-events:none;} .bee-ccrop-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 16px 14px;z-index:2;pointer-events:none;} .bee-ccrop-top .op-blog-cover-title{font-size:clamp(15px,3.4vw,26px);} .bee-ccrop-bottom .op-blog-cover-blurb{font-size:clamp(11px,1.6vw,14px);margin:0 0 6px;-webkit-line-clamp:2;} .bee-ccrop-bottom .op-blog-cover-blurb.is-full{-webkit-line-clamp:unset;display:block;overflow:visible;} .bee-ccrop-bottom .op-blog-cover-more{font-size:10px;padding-bottom:2px;} .bee-ccrop-focus{position:absolute;z-index:3;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgba(255,153,0,.5);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;} .bee-ccrop-zoom{margin-top:10px;padding:0;border:none;} .bee-ccrop-zoom input[type=range]{flex:1;accent-color:var(--orange);} .bee-ccrop-reset{margin-top:8px;align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:rgba(255,255,255,.7);font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;cursor:pointer;} .bee-ccrop-reset:hover{color:#fff;border-color:var(--orange);} .bee-focus-empty{font-family:var(--grot);font-size:11.5px;color:rgba(255,255,255,.4);padding:10px;border:1px dashed rgba(255,255,255,.16);border-radius:6px;} /* --- pages panel (studio) --- */ .cp.pgp{max-width:none;padding-left:28px;padding-right:28px;} /* Featured-portrait link (Pages edit drawer) + its picker modal */ .pgp-linkcur{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:rgba(255,255,255,.03);} .pgp-linkthumb{width:46px;height:46px;object-fit:cover;border-radius:4px;flex:none;} .pgp-linkinfo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;} .pgp-linkinfo b{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pgp-linkinfo span{font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pgp-linkacts{display:flex;gap:6px;flex:none;} .pgp-linkbtn{align-self:flex-start;} .pgp-linknote{font-size:11px;color:rgba(255,255,255,.42);line-height:1.5;margin-top:6px;} .pgp-linkpick{z-index:60;display:flex;align-items:center;justify-content:center;padding:5vh 4vw;box-sizing:border-box;} .pgp-linkmodal{background:#1b1b1b;border:1px solid rgba(255,255,255,.14);border-radius:8px;width:min(1100px,92vw);max-height:86vh;display:flex;flex-direction:column;padding:20px;gap:16px;box-sizing:border-box;} .pgp-linksearch{width:100%;box-sizing:border-box;height:42px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#111;color:#fff;padding:0 16px;font-size:13px;outline:none;} .pgp-linksearch:focus{border-color:var(--orange);} .pgp-linkgrid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,100px);grid-auto-rows:max-content;gap:14px;justify-content:start;align-content:start;overflow-y:auto;padding-right:4px;} .pgp-linkopt{appearance:none;border:1px solid transparent;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:5px;border-radius:6px;overflow:hidden;text-align:left;} .pgp-linkopt-img{width:100%;height:100px;object-fit:cover;border-radius:5px;display:block;} .pgp-linkopt-name{font-size:11.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px 4px;} .pgp-linkopt:hover{border-color:rgba(255,255,255,.3);} .pgp-linkopt.on{border-color:var(--orange);} .cp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px;} .cp-sub{font-size:13px;color:rgba(255,255,255,.5);line-height:1.5;margin-top:4px;max-width:520px;} .pgp-titlerow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .pgp-live{flex:0 0 auto;min-width:120px;} /* header: text column (title + On-site toggle inline, then description) on the left; drop zone fills all remaining width to the far right */ .pgp .cp-head{flex-wrap:nowrap;align-items:stretch;gap:24px;margin-bottom:18px;} .pgp-head-txt{flex:0 0 360px;max-width:360px;display:flex;flex-direction:column;gap:6px;} .pgp-head-txt .cp-sub,.pgp-head-txt .cp-note{max-width:none;margin:0;} .pgp-drop{flex:1 1 auto;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 22px;} .pgp-drop .mgr-drop-icon{margin-bottom:6px;} .pgp-drop .mgr-drop-text{font-size:15px;} .pgp-drop .mgr-drop-hint{margin-top:6px;text-align:center;} .pgp-filter{margin-bottom:16px;} .pgp-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));} .pgp-tile{cursor:grab;} .pgp-tile:active{cursor:grabbing;} .pgp-tile.drag-over{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);} .pgp-imgwrap{position:relative;aspect-ratio:auto;height:150px;display:flex;align-items:flex-end;justify-content:center;background:#151309;cursor:pointer;} .pgp-img{width:100%;height:100%;object-fit:contain;} .pgp-info{padding:8px 9px 2px;} .pgp-name{font-size:12px;font-weight:600;color:#f3efe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pgp-name em{color:rgba(255,255,255,.4);font-style:italic;font-weight:400;} .pgp-meta{font-size:10.5px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;} .pgp-bar{display:flex;gap:6px;justify-content:flex-end;padding:6px 9px 9px;} .pgp-drawimg{background:#151309;border-radius:8px;overflow:hidden;display:flex;justify-content:center;align-items:center;max-height:220px;margin-bottom:4px;} .pgp-drawimg img{max-width:100%;max-height:220px;object-fit:contain;display:block;} /* --- cut / crop editor --- */ .pgcrop-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 6px;} .pgcrop-head span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600;font-family:var(--grot);} .pgcrop-reset{background:none;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.65);border-radius:5px;font-size:11px;padding:3px 9px;cursor:pointer;} .pgcrop-reset:hover{color:#fff;border-color:rgba(255,255,255,.35);} .pgcrop-reset:disabled{opacity:.35;cursor:default;} .pgcrop{position:relative;background:#0d0b05;border-radius:8px;overflow:hidden;display:flex;justify-content:center;align-items:center;max-height:440px;margin-bottom:4px;user-select:none;touch-action:none;} .pgcrop-img{display:block;max-width:100%;max-height:440px;pointer-events:none;-webkit-user-drag:none;} .pgcrop-stage{position:absolute;inset:0;} .pgcrop-mask{position:absolute;background:rgba(10,9,5,.68);pointer-events:none;} .pgcrop-box{position:absolute;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;} .pgcrop-h{position:absolute;background:transparent;z-index:3;} .pgcrop-h::after{content:"";position:absolute;background:var(--orange);border:1px solid rgba(0,0,0,.35);border-radius:2px;} .pgcrop-h.e-t,.pgcrop-h.e-b{left:0;right:0;height:16px;cursor:ns-resize;} .pgcrop-h.e-l,.pgcrop-h.e-r{top:0;bottom:0;width:16px;cursor:ew-resize;} .pgcrop-h.e-t{transform:translateY(-8px);}.pgcrop-h.e-b{transform:translateY(8px);} .pgcrop-h.e-l{transform:translateX(-8px);}.pgcrop-h.e-r{transform:translateX(8px);} .pgcrop-h.e-t::after,.pgcrop-h.e-b::after{left:50%;top:50%;width:26px;height:4px;transform:translate(-50%,-50%);} .pgcrop-h.e-l::after,.pgcrop-h.e-r::after{top:50%;left:50%;width:4px;height:26px;transform:translate(-50%,-50%);} .pgcrop-hint{font-size:10.5px;color:rgba(255,255,255,.4);margin:2px 0 8px;} .cp-group{margin-bottom:30px;} /* Content tab: two-column layout so every field group fits in one viewport */ .cp.cp-2col{max-width:1120px;} .cp.cp-2col .cp-body{columns:2;column-gap:40px;} .cp.cp-2col .cp-group{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:26px;} @media (max-width:820px){ .cp.cp-2col .cp-body{columns:1;} } .cp-group-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;margin-bottom:14px;} .cp-field{display:block;margin-bottom:14px;position:relative;} .cp-key{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600;margin-bottom:6px;font-family:var(--grot);} .cp-edited{font-style:normal;color:var(--orange);background:rgba(255,153,0,.14);padding:1px 7px;border-radius:40px;font-size:9.5px;letter-spacing:.1em;} .cp-fieldmsg{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border-radius:40px;color:var(--orange);background:rgba(255,153,0,.14);animation:cp-blink 0.8s steps(1,end) infinite;} @keyframes cp-blink{50%{opacity:0.25;}} .cp-fieldmsg.done{animation:none;color:var(--orange);background:rgba(255,153,0,.14);} .cp-fieldmsg.empty,.cp-fieldmsg.error{animation:none;color:#e8836b;background:rgba(232,131,107,.14);} .cp-lock{background:none;border:none;cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;opacity:.55;flex:none;filter:grayscale(1);} .cp-lock:hover{opacity:.9;} .cp-lock.on{opacity:1;filter:none;} .cp-lock-note{margin-top:5px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);} .cp-field.locked textarea,.cp-field.locked input{border-color:rgba(255,153,0,.4);} .md-funcrow{display:flex;align-items:center;gap:8px;} .md-funcrow input{flex:1;min-width:0;} .cp-syncbtn:disabled{opacity:.6;cursor:default;} .cp-field input,.cp-field textarea{width:100%;background:#111;border:1px solid rgba(255,255,255,.16);color:#fff;padding:10px 12px;border-radius:5px;font-size:14px;font-family:var(--body);resize:vertical;line-height:1.5;} .cp-field input:focus,.cp-field textarea:focus{outline:none;border-color:var(--orange);} .cp-reset{background:none;border:none;color:rgba(255,255,255,.4);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer;} .cp-reset:hover{color:var(--orange);} /* translate-all bar */ .cp-translate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 26px;padding:13px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;} .cp-xlate-btn{background:var(--orange);color:#000;border:none;font-family:var(--grot);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:11px 18px;border-radius:6px;cursor:pointer;} .cp-xlate-btn:hover{filter:brightness(1.07);} .cp-xlate-btn:disabled{opacity:.55;cursor:default;filter:none;} .cp-xlate-status{font-size:12.5px;font-weight:600;letter-spacing:.01em;} .cp-xlate-status .working{color:rgba(255,255,255,.72);} .cp-xlate-status .done{color:var(--orange);} .cp-xlate-status .error{color:#ff8a78;} /* per-field translate/fixed toggle */ .cp-fieldhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:6px;} .cp-fieldhead .cp-key{margin-bottom:0;} .cp-sync{display:inline-flex;gap:2px;background:rgba(255,255,255,.05);padding:3px;border-radius:6px;flex:none;} .cp-syncbtn{background:none;border:none;color:rgba(255,255,255,.5);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:4px;cursor:pointer;font-family:var(--grot);} .cp-syncbtn:hover{color:#fff;} .cp-syncbtn.on{background:var(--orange);color:#000;} .cp-syncbtn--fix.on{background:rgba(255,255,255,.82);color:#000;} .cp-field.fixed .cp-key{color:rgba(255,255,255,.3);} .cp-field.fixed input,.cp-field.fixed textarea{opacity:.7;} .cp-fieldfoot{display:flex;justify-content:flex-end;margin-top:5px;} /* --- about section panel --- */ .ab .ab-grid{display:grid;grid-template-columns:300px 1fr;gap:38px;align-items:stretch;} .ab-figlabel,.ab-slider-lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700;} .ab-figlabel{display:block;margin-bottom:10px;} .ab-figwrap{display:flex;align-items:flex-end;gap:9px;} .ab-fig{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#000;touch-action:none;border:1px solid rgba(255,255,255,.1);flex:1;min-width:0;} .ab-fig-img{position:absolute;inset:0;background-size:cover;} .ab-fig-line{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(255,153,0,.9);pointer-events:none;display:flex;justify-content:center;} .ab-fig-dot{width:11px;height:11px;border-radius:50%;background:var(--orange);border:2px solid #fff;margin-top:-6px;box-shadow:0 1px 5px rgba(0,0,0,.5);} .ab-fig-grab{position:absolute;right:8px;bottom:8px;color:#fff;font-size:13px;opacity:.7;text-shadow:0 1px 3px #000;pointer-events:none;} .ab-fig-credit{flex:none;align-self:flex-end;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--grot);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);white-space:nowrap;} .ab-fig-empty{position:absolute;inset:0;display:flex;align-items:center;text-align:center;justify-content:center;padding:24px;color:rgba(255,255,255,.4);font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;} .ab-figcol{min-width:0;} .ab-creditfield{margin-top:14px;} .ab-drop{margin:14px 0 0;padding:18px;} .ab-msg{font-size:12.5px;font-weight:600;padding:9px 13px;border-radius:6px;margin-bottom:16px;} .ab-msg.ok{color:var(--orange);background:rgba(255,153,0,.12);} .ab-msg.err{color:#ffd2c8;background:rgba(255,90,70,.16);} .ab-slider-row{display:flex;align-items:center;gap:12px;margin:6px 0 18px;} .ab-slider{flex:1;accent-color:var(--orange);} .ab-slider-val{color:var(--orange);font-size:12px;font-weight:600;width:38px;text-align:right;} .ab-remove{background:none;border:1px solid rgba(255,90,70,.5);color:#ff8a78;padding:10px 16px;border-radius:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;} .ab-remove:hover{background:#ff5a46;border-color:#ff5a46;color:#fff;} .ab-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;} .ab-reset{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);padding:10px 16px;border-radius:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;} .ab-reset:hover{border-color:var(--orange);color:var(--orange);} .ab-textcol{min-width:0;display:flex;flex-direction:column;} .ab-text-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;} .ab-bodyfield{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:8px;} .ab-body{flex:1;min-height:200px;line-height:1.6;resize:none;} .ab-text-moved{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:18px 20px;max-width:440px;margin-top:12px;} .ab-textcol textarea[readonly]{background:#0c0c0c;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.62);cursor:default;} .ab-textcol textarea[readonly]:focus{border-color:rgba(255,255,255,.1);} @media (max-width:680px){ .ab .ab-grid{grid-template-columns:1fr;gap:26px;} .ab-figcol{max-width:300px;} } /* --- social panel --- */ .sp{max-width:780px;margin:0 auto;padding:30px 28px 80px;} .sp-list{display:flex;flex-direction:column;gap:8px;margin:22px 0 16px;} .sp-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px;} .sp-grip{color:rgba(255,255,255,.3);cursor:grab;font-size:14px;flex:none;} .sp-row:active .sp-grip{cursor:grabbing;} .sp-ic{color:var(--orange);flex:none;display:flex;} .sp-type{flex:none;width:120px;background:#111;border:1px solid rgba(255,255,255,.16);color:#fff;padding:8px;border-radius:5px;font-size:12.5px;font-family:var(--grot);} .sp-label{flex:0 0 130px;min-width:0;background:#111;border:1px solid rgba(255,255,255,.16);color:#fff;padding:8px 10px;border-radius:5px;font-size:13px;font-family:var(--body);} .sp-url{flex:1;min-width:0;background:#111;border:1px solid rgba(255,255,255,.16);color:#fff;padding:8px 10px;border-radius:5px;font-size:13px;font-family:var(--body);} .sp-type:focus,.sp-label:focus,.sp-url:focus{outline:none;border-color:var(--orange);} .sp-del{flex:none;background:none;border:none;color:rgba(255,255,255,.4);font-size:14px;padding:6px 8px;border-radius:5px;} .sp-del:hover{color:#fff;background:#ff5a46;} .sp-add-open{background:none;border:1px dashed rgba(255,255,255,.24);color:rgba(255,255,255,.65);padding:12px;border-radius:8px;font-size:13px;font-weight:600;width:100%;letter-spacing:.04em;} .sp-add-open:hover{border-color:var(--orange);color:var(--orange);} .sp-add{display:flex;flex-wrap:wrap;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:14px;} .sp-add-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e9e4d8;padding:9px 13px;border-radius:40px;font-size:12.5px;font-weight:600;} .sp-add-btn:hover{border-color:var(--orange);color:var(--orange);} .sp-add-btn svg{color:var(--orange);} .sp-add-cancel{background:none;border:none;color:rgba(255,255,255,.5);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:9px 13px;} .mt-grip{position:absolute;top:7px;right:9px;color:rgba(255,255,255,.6);font-size:15px;text-shadow:0 1px 3px #000;} .mt-info{padding:8px 9px 2px;} .mt-title{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mt-title em{color:rgba(255,255,255,.35);font-weight:500;} .mt-sub{font-size:9.5px;color:var(--orange);letter-spacing:.07em;text-transform:uppercase;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mt-bar{display:flex;gap:2px;padding:6px 6px 8px;} .mt-act{flex:1;background:rgba(255,255,255,.05);border:none;color:rgba(255,255,255,.7);padding:6px 0;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.15s;} .mt-act:hover{background:rgba(255,255,255,.13);color:#fff;} .mt-act.on{color:var(--orange);} .mt-live.on{color:#ffcc00;} .mt-home.on{color:#3ec46d;} .mt-mobb.on{color:#3aa0ff;} .mt-act.mt-s.on{color:#ff5a46;} .mt-act.danger:hover{background:#ff5a46;color:#fff;} .mgr-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--orange);color:#000;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px 22px;border-radius:40px;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.4);} .mgr-drawer-wrap{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;display:flex;justify-content:flex-end;} .mgr-drawer{width:480px;max-width:92vw;background:#1c1b13;height:100%;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:-20px 0 60px rgba(0,0,0,.5);} .md-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;} .md-head button{background:none;border:none;color:#fff;font-size:18px;} .md-photo{width:100%;aspect-ratio:4/3;border-radius:6px;} .md-field{display:flex;flex-direction:column;gap:6px;} .md-field span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;} .md-field input,.md-field select{background:#111;border:1px solid rgba(255,255,255,.18);color:#fff;padding:11px;border-radius:5px;font-size:14px;font-family:var(--grot);} .md-field input:focus,.md-field select:focus{outline:none;border-color:var(--orange);} /* keep autocomplete/autofill-selected fields dark instead of the browser's white repaint */ .md-field input:-webkit-autofill,.md-funcrow input:-webkit-autofill,.cp-field input:-webkit-autofill,.cp-field textarea:-webkit-autofill, .md-field input:-webkit-autofill:focus,.md-funcrow input:-webkit-autofill:focus{ -webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #111 inset;box-shadow:0 0 0 1000px #111 inset;caret-color:#fff;transition:background-color 9999s ease 0s; } .md-feat{background:none;border:1px solid var(--orange);color:var(--orange);padding:12px;border-radius:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;} .md-feat.on{background:var(--orange);color:#000;} .md-row{display:flex;gap:8px;margin-top:4px;} .md-row button{flex:1;} /* ============ RESPONSIVE ============ */ @media(max-width:1100.98px){ .op-about-grid,.op-contact-grid{grid-template-columns:1fr;gap:70px;} .op-about-cols{grid-template-columns:1fr;gap:40px;width:auto;margin-left:0;padding-left:0;} .op-about-textcol{min-height:0;} .contact-form{margin-top:0;} .op-contact-lead{width:auto;max-width:none;padding-left:0;margin:0;} .op-about-lead{width:auto;max-width:none;padding-left:0;margin:0 0 .5em;} .op-contact-grid{width:auto;margin-left:0;padding-left:0;} .op-blog-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);gap:30px;width:auto;margin-left:0;padding-left:0;} .op-blog-nextlist .op-blog-nextitem:first-child{border-top:0;padding-top:0;} .op-about-editorial{grid-template-columns:1fr;gap:34px;justify-items:center;width:auto;margin-left:0;padding-left:0;display:flex;flex-direction:column;} .op-about-col{max-width:560px;order:2;} .op-about-clear{display:none;} .op-about-lead,.op-about-cta{width:auto;margin-left:0;padding-left:0;} .op-about-editorial .op-about-centerpic{position:static;transform:none;left:auto;top:auto;order:1;width:clamp(160px,40vw,240px);} .op-about-editorial .op-about-centerpic .op-about-fig{border:1px solid #404040;} .op-footer-grid{grid-template-columns:1fr 1fr;} .op-nav-links{gap:24px;} /* nav row compresses fluidly instead of colliding: links and icons trade space, nothing wraps, nothing overlaps */ .op-nav,.op-hero-foot{gap:clamp(10px,2vw,24px);padding-left:clamp(24px,4vw,48px);padding-right:clamp(20px,3vw,40px);} .op-nav-brand{font-size:clamp(20px,2.6vw,30px);} .op-hero-nav{display:flex;flex:0 1 auto;min-width:0;gap:clamp(2px,1vw,14px);} .op-hero-nav a{padding:7px clamp(5px,1vw,13px);font-size:clamp(11px,1.15vw,13px);letter-spacing:clamp(.06em,.5vw,.16em);} .op-social{gap:clamp(14px,2.4vw,34px);margin-left:clamp(12px,2.5vw,32px);flex:0 0 auto;} .op-social a svg{width:17px;height:17px;} } /* below ~900px the two groups can no longer coexist: the social icons step out of the top bars (they stay in the footer, where they're duplicated) and the links keep the row */ @media(max-width:900px){ .op-nav > .op-social,.op-hero-foot > .op-social{display:none;} .op-hero-nav{flex-wrap:nowrap;overflow:visible;} } @media(max-width:680px){ .mgr-side{width:180px;} .mgr-sections{display:none;} .sp-row{flex-wrap:wrap;} .sp-type,.sp-label{flex:1;} .sec{padding-left:24px;padding-right:24px;} .op-work{padding-top:44px;} .sec-head{margin-left:0;} .op-gridframe{height:48vh;} .op-about{padding-top:120px;} .op-contact{padding-top:120px;padding-bottom:110px;} .op-tabs{margin:40px 0 52px;gap:12px 24px;} .op-rail-wrap{--railh:clamp(260px,52vh,460px);} .op-rail{gap:18px;} .op-rail-arrow{display:none;} .op-hero-top{padding:18px 24px;} .op-hero-foot{flex-wrap:wrap;padding:16px 24px;gap:10px;} .op-hero-tag{flex-basis:100%;font-size:15px;} .op-social{order:3;} .op-nav{padding:16px 24px;flex-wrap:wrap;gap:10px;} .op-nav-brand{font-size:15px;flex-basis:100%;flex:0 0 100%;} .op-band{height:54vh;min-height:320px;margin-top:0;} .op-band-loc{left:24px;bottom:24px;letter-spacing:.2em;} .op-footer{padding:70px 24px 30px;} .op-footer-grid{grid-template-columns:1fr;gap:48px;} .op-footer-word{margin-top:64px;} .op-lb-top{padding:18px 20px;} .op-lb-mid{padding:0 12px;} .op-lb-arrow{font-size:34px;padding:6px 10px;} .op-lb-img{max-width:92vw;max-height:64vh;} .mgr-side{width:200px;} } /* ============================================================ Script support — Devanagari (Hindi) & Arabic + RTL ============================================================ */ /* Oswald / Archivo / Newsreader don't cover these scripts, so remap the type tokens per language. Custom props inherit, so setting them on cascades through everything. */ html:lang(hi){ --disp:"Noto Sans Devanagari","Oswald",sans-serif; --grot:"Noto Sans Devanagari","Oswald",sans-serif; --body:"Noto Sans Devanagari","Archivo",sans-serif; --serif:"Tiro Devanagari Hindi","Newsreader",serif; } html:lang(ar){ --disp:"Noto Kufi Arabic","Oswald",sans-serif; --grot:"Noto Sans Arabic","Oswald",sans-serif; --body:"Noto Sans Arabic","Archivo",sans-serif; --serif:"Noto Naskh Arabic","Newsreader",serif; } /* Devanagari & Arabic have no case, and letter-spacing on Arabic breaks cursive joining — neutralise both for these scripts. EXCLUDE the Latin brand wordmark: it must stay uppercase, and a none→uppercase flip on already-laid-out text isn't re-shaped by the engine (it would render lowercase-width despite computed uppercase). */ html:lang(hi) [class]:not(.wordmark):not(.op-hero-word):not(.op-nav-brand), html:lang(ar) [class]:not(.wordmark):not(.op-hero-word):not(.op-nav-brand){ text-transform:none !important; letter-spacing:normal !important; } /* Wordmark/display still want a little optical air in Devanagari */ html:lang(hi) .wordmark, html:lang(hi) .op-footer-word{ letter-spacing:.01em !important; } /* The brand name "Leo Martins" is always Latin — never remap it to a script font, and keep it UPPERCASE (the JS width-fit measures the uppercased Latin string, so the rendered glyphs must match). Also force LTR: the fit math positions the wordmark from the LEFT edge (marginLeft / left), so an inherited RTL direction (text-align:right) in Arabic mis-aligns and clips the giant footer + hero wordmark. High specificity so it beats the per-script resets above. */ html[lang] .wordmark, html[lang] .op-nav-brand, html[lang] .op-footer-word, html[lang] .op-footer-word h2{ font-family:"Oswald",sans-serif !important; text-transform:uppercase !important; letter-spacing:0 !important; direction:ltr !important; text-align:left !important; unicode-bidi:isolate !important; } /* ---- RTL (Arabic) ---- */ html[dir="rtl"]{ text-align:right; } html[dir="rtl"] .kicker{ flex-direction:row; } html[dir="rtl"] .kicker::after{ margin-right:0; } /* dropdown is anchored right:0 for LTR — flip it to the start side in RTL so it doesn't overflow off-screen. dir=rtl already reverses the flex order of the code + label, so no manual row-reverse. */ html[dir="rtl"] .lang-menu{ right:auto; left:0; } html[dir="rtl"] .lang-item{ text-align:right; } html[dir="rtl"] .op-langbtn{ text-align:right; } /* form fields read RTL */ html[dir="rtl"] .field input, html[dir="rtl"] .field select, html[dir="rtl"] .field textarea{ text-align:right; } /* Noto Naskh Arabic has no italic — browsers synthesise an ugly slant. Keep all Arabic text upright. (Tiro Devanagari Hindi has a true italic, so Hindi is left as-is.) */ html:lang(ar) .op-hero-tag, html:lang(ar) .op-lead, html:lang(ar) .op-ph-role, html:lang(ar) .op-empty, html:lang(ar) .form-sent, html:lang(ar) .op-lb-role, html:lang(ar) .mgr-empty, html:lang(ar) .md-note, html:lang(ar) [class*="lead"]{ font-style:normal !important; } /* footer machine-translation notice: its own block under the footer columns, wrapping over 2–3 lines, so the copyright row below stays a clean single line */ html[lang="zh"] .op-footer-note{max-width:min(96ch,100%);} .bee-xlate-warn{margin:0 0 8px;padding:8px 11px;border:1px solid rgba(255,153,0,.45);border-radius:6px;background:rgba(255,153,0,.09);color:#ffce8a;font-size:12px;line-height:1.45;} .bee-blurb-use{align-self:flex-start;margin-top:6px;background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);border-radius:5px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;} .bee-blurb-use:hover{border-color:var(--orange);color:var(--orange);} /* --- inline rich text: **bold** _italic_ {{keep original}} --- */ .rt-field{display:flex;flex-direction:column;gap:6px;min-width:0;} .rt-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .rt-btn{flex:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);font-family:var(--grot);font-size:11px;line-height:1;padding:5px 8px;min-width:26px;border-radius:5px;cursor:pointer;transition:border-color .15s,color .15s;} .rt-btn:hover{border-color:var(--orange);color:var(--orange);} .rt-btn.rt-bb{font-weight:800;} .rt-btn.rt-ib{font-style:italic;font-family:var(--serif);font-size:13px;padding:4px 10px;} .rt-btn.rt-kb{font-weight:700;letter-spacing:.1em;font-size:9.5px;padding:6px 9px;} .rt-hint{font-family:var(--grot);font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.32);white-space:nowrap;} /* blog editor: title row stays inline, body textarea keeps growing */ .rt-field.rt-title{flex:1 1 auto;flex-direction:column;gap:4px;} .rt-field.rt-title .bee-title{width:100%;flex:none;} .rt-field.rt-grow{flex:1 1 auto;min-height:356px;} .rt-field.rt-grow .bee-textarea{flex:1 1 auto;min-height:320px;} .bee-write .rt-field.rt-grow>.rt-bar{padding:0 16px;} .bee-cover-f .rt-field{gap:5px;} /* keep-original spans read as normal copy on the site; flagged only in Studio previews */ .rt-keep{} .bee-preview-paper .rt-keep,.be-preview-paper .rt-keep{border-bottom:1px dotted rgba(255,153,0,.55);} /* ABOUT on SHORT viewports: the section is locked to one screen, so its fixed vertical chrome (top/bottom padding, the huge section title, the head gap) was eating the height the editorial spread needs — on a short window the spread was left a sliver and scaled down to unreadable type. The chrome is height-fluid here, giving that room back; the spread's own measure-and-scale then only has to make up the difference. */ .op-about .sec-title{font-size:clamp(38px,min(7.2vw,13svh),118px);} .op-about .sec-head{gap:clamp(10px,2.6svh,24px);} .op-about .op-ab2-foot{padding-top:clamp(12px,2.6svh,26px);} /* ---- BLOG: the original design, with guards for screen aspects it never met ---------- The layout below is unchanged. These rules only stop it breaking on shapes it was not drawn for; on a normal desktop screen none of them do anything. */ /* 1. The cover can never grow past the free height the section actually has, so it cannot run into the next section on a short screen. --bc-room is measured by the blog panel from the SECTION box (never from the grid, whose height the cover itself sets). */ @media(min-width:1100.99px){ /* Cap the COLUMNS, never the cover wrap: the wrap fills its column, so capping it separately let the cover end above the column bottom and pulled "read full entry" off the line "see more" sits on. Both columns share one cap, so both bottoms coincide. */ .op-blog-latest,.op-blog-next{max-height:var(--bc-room,none);} } /* 2. Stacked columns cannot share one screen, so the section stops pretending to: it releases the one-viewport lock and its rows size to their content, exactly as ABOUT does when its spread will not fit. */ @media(max-width:1100.98px){ .op-blog{min-height:0;max-height:none;height:auto;} .op-blog-grid{grid-template-rows:auto;grid-auto-rows:auto;flex:0 0 auto;align-items:start;} /* Stacked: the column has no height to inherit, so the cover's own height is resolved here and its WIDTH is derived from it (0.8x = a 4:5 portrait), centred in the column. Leaving the width at 100% is what turned the cover into a letterbox strip: nothing tied the two dimensions, so the shape floated with the viewport. */ .op-blog-latest{--bc-sh:min(58vh,560px,calc((100vw - 112px) * 1.25));min-height:0;} .op-blog-cover-wrap{height:var(--bc-sh);width:min(100%,calc(var(--bc-sh) * 0.8));margin-inline:auto;} .op-blog-next{min-height:0;overflow:hidden;} } /* 3. Short screens: the cover has reached its floor, so the blurb yields instead of the picture. */ @media(max-height:800px){.op-blog-cover-blurb.is-full{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}} @media(max-height:640px){.op-blog-cover-blurb,.op-blog-cover-blurb.is-full{-webkit-line-clamp:2;}} /* ---- Section rhythm: one gap below every section title ------------------------------- The distance from a section title to its first content block is a single token (--sec-gap), so BLOG, PORTFOLIO, ABOUT and CONTACT share the same rhythm instead of each carrying its own hand-set margin. */ .op-work-stage,.op-blog-grid,.op-contact-grid,.op-ab2-fit,.op-about-editorial,.op-blog-list{margin-top:var(--sec-gap);} /* CONTACT leads with a lead paragraph rather than its grid, so the token applies there instead — the rule is about the first block under the title, whatever that block is. */ .op-contact .op-contact-lead{margin-top:var(--sec-gap);} .op-contact .op-contact-lead + .op-contact-grid{margin-top:0;} /* The resolution upgrade layer inside BgImg is absolutely positioned. These hosts are ALREADY position:absolute (inset:0), so they are containing blocks as-is — giving them position:relative overrode that and collapsed both images to zero height. */ @media (prefers-reduced-motion: reduce){.op-band-img>div,.op-ab2-photo>div{transition:none;}} /* ---- ABOUT on SHORT LANDSCAPE screens (14" laptops included): a real reflow path ----------------------------- Scaling alone cannot fit the spread here (it bottoms out at its legible floor), and the one-column stack is deliberately reserved for portrait shapes. So the spread reflows instead: the left portrait track collapses and the two text columns become free tracks, which lets the measure-and-scale pass genuinely widen them — wider columns mean shorter text, which is the only thing that actually buys height back. */ /* THE SHORT-LANDSCAPE THRESHOLD: height < 880px AND wider than 13/10. Both ABOUT and BLOG use these exact two conditions, so the whole page changes character at one limit instead of each section having its own — that is what keeps it consistent. 880px is a 14" laptop with browser chrome (1512x830); above it the normal layout has enough height, below it no amount of scaling keeps the type readable. */ @media (max-height:880px) and (min-aspect-ratio:13/10){ /* ABOUT's two columns ARE the BLOG right column, twice. BLOG's grid here is .85fr / 1fr across the same full-bleed width with the same gap, so its right column measures (W - gap) / 2.25 — that expression sizes both ABOUT columns, and the flexible first track absorbs the remainder, which right-aligns them on the BLOG grid's right edge. Two corrections the measurement forced: • W is the full-bleed box itself (100vw - 112px - --sbw), NOT 100% of the stage: the measure step widens the stage to availW/s, so a percentage of it is the wrong base. • every length is divided by --ab2-s, because the stage is then scaled by it — the transform cancels the division and the column paints at BLOG's width exactly. Without both, the pair claimed ~108% of the row, the 1fr indent collapsed to zero (the left negative space vanished) and the grid overflowed its own stage. */ /* --ab2-colw and --ab2-gapw are written as single RESOLVED px values by the measure step (it already knows the frame, the gap and the final scale). Authored here as a nested calc(... / var(--ab2-s)) they were substituted into a track list that then failed to take effect as written, and the tracks silently fitted themselves to the stage instead — the columns came out 397px against BLOG's 597px. A plain length cannot fail that way. */ .op-ab2-stage{grid-template-columns:minmax(0,1fr) var(--ab2-colw,1fr) var(--ab2-colw,1fr);column-gap:var(--ab2-gapw,var(--blk-gap));row-gap:clamp(8px,1.6svh,18px);} /* Right-alignment only survives the fit scale if the stage is not also translated: the measure step widens the stage to availW/s, so scaling from its left edge already lands the right edge on availW. The base translate exists to hold column 1 on the site's grid, which is not what governs here. */ .op-ab2-stage{transform:scale(var(--ab2-s,1));} .op-ab2-cols{grid-column:2 / 4;} .op-ab2-col{width:auto;flex:1 1 0;min-width:0;} .op-ab2-lead{grid-column:2 / 4;max-width:none;} .op-about{padding-top:calc(var(--nav-h) + clamp(6px,2svh,28px));} .op-about .sec-title{font-size:clamp(32px,min(7.2vw,11svh),118px);} /* Buy height from the CHROME, not from the body copy: the spread was fitting only by scaling everything down to ~7px, because its natural height is dominated by the lead, the row gaps and the paragraph leading — none of which the reflow touched. Shrinking those shortens the spread at full size, so the scale stays legible. */ .op-ab2-lead{font-size:clamp(17px,2.1vw,24px);line-height:1.22;margin-bottom:0;} .op-ab2-col p{line-height:1.42;margin:0 0 .55em;} .op-ab2-col p:last-child{margin-bottom:0;} /* The portrait stays — it is the defining element of this section. It shrinks honestly instead, which also reduces the float reserve the columns wrap around. */ .op-ab2-stage{--abimg-scale:.72;} /* BALANCE. Three things were off in the reflowed spread: (a) it started hard against the left edge, abandoning the site's vertical spine, so the title floated alone over a void — a small indent that CLOSES as height runs out keeps the spine near the threshold and only surrenders it when the height demands; (b) the columns ran to any width, giving a 120-character measure that reads worse than the small type it was buying; capped at a comfortable line length instead; (c) the title-to-text gap stayed at the full section rhythm while everything around it tightened, which is what read as a hole. It now scales with the height too. */ .op-ab2-stage{--ab2-indent:clamp(0px,calc((100svh - 620px) * 1.15),140px);} /* The portrait nests on the GUTTER: it is placed at left:50% of .op-ab2-cols, so that 50% has to BE the gutter. Capping each column's measure at 62ch broke that — the columns stopped filling the row, the container stayed wider than they were, and its midpoint drifted off the gutter into the right column. Capping the CONTAINER at exactly two columns plus the gap keeps both caps and puts the midpoint back on the gutter. */ /* the grid track now sets the measure, so no separate cap is needed — and the columns fill their tracks exactly, which is what keeps the portrait nested on the gutter at 50% */ .op-ab2-cols{gap:var(--ab2-gapw,var(--blk-gap));max-width:none;} .op-ab2-col{max-width:none;} .op-ab2-fit{margin-top:clamp(12px,2.4svh,var(--sec-gap));} .op-about .sec-head{gap:clamp(6px,1.4svh,24px);} /* Everything above is a clamp that meets the normal layout's value AT the threshold, so crossing 880px is a step of a few pixels rather than a jump — and these properties all animate, so a window being dragged smaller moves rather than snaps. */ /* NOT grid-template-columns. It is animatable, and the fit pass rewrites --ab2-colw several times in quick succession — so the transition kept restarting and the USED track sizes never left their interpolation, sitting at the equal-thirds fallback no matter what was published (even an inline track list had no effect). Gaps and margins carry the smoothness on their own; the tracks must land immediately. */ .op-ab2-stage,.op-ab2-cols,.op-ab2-fit{transition:column-gap .25s ease,gap .25s ease,row-gap .25s ease,margin-top .25s ease;} } /* ---- BLOG on SHORT LANDSCAPE screens: picture apart, all text outside it ------------- Same threshold as ABOUT (height < 880px AND wider than 13/10). A magazine cover needs height. Without it, overlaying the title and blurb on a squeezed picture made both unreadable — and the per-post cover colours are chosen to work ON the photograph, so they fail the moment the text has to sit anywhere else. So here the cover is not squeezed, it is TAKEN APART: the photograph becomes a plain landscape block, and the title, blurb and link move out beside it, set in the section's own palette. The result reads exactly like the older entries next to it — which is also what lets the two links stay on one line. */ @media (max-height:880px) and (min-aspect-ratio:13/10){ .op-blog{min-height:100svh;max-height:100svh;height:100svh;} .op-blog-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:calc(100vw - 112px - var(--sbw,0px));margin-left:min(0px, calc(50% - 50vw + 56px));padding-left:0;gap:var(--blk-gap);align-items:stretch;} .op-blog-latest,.op-blog-next{height:var(--bc-room,auto);min-height:0;overflow:hidden;} .op-blog-cover-wrap{height:100%;width:auto;margin-inline:0;max-height:none;min-height:0;} /* picture on the left, text beside it — nothing printed over the photograph */ /* Explicit rows: the picture SPANS both, so with implicit auto tracks grid handed it half its height each and inflated row 1 far past the title — the title ended up orphaned high above its own blurb. Row 1 hugs the title, row 2 absorbs the remainder. */ .op-blog-cover{position:static;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(18px,2vw,34px);height:100%;min-height:0;align-items:stretch;background:none;} /* The picture is a plain editorial block filling its own track: top on the section's first content line, bottom on the grid's bottom line — the same top-and-bottom discipline the portfolio focus picture follows. Its size comes from the track, never from arithmetic that has to be kept in step with a custom property; the author's focus point drives the crop, so no subject is ever lost to it. */ .op-blog-cover-img{position:static;grid-column:1;grid-row:1 / span 2;align-self:stretch;width:100%;height:100%;object-fit:cover;transform:none!important;} .op-blog-cover-shade{display:none;} /* the section's own palette: the per-post cover colours only make sense over the photo */ /* The base cover pads its text away from the photograph's edges. Off the photograph that padding is just an indent: it pushed the title 22px below the picture's top edge (and below the index title beside it), and inflated row 1 to 88px around a 33px line. */ .op-blog-cover-top{position:static;top:auto!important;grid-column:2;grid-row:1;margin:0;padding:0;} /* Exactly the index titles' type, so the latest entry's title and the first index title share a first baseline instead of being aligned by eye. */ .op-blog-cover-title,.op-blog-cover-title[class*="tcol-"]{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(23px,2vw,32px);line-height:1.1;margin:0;color:var(--orange);} .op-blog-cover-bottom{position:static;padding:0!important;grid-column:2;grid-row:2;margin-top:clamp(10px,1.6svh,18px);display:flex;flex-direction:column;gap:clamp(8px,1.4svh,14px);min-height:0;} /* the hairline under the blurb is what the older entries beside it use, so the dismantled entry reads as one of them rather than as a special case */ .op-blog-cover-blurb,.op-blog-cover-blurb.is-full,.op-blog-cover-blurb[class*="tcol-"]{flex:0 0 auto;max-width:56ch;margin-bottom:0;padding-bottom:clamp(10px,1.8svh,18px);border-bottom:1px solid rgba(242,240,236,.18);color:rgba(242,240,236,.74);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} /* "read full entry" IS "see more" here: same type, same rule under it, same hover — the per-post cover link colours only ever made sense printed over the photograph. */ .op-blog-cover-more,.op-blog-cover-more[class*="lcol-"]{flex:0 0 auto;margin-top:auto;font-family:var(--grot);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;padding:0 0 4px;border-bottom:1px solid rgba(255,255,255,.4);text-shadow:none;display:inline-flex;align-items:center;gap:12px;align-self:flex-start;transition:color .25s,border-color .25s;} .op-blog-cover-more:hover,.op-blog-cover-more[class*="lcol-"]:hover{color:#fff;border-bottom-color:var(--orange);} /* Specificity has to match .op-blog-cover-more.lcol-orange .op-more-arrow path (two classes), which forces the arrow WHITE for orange cover links — correct over a photo, wrong here where the link sits on the section itself. */ .op-blog-cover-more .op-more-arrow path, .op-blog-cover-more[class*="lcol-"] .op-more-arrow path{stroke:var(--orange);} .op-blog-next{display:flex;flex-direction:column;} .op-blog-nextlist{flex:1 1 auto;min-height:0;overflow:hidden;} .op-blog-morewrap-next{margin-top:auto;padding-bottom:0;} /* a grid item in the picture's own cell, so it needs no arithmetic to find the corner */ .op-blog-cover-share{position:static;grid-column:1;grid-row:1;justify-self:end;align-self:start;margin:12px;z-index:2;} .op-blog-cover-img,.op-blog-cover-bottom{transition:height .25s ease,margin .25s ease;} /* very short rows: the blurb yields a line before the picture does */ @media (max-height:620px){.op-blog-cover-blurb,.op-blog-cover-blurb.is-full{-webkit-line-clamp:2;}} } /* ---- The top bar on SHORT LANDSCAPE screens ------------------------------------------ Same threshold as ABOUT and BLOG. A 76px bar with a 30px wordmark is a tenth of a 830px window, and it was the single largest fixed claim on a screen where every section is fighting for height. It shrinks with the rest — and because the sections derive their top clearance from --nav-h, the saving is handed straight to the content. The hero foot bar is the SAME bar (the nav appears exactly where it sits, so the handoff has no jump), so both must shrink together — never one alone. Every value is a clamp that meets its full-size value AT the threshold, so crossing 880px is a step of a pixel or two, and these properties animate as a window is dragged. */ @media (max-height:880px) and (min-aspect-ratio:13/10){ :root{--nav-h:clamp(50px,6.6svh,76px);} /* Desktop keeps the tagline/wordmark visually equidistant from the bar's left edge and its bottom (48px left vs 20px vertical — a ~2.4 ratio). Shrinking only the vertical padding broke that, so the horizontal padding shrinks with it and the ratio is preserved. */ .op-nav,.op-hero-foot{padding-top:clamp(10px,2.1svh,20px);padding-bottom:clamp(10px,2.1svh,20px);padding-left:clamp(38px,5.2svh,48px);padding-right:clamp(30px,4.3svh,40px);transition:min-height .25s ease,padding .25s ease;} /* FLOW mode bunches every group against the right edge because the brand alone absorbs the slack. Equal auto margins split the free space evenly between the four blocks instead, so the bar reads like the wide-desktop grid: wordmark left, then links, icons, language spaced across the row. */ html:not(.op-social-grid) .op-nav > .op-nav-brand, html:not(.op-social-grid) .op-hero-foot > .op-hero-tag{flex:0 1 auto;} html:not(.op-social-grid) .op-nav > .op-hero-nav, html:not(.op-social-grid) .op-hero-foot > .op-hero-nav, html:not(.op-social-grid) .op-nav > .op-social, html:not(.op-social-grid) .op-hero-foot > .op-social, html:not(.op-social-grid) .op-nav > .op-hero-lang, html:not(.op-social-grid) .op-hero-foot > .op-hero-lang{margin-left:auto;} .op-nav-brand{font-size:clamp(19px,2.9svh,30px);transition:font-size .25s ease;} .op-hero-tag{font-size:clamp(14px,1.9svh,18px);} .op-nav .op-hero-nav a,.op-hero-foot .op-hero-nav a{font-size:clamp(11px,1.4svh,13px);padding-top:clamp(4px,.8svh,7px);padding-bottom:clamp(4px,.8svh,7px);} .op-nav .op-social a svg,.op-hero-foot .op-social a svg{width:clamp(15px,2svh,20px);height:clamp(15px,2svh,20px);} .op-nav .op-hero-lang,.op-hero-foot .op-hero-lang{font-size:clamp(11px,1.4svh,13px);} } /* ---- PAGES on SHORT LANDSCAPE screens -------------------------------------------------- Same threshold as ABOUT / BLOG / CONTACT. The strip's height IS the section's leftover space, and the fixed 104/80px paddings plus the full-size title were eating most of it — so the pages stayed small and could barely grow at the centre. Every value here is a clamp that meets its normal value AT 880px, so the desktop layout is untouched. */ @media (max-height:880px) and (min-aspect-ratio:13/10){ .op-pages{padding-top:calc(var(--nav-h) + clamp(6px,3.2svh,28px));padding-bottom:clamp(18px,9svh,80px);} .op-pages .sec-title{font-size:clamp(34px,min(7.2vw,10.6svh),118px);} .op-pages .sec-head{gap:clamp(8px,2.7svh,24px);} .op-pages,.op-pages .sec-head{transition:padding .25s ease,gap .25s ease;} } /* ---- CONTACT on SHORT LANDSCAPE screens ------------------------------------------------ Same threshold as ABOUT and BLOG (height < 880px AND wider than 13/10). THREE columns on one row instead of a stack: the title, then the statement with its BOTTOM on the title's bottom line (details and "based in" follow underneath it), then the black form to their right with its TOP on the title's top line. Nothing occupies a full-width line, so the section holds one viewport without shrinking the type much. GEOMETRY: the section keeps its normal .sec box (1469 wide, centred, 56px padding) exactly like PORTFOLIO/BLOG/ABOUT — the full-bleed offsets stay on the individual items that already own them (.sec-head keeps its own). Never negate a percentage-bearing var at a different use site: a custom property is substituted as a token, so its 50% resolves against whatever box consumes it — that is what put 510px of padding on the title and painted it through the statement. */ @media (max-height:880px) and (min-aspect-ratio:13/10){ .op-contact{--crow:clamp(40px,5.6svh,58px); display:grid;grid-template-columns:minmax(0,calc(var(--pf-w,540px) - 56px)) minmax(0,1fr) minmax(0,var(--blk-w)); grid-template-rows:auto minmax(0,1fr);align-content:start;column-gap:var(--blk-gap); padding-bottom:clamp(24px,4svh,80px);} /* .sec-head's base margin-left is a full-bleed offset whose 50% resolves against its own containing block. As a grid item that block is column 1, not the section, so it computed -538px and threw the title off-screen. --cbleed is the same offset as a RESOLVED length, measured against BLOG's grid by the section itself, so it cannot be re-resolved anywhere. min-width:0 stops the head overflowing its track; the title also steps down like ABOUT's. */ .op-contact .sec-head{grid-column:1;grid-row:1;align-self:start;min-width:0;margin-left:var(--cbleed,0px);} .op-contact .sec-title{font-size:clamp(38px,min(6.4vw,11svh),92px);} /* statement sits DIRECTLY UNDER the title, in the same left column */ .op-contact .op-contact-lead{grid-column:1;grid-row:2;width:auto;max-width:none;padding-left:0;margin:clamp(12px,2.4svh,26px) 0 0 var(--cbleed,0px);align-self:start;font-size:clamp(17px,2.2svh,24px);line-height:1.28;} .op-contact-grid{display:contents;} /* contact/social rows raised to the TITLE's top line (--ck-h clears the kicker above it) */ .op-contact-grid > .rev:first-child{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:var(--ck-h,0px);min-width:0;} /* top on the TITLE's top line: --ck-h is the kicker block above the title, measured and published by the section itself (the form would otherwise align to the kicker, ~60px high). Column 3 ends at the section's CONTENT edge (1413), not the shared full-bleed edge (1392), so the form is pulled back in by the same measured offset — zeroing its margin was not enough, the 21px gap is the bleed itself. */ .op-contact .contact-form{grid-column:3;grid-row:1 / span 2;align-self:start; margin-top:var(--ck-h,0px);margin-right:calc(-1 * var(--cbleed,0px));margin-bottom:0;min-width:0; padding:clamp(18px,3svh,38px) 40px clamp(20px,3.2svh,44px); display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,2vw,32px);align-items:start;} /* human check + SEND share one row; everything else spans the full form width */ .op-contact .contact-form > .field,.op-contact .contact-form > .form-sent{grid-column:1 / -1;} .op-contact .cf-human{grid-column:1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px clamp(12px,1.6vw,20px);margin-top:clamp(10px,2svh,48px);} /* SEND's baseline row sits on the "I swear I'm human" row: the check button's own 14px padding is what the button must clear to line its text up with that label. */ .op-contact .contact-form .contact-send{grid-column:2;justify-self:end;align-self:start;margin-top:calc(clamp(10px,2svh,48px) + 14px);} .cd-based{margin-top:clamp(12px,2.4svh,52px);font-size:clamp(14px,1.9svh,18px);} .op-contact .field span{height:var(--crow);padding-bottom:clamp(4px,.8svh,8px);} .op-contact .field input,.op-contact .field select,.op-contact .field textarea{height:var(--crow);} .op-contact .field textarea{min-height:var(--crow);} .op-contact .contact-form .btn-solid{margin-top:clamp(10px,2svh,42px);} /* every value meets its full-size value AT the threshold, so crossing 880px is a step of a pixel or two rather than a jump */ /* NOT margin on the form. Its base margins are the black bleed (-40px sides, -96px top), so transitioning them animates the frame from that state to the committed one on load — a visible drift, and any measurement inside 250ms reads an intermediate value rather than the offsets that were published. The form's alignment must land immediately. */ .op-contact,.op-contact .op-contact-lead{transition:padding .25s ease,margin .25s ease,font-size .25s ease;} .op-contact .contact-form{transition:padding .25s ease;} }