/* The Anubhuti case study's own styles: the 9 sheets it grew in (2026-10-21 to 10-31), merged in their old load order so the cascade is unchanged. Rules for parts the page no longer has were dropped. The live specimens are in anubhuti-specimens.css. */ /* ==== was anubhuti-case-tokens.css ==== */ :root{--an-color-ivory-50:#fbf7f0;--an-color-sand-100:#f3e8d8;--an-color-sand-150:#efe3d1;--an-color-sand-200:#ecdcc4;--an-color-sand-300:#e6d3b8;--an-color-sand-500:#c8ab8c;--an-color-stone-200:#e9e0d4;--an-color-zari-400:#d9a441;--an-color-copper-400:#cc8a57;--an-color-copper-600:#995e35;--an-color-copper-300:#e6b181;--an-color-bronze-600:#8a5a3b;--an-color-umber-500:#8c735d;--an-color-umber-600:#6b5646;--an-color-umber-550:#7d634e;--an-color-espresso-900:#2a1d15;--an-color-espresso-950:#1b1511;--an-color-espresso-850:#382b23;--an-color-rust-600:#a73c24;--an-color-rust-700:#8f301b;--an-color-rust-300:#f1ac96;--an-color-rust-400:#e99177;--an-color-leaf-600:#1f7a4a;--an-color-leaf-700:#186a3e;--an-color-leaf-900:#103822;--an-color-white:#ffffff;--an-font-family-serif:'Gilda Display', Georgia, serif;--an-font-family-sans:'Instrument Sans', 'Helvetica Neue', sans-serif;--an-font-weight-regular:400;--an-font-weight-semibold:600;--an-font-size-11:11px;--an-font-size-12:12px;--an-font-size-13:13px;--an-font-size-14:14px;--an-font-size-15:15px;--an-font-size-17:17px;--an-font-size-22:22px;--an-font-size-26:26px;--an-font-size-32:32px;--an-font-size-44:44px;--an-font-line-height-none:1;--an-font-line-height-tight:1.06;--an-font-line-height-snug:1.15;--an-font-line-height-relaxed:1.3;--an-font-line-height-16:16px;--an-font-line-height-20:20px;--an-font-line-height-24:24px;--an-font-line-height-28:28px;--an-font-line-height-32:32px;--an-font-letter-spacing-tight:-0.015em;--an-font-letter-spacing-normal:0;--an-font-letter-spacing-wide:0.02em;--an-font-letter-spacing-caps:0.16em;--an-font-letter-spacing-caps-wide:0.2em;--an-space-025:2px;--an-space-050:4px;--an-space-075:6px;--an-space-100:8px;--an-space-125:10px;--an-space-150:12px;--an-space-175:14px;--an-space-200:16px;--an-space-250:20px;--an-space-300:24px;--an-space-350:28px;--an-space-400:32px;--an-space-450:36px;--an-space-500:40px;--an-space-600:48px;--an-space-700:56px;--an-space-800:64px;--an-space-900:72px;--an-space-1000:80px;--an-space-1200:96px;--an-space-1500:120px;--an-radius-none:0px;--an-radius-sm:2px;--an-radius-pill:999px;--an-motion-ease-out:cubic-bezier(.22,.61,.36,1);--an-duration-instant:0ms;--an-duration-press:100ms;--an-duration-fast:150ms;--an-duration-standard:250ms;--an-duration-overlay:300ms;--an-duration-slow:500ms;--an-duration-reveal:750ms;--an-duration-image:1200ms;--an-duration-ambient:14000ms;--an-duration-stagger:60ms;--an-duration-attention:3400ms;--an-color-surface-page:var(--an-color-ivory-50);--an-color-surface-subtle:var(--an-color-sand-100);--an-color-surface-hover:var(--an-color-sand-200);--an-color-surface-inverse:var(--an-color-espresso-900);--an-color-surface-glass:rgba(251,247,240,0.94);--an-color-surface-scrim:rgba(42,29,21,0.5);--an-color-surface-scrim-strong:rgba(42,29,21,0.85);--an-color-surface-disabled:var(--an-color-stone-200);--an-color-text-primary:var(--an-color-espresso-900);--an-color-text-secondary:var(--an-color-umber-600);--an-color-text-tertiary:var(--an-color-umber-550);--an-color-text-accent:var(--an-color-bronze-600);--an-color-text-action:var(--an-color-rust-600);--an-color-text-ornament:var(--an-color-copper-600);--an-color-text-inverse:var(--an-color-ivory-50);--an-color-text-inverse-muted:var(--an-color-sand-100);--an-color-text-on-whatsapp:var(--an-color-white);--an-color-text-on-accent:var(--an-color-espresso-900);--an-color-border-subtle:var(--an-color-sand-300);--an-color-border-faint:var(--an-color-sand-150);--an-color-border-strong:var(--an-color-umber-500);--an-color-border-bold:var(--an-color-espresso-900);--an-color-border-inverse:var(--an-color-ivory-50);--an-color-border-ornament:var(--an-color-copper-400);--an-color-border-zari:var(--an-color-zari-400);--an-color-border-action:var(--an-color-rust-600);--an-color-accent-zari:var(--an-color-zari-400);--an-color-accent-copper:var(--an-color-copper-400);--an-color-action-primary:var(--an-color-rust-600);--an-color-action-primary-hover:var(--an-color-rust-700);--an-color-action-on-primary:var(--an-color-ivory-50);--an-color-whatsapp-bg:var(--an-color-leaf-600);--an-color-whatsapp-bg-hover:var(--an-color-leaf-700);--an-color-focus:var(--an-color-espresso-900);--an-color-state-error:var(--an-color-rust-700);--an-color-state-success:var(--an-color-text-accent);--an-color-state-warning:var(--an-color-bronze-600);--an-type-display-family:var(--an-font-family-serif);--an-type-display-weight:var(--an-font-weight-regular);--an-type-display-size:clamp(48px, 6vw, 112px);--an-type-display-line:var(--an-font-line-height-none);--an-type-display-tracking:var(--an-font-letter-spacing-tight);--an-type-title-family:var(--an-font-family-serif);--an-type-title-weight:var(--an-font-weight-regular);--an-type-title-size:clamp(40px, 5vw, 76px);--an-type-title-line:var(--an-font-line-height-tight);--an-type-title-tracking:var(--an-font-letter-spacing-tight);--an-type-heading-xl-family:var(--an-font-family-serif);--an-type-heading-xl-weight:var(--an-font-weight-regular);--an-type-heading-xl-size:clamp(36px, 4vw, 60px);--an-type-heading-xl-line:var(--an-font-line-height-tight);--an-type-heading-xl-tracking:0;--an-type-heading-lg-family:var(--an-font-family-serif);--an-type-heading-lg-weight:var(--an-font-weight-regular);--an-type-heading-lg-size:clamp(30px, 3.2vw, 48px);--an-type-heading-lg-line:var(--an-font-line-height-tight);--an-type-heading-lg-tracking:0;--an-type-heading-md-family:var(--an-font-family-serif);--an-type-heading-md-weight:var(--an-font-weight-regular);--an-type-heading-md-size:clamp(26px, 2.4vw, 38px);--an-type-heading-md-line:var(--an-font-line-height-snug);--an-type-heading-md-tracking:0;--an-type-heading-sm-family:var(--an-font-family-serif);--an-type-heading-sm-weight:var(--an-font-weight-regular);--an-type-heading-sm-size:clamp(22px, 1.9vw, 30px);--an-type-heading-sm-line:var(--an-font-line-height-snug);--an-type-heading-sm-tracking:0;--an-type-card-title-family:var(--an-font-family-serif);--an-type-card-title-weight:var(--an-font-weight-regular);--an-type-card-title-size:clamp(17px, 1.3vw, 22px);--an-type-card-title-line:var(--an-font-line-height-relaxed);--an-type-card-title-tracking:0;--an-type-numeral-family:var(--an-font-family-serif);--an-type-numeral-weight:var(--an-font-weight-regular);--an-type-numeral-size:var(--an-font-size-44);--an-type-numeral-line:var(--an-font-line-height-none);--an-type-numeral-tracking:0;--an-type-lead-family:var(--an-font-family-sans);--an-type-lead-weight:var(--an-font-weight-regular);--an-type-lead-size:var(--an-font-size-17);--an-type-lead-line:var(--an-font-line-height-28);--an-type-lead-tracking:0;--an-type-body-family:var(--an-font-family-sans);--an-type-body-weight:var(--an-font-weight-regular);--an-type-body-size:var(--an-font-size-15);--an-type-body-line:var(--an-font-line-height-24);--an-type-body-tracking:0;--an-type-small-family:var(--an-font-family-sans);--an-type-small-weight:var(--an-font-weight-regular);--an-type-small-size:var(--an-font-size-13);--an-type-small-line:var(--an-font-line-height-20);--an-type-small-tracking:0;--an-type-label-family:var(--an-font-family-sans);--an-type-label-weight:var(--an-font-weight-semibold);--an-type-label-size:var(--an-font-size-15);--an-type-label-line:var(--an-font-line-height-20);--an-type-label-tracking:var(--an-font-letter-spacing-wide);--an-type-eyebrow-family:var(--an-font-family-sans);--an-type-eyebrow-weight:var(--an-font-weight-semibold);--an-type-eyebrow-size:var(--an-font-size-12);--an-type-eyebrow-line:var(--an-font-line-height-16);--an-type-eyebrow-tracking:var(--an-font-letter-spacing-caps-wide);--an-type-eyebrow-case:uppercase;--an-type-caps-family:var(--an-font-family-sans);--an-type-caps-weight:var(--an-font-weight-semibold);--an-type-caps-size:var(--an-font-size-11);--an-type-caps-line:var(--an-font-line-height-16);--an-type-caps-tracking:var(--an-font-letter-spacing-caps);--an-type-caps-case:uppercase;--an-space-section-lg:clamp(64px, 8vw, 120px);--an-space-section-md:clamp(56px, 7vw, 104px);--an-space-section-sm:clamp(40px, 6vw, 96px);--an-space-layout-xl:clamp(32px, 6vw, 120px);--an-space-layout-lg:clamp(32px, 5vw, 80px);--an-space-layout-md:clamp(24px, 3vw, 48px);--an-space-layout-sm:clamp(16px, 2vw, 32px);--an-space-layout-xs:clamp(12px, 1.5vw, 24px);--an-space-layout-gutter:clamp(16px, 5vw, 96px);--an-space-layout-max:2000px;--an-shadow-overlay:0 24px 48px -24px rgba(42,29,21,0.32);--an-shadow-ring:0 0 0 1px var(--an-color-espresso-900);--an-motion-duration-instant:var(--an-duration-instant);--an-motion-duration-press:var(--an-duration-press);--an-motion-duration-fast:var(--an-duration-fast);--an-motion-duration-standard:var(--an-duration-standard);--an-motion-duration-overlay:var(--an-duration-overlay);--an-motion-duration-slow:var(--an-duration-slow);--an-motion-duration-reveal:var(--an-duration-reveal);--an-motion-duration-image:var(--an-duration-image);--an-motion-duration-ambient:var(--an-duration-ambient);--an-motion-duration-stagger:var(--an-duration-stagger);--an-motion-duration-attention:var(--an-duration-attention);--an-interaction-target-min:44px;--an-interaction-focus-width:2px;--an-interaction-focus-offset:3px;--an-button-height:52px;--an-button-padding-x:var(--an-space-400);--an-button-radius:var(--an-radius-sm);--an-button-primary-bg:var(--an-color-action-primary);--an-button-primary-bg-hover:var(--an-color-action-primary-hover);--an-button-primary-fg:var(--an-color-action-on-primary);--an-button-secondary-border:var(--an-color-border-strong);--an-button-secondary-fg:var(--an-color-text-primary);--an-button-secondary-bg-hover:var(--an-color-surface-inverse);--an-button-secondary-fg-hover:var(--an-color-text-inverse);--an-button-disabled-bg:var(--an-color-surface-disabled);--an-button-disabled-fg:var(--an-color-text-secondary);--an-card-media-bg:var(--an-color-surface-subtle);--an-card-tag-tissue:var(--an-color-accent-zari);--an-card-tag-silk:var(--an-color-surface-subtle);--an-card-tag-tissue-fg:var(--an-color-text-on-accent);--an-card-tag-silk-fg:var(--an-color-text-primary);--an-header-bg:var(--an-color-surface-glass);--an-header-border:var(--an-color-border-subtle);--an-header-announcement-bg:var(--an-color-surface-inverse);--an-header-announcement-fg:var(--an-color-text-inverse-muted);--an-badge-bg:var(--an-color-action-primary);--an-badge-fg:var(--an-color-action-on-primary);--an-whatsapp-bg:var(--an-color-whatsapp-bg);--an-whatsapp-bg-hover:var(--an-color-whatsapp-bg-hover);--an-whatsapp-fg:var(--an-color-text-on-whatsapp);--an-whatsapp-shadow:0 12px 30px -10px rgba(16,56,34,0.6);--an-field-bg:var(--an-color-surface-page);--an-field-fg:var(--an-color-text-primary);--an-field-placeholder:var(--an-color-text-tertiary);--an-field-border:var(--an-color-border-strong);--an-field-focus:var(--an-color-focus);--an-field-error:var(--an-color-state-error);--an-field-height:48px;--an-field-radius:var(--an-radius-sm);--an-field-padding-x:var(--an-space-150);--an-dialog-bg:var(--an-color-surface-page);--an-dialog-scrim:var(--an-color-surface-scrim);--an-dialog-shadow:var(--an-shadow-overlay)} /* ==== was anubhuti-editorial.css ==== */ @font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:'Gilda Display';src:url('fonts/gilda-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap} :root{--case-paper:#cecbc1;--case-ink:#11110f;--case-rule:#b9b7ad;--case-muted:#57574f;--gutter:clamp(24px,3.8vw,72px)}*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--case-paper);color:var(--case-ink);font:400 18px/1.35 'Instrument Sans',Arial,sans-serif}a{color:inherit;text-underline-offset:5px}button,input,summary{font:inherit}button,summary{cursor:pointer}button,a,input,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid currentColor;outline-offset:5px}.skip{position:fixed;z-index:10;top:-100px;left:24px;background:var(--case-paper);padding:16px}.skip:focus{top:16px}p,h1,h2,h3,figure{margin:0}img{display:block;max-width:100%}button{border-radius:0}.mobile-menu{display:none}.case-hero{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:80px var(--gutter) 130px;min-height:490px}.hero-meta{display:flex;align-items:start;flex-direction:column;justify-content:space-between;font-size:14px;padding-bottom:24px}.hero-meta>div>span{color:var(--case-muted)}.hero-meta p{margin-top:5px}.case-hero h1{font-size:clamp(44px,5.05vw,80px);line-height:1.07;font-weight:400;letter-spacing:-.035em;max-width:20ch}.chapter{padding:140px var(--gutter) 0}.chapter-inner{max-width:1600px;margin:auto}.chapter h2,.foundation-index h2{font-size:clamp(64px,9.5vw,152px);font-weight:400;letter-spacing:-.055em;line-height:.99;max-width:15ch;margin-bottom:72px}.chapter-copy{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-left:53.6%;font-size:18px;line-height:1.35;margin-bottom:70px}.chapter-copy p{max-width:32ch}.chapter:has(+.night),.chapter:last-child{padding-bottom:130px}.night{background:#11110f;color:var(--case-paper)}.night .chapter-copy{color:#c2c0b6}.chapter.night{padding-bottom:130px}.brand-interlude{padding:140px var(--gutter)}.brand-interlude>p{font-size:clamp(64px,9vw,144px);letter-spacing:-.055em;line-height:1.05;margin:50px 0 100px}.process-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0;gap:32px}.process-flow li{border-top:1px solid var(--case-rule);padding-top:24px}.process-flow span{font-size:11px;color:var(--case-muted)}.process-flow strong{display:block;font-size:26px;line-height:1.15;font-weight:400;margin:24px 0 20px;letter-spacing:-.025em}.process-flow p{font-size:15px;max-width:24ch}.evidence{margin:60px 0 0}.evidence img{width:100%;height:auto}.evidence figcaption{font-size:12px;color:var(--case-muted);margin-top:20px;max-width:80ch}.foundation-index{padding:140px var(--gutter) 0;display:grid;grid-template-columns:1.7fr 1fr;column-gap:48px}.foundation-index h2{font-size:clamp(58px,7.6vw,120px);max-width:17ch}.foundation-index ol{padding:0;margin:0;list-style:none;align-self:center}.foundation-index li{display:flex;gap:45px;border-bottom:1px solid var(--case-rule);padding:18px 0;text-transform:uppercase;font-size:20px}.foundation-index li span{font-size:12px;color:var(--case-muted)}.foundation-index>p{grid-column:2;font-size:18px;max-width:40ch;margin:10px 0 50px}.palette{display:grid;grid-template-columns:repeat(5,1fr);background:#fbf7f0}.palette i{display:block;background:var(--swatch);height:270px}.palette span{display:block;font:30px 'Gilda Display',serif;color:#2a1d15;padding:24px 24px 10px}.palette code{display:block;color:#6b5646;padding:0 24px 28px;font-size:12px}.client-panel{background:var(--an-color-surface-page);color:var(--an-color-text-primary);padding:60px;font-family:var(--an-font-family-sans)}.type-more summary{display:flex;justify-content:space-between;gap:24px;padding:28px 0;font-size:14px;list-style:none}.type-more summary::-webkit-details-marker{display:none}.client-panel h3{font:400 38px/1.12 var(--an-font-family-serif);margin:24px 0}.client-panel p{font-size:15px;line-height:1.6;color:var(--an-color-text-secondary)}.text-button{background:none;border:0;padding:12px 0;text-decoration:underline;text-underline-offset:5px;font-size:14px;color:inherit}.motion-track{height:18px;border-bottom:1px solid #e6d3b8;margin-top:30px}.motion-track i{display:block;background:#a73c24;width:18px;height:18px;border-radius:50%}.alias-chain>div{position:relative;border-top:1px solid #505049;padding:32px 0 60px}.alias-chain>div:not(:last-child)::after{content:'↓';position:absolute;bottom:18px;left:0;color:#c8ab8c}.alias-chain span{display:block;font-size:12px;color:#b7b5a9;margin-bottom:18px}.alias-chain code{font-size:clamp(18px,2.2vw,32px);overflow-wrap:anywhere}.mode-panel{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;min-height:480px}.mode-panel h3{font-size:60px}.component-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:24px}.component-mosaic img{width:100%}.screen-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}.screen-strip img{width:100%;height:auto;border:1px solid #b9b7ad}.screen-strip figcaption{margin-top:22px;font-size:15px}.screen-strip figcaption span{display:block;font-size:10px;color:var(--case-muted);margin-bottom:8px}.checkout-screens{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}.checkout-screens img{width:100%;height:auto}.checkout-screens figcaption{font-size:13px;margin-top:18px}.outcomes-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px 100px;margin:90px 0 60px}.outcomes-grid>div{border-top:1px solid var(--case-rule);padding-top:28px}.outcomes-grid span{font-size:18px;display:block;max-width:25ch}.outcomes-grid strong{display:block;font-size:clamp(60px,8vw,120px);font-weight:400;letter-spacing:-.06em;line-height:1.1;margin:25px 0}.outcomes-grid small{font-size:12px;color:var(--case-muted)}#outcomes{padding-bottom:140px}.next-project{display:flex;align-items:center;justify-content:space-between;gap:32px;border-block:1px solid var(--case-rule);padding:60px var(--gutter);text-decoration:none}.next-project>span:first-child{font-size:12px}.next-project strong{font-size:clamp(60px,8vw,110px);font-weight:400;letter-spacing:-.05em;margin-right:auto}.next-project>span:last-child{font-size:70px}.next-project:hover{background:#c1bfb3}footer{padding:110px var(--gutter) 35px}footer>p{font-size:12px;margin-bottom:45px}dialog{border:1px solid #8c735d;padding:32px;width:min(440px,calc(100vw - 32px));background:#fbf7f0;color:#2a1d15;font:15px var(--an-font-family-sans)}dialog::backdrop{background:#2a1d1580}dialog header{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:32px}dialog h2{font:32px/1.1 'Gilda Display',serif}dialog label{display:block;padding:12px 0}dialog form>p{font-size:12px;line-height:1.6;color:#6b5646;margin-top:20px} @media(min-width:1700px){.chapter-copy{font-size:21px}.case-hero{padding-top:110px;min-height:640px}} @media(max-width:1000px){.case-hero{grid-template-columns:1fr 2fr;padding-top:60px;padding-bottom:90px}.chapter{padding-top:100px}.chapter-copy{margin-left:40%;font-size:17px;gap:24px}.chapter h2{margin-bottom:55px}.foundation-index{grid-template-columns:1.3fr 1fr}.foundation-index li{font-size:16px;gap:24px}.palette i{height:180px}.palette span{font-size:24px;padding-left:16px}.palette code{padding-left:16px}.contrast-board,.client-panel{padding:40px}.mode-panel{gap:30px}.mode-panel h3{font-size:48px}.screen-strip{grid-template-columns:1fr 1fr;gap:48px 24px}} @media(max-width:650px){body{font-size:17px}.mobile-menu{display:block}.mobile-menu summary{list-style:none;padding:12px 0}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;left:0;right:0;top:76px;background:var(--case-paper);z-index:5;border-block:1px solid var(--case-rule);padding:24px;display:flex;gap:32px;font-size:16px}.case-hero{grid-template-columns:1fr;gap:36px;padding-top:45px;padding-bottom:65px}.hero-meta{flex-direction:row;align-items:start;gap:24px;padding:0}.hero-meta>div{font-size:11px;flex-shrink:0}.case-hero h1{font-size:43px;line-height:1.08;max-width:15ch;letter-spacing:-.045em}.chapter{padding-top:80px}.chapter h2{font-size:57px;line-height:1.01;letter-spacing:-.055em;margin-bottom:45px;max-width:13ch}.chapter-copy{margin-left:0;grid-template-columns:1fr;gap:24px;font-size:17px;line-height:1.45;margin-bottom:45px}.chapter-copy p{max-width:none}.chapter:has(+.night),.chapter:last-child,.chapter.night{padding-bottom:80px}.brand-interlude{padding:80px var(--gutter)}.brand-interlude>p{font-size:62px;margin:36px 0 55px}.process-flow{grid-template-columns:1fr 1fr;gap:40px 24px}.process-flow strong{font-size:25px}.process-flow p{font-size:14px}.foundation-index{padding-top:80px;grid-template-columns:1fr;gap:0}.foundation-index h2{font-size:57px;margin-bottom:45px}.foundation-index ol{margin-bottom:30px}.foundation-index>p{grid-column:1;font-size:17px;margin-bottom:0}.palette{grid-template-columns:1fr 1fr;gap:0}.palette>div:last-child{grid-column:1 / -1}.palette i{height:150px}.palette>div:last-child i{height:100px}.palette span{font-size:27px}.client-panel{padding:28px}.client-panel h3{font-size:32px}.alias-chain code{font-size:23px}.alias-chain>div{padding-top:25px}.mode-panel{grid-template-columns:1fr;gap:40px}.mode-panel h3{font-size:44px}.component-mosaic{grid-template-columns:1fr;gap:16px}.screen-strip{gap:35px 16px}.screen-strip figcaption{font-size:12px;margin-top:15px}.screen-strip figcaption span{font-size:8px}.checkout-screens{grid-template-columns:1fr;gap:40px}.checkout-screens img{max-width:390px;margin:auto}.outcomes-grid{gap:40px 20px;margin-top:55px}.outcomes-grid span{font-size:13px}.outcomes-grid strong{font-size:44px;margin:20px 0;letter-spacing:-.06em}.outcomes-grid small{font-size:10px;line-height:1.5;display:block}#outcomes{padding-bottom:80px}.next-project{padding-block:40px;gap:20px;flex-wrap:wrap}.next-project>span:first-child{font-size:9px;flex-basis:100%}.next-project strong{font-size:65px}.next-project>span:last-child{font-size:48px}footer{padding-top:75px}.evidence{margin-top:40px}.evidence figcaption{font-size:10px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .evidence>a{display:block}.hero-meta a{text-decoration:none}.hero-meta a:hover{text-decoration:underline}@media(max-width:650px){.mobile-menu summary{min-height:44px;display:flex;align-items:center}} /* Editorial chapter rhythm: full-width rules and right-hand reading columns. */ @media(min-width:651px){.case-hero{position:relative}.chapter-copy{margin-right:32px}.chapter h2::after{content:"";display:block;width:calc(100vw - var(--gutter) * 2);max-width:1600px;height:1px;background:var(--case-rule);margin-top:70px}.night h2::after{background:#494941}} @media(max-width:650px){.chapter h2::after{content:"";display:block;width:calc(100vw - var(--gutter) * 2);height:1px;background:var(--case-rule);margin-top:35px}.night h2::after{background:#494941}} /* ==== was anubhuti-motion.css ==== */ /* Shared motion roles come from the real Anubhuti source, not a second scale. */ :root{--case-light:#cecbc1;--case-dark:#11110f;--case-hover:#c1bfb3} html[data-case-theme="night"]{--case-paper:#181916;--case-ink:#e5e2d8;--case-rule:#45463e;--case-muted:#b0b0a3;--case-hover:#292a23} .chapter:has(>.chapter-intro){padding-top:0} .chapter-intro{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:12vh 8vw;margin-inline:calc(var(--gutter) * -1)} .chapter-intro>span{font-size:clamp(64px,8.8vw,140px);line-height:1.03;letter-spacing:-.055em;text-align:center;max-width:18ch} .next-project{min-height:65vh;min-height:65svh;transition:background-color var(--an-motion-duration-fast)} .next-project:hover{background:transparent} .resource-link span,.next-project>span:last-child,.next-project strong{transition:transform var(--an-motion-duration-standard) var(--an-motion-ease-out)} .client-button,.mode-switch,.page-theme-switch,.theme-follow,.swatch-button{transition:transform var(--an-motion-duration-press) var(--an-motion-ease-out),background-color var(--an-motion-duration-fast),color var(--an-motion-duration-fast)} .mode-panel{transition:background-color var(--an-motion-duration-standard),color var(--an-motion-duration-standard)} .mode-panel h3,.mode-panel p,.mode-alias code,.mode-alias>span{transition:color var(--an-motion-duration-standard)} .type-more summary>span{transition:transform var(--an-motion-duration-fast) var(--an-motion-ease-out)} .type-more[open] summary>span{transform:rotate(45deg)} .swatch-button{display:block;width:100%;height:100%;text-align:left;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit} .swatch-button:focus-visible{outline:2px solid #2a1d15;outline-offset:-5px} .palette .swatch-tip{font:11px/1.5 'Instrument Sans',sans-serif;color:#6b5646;padding:0 24px 22px;opacity:.7;transition:opacity var(--an-motion-duration-fast)} .trace-button{color:inherit;margin-top:8px;font-size:13px;text-underline-offset:5px} .alias-chain>div:last-of-type::after{display:none} .case-cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:100;pointer-events:none;mix-blend-mode:difference;opacity:0} .case-cursor::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:transform var(--an-motion-duration-fast) var(--an-motion-ease-out),opacity var(--an-motion-duration-fast)} .case-cursor.is-visible{opacity:1} .case-cursor.is-link::before{transform:translate(-50%,-50%) scale(2);opacity:.55} .interaction-status{position:fixed;z-index:50;left:24px;bottom:30px;max-width:min(65ch,calc(100vw - 240px));padding:12px 18px;background:var(--case-ink);color:var(--case-paper);border:1px solid var(--case-rule);border-radius:2px;font:12px/1.5 'Instrument Sans',sans-serif;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity var(--an-motion-duration-fast),transform var(--an-motion-duration-fast) var(--an-motion-ease-out)} .interaction-status.is-visible{opacity:1;transform:translateY(0)} .instant-interaction *, .instant-interaction *::before,.instant-interaction *::after{transition:none!important} @media(hover:hover) and (pointer:fine){.resource-link:hover span,.next-project:hover>span:last-child{transform:translate(6px,-6px)}.next-project:hover strong{transform:translateX(8px)}.swatch-button:hover .swatch-tip{opacity:1}} @media(hover:none),(pointer:coarse){.case-cursor{display:none}} @media(max-width:650px){.chapter-intro{min-height:85svh;padding:80px 24px}.chapter-intro>span{font-size:56px;max-width:12ch}.interaction-status{left:16px;right:16px;bottom:82px;max-width:none}.palette .swatch-tip{padding-left:16px;font-size:10px}.next-project{min-height:50svh}} @media(prefers-reduced-motion:reduce){body.scene-lighting,body.scene-lighting::before,.mode-panel,.mode-panel *{transition:none!important}.case-cursor{display:none}.resource-link:hover span,.next-project:hover>span:last-child,.next-project:hover strong,.cover-still:hover .cover-drape,.fabric-pair img:hover{transform:none}.interaction-status{transform:none}} /* ==== was anubhuti-portfolio.css ==== */ /* Portfolio shell follows the shared fonts and colour tokens. Shop specimens retain their brand. */ body.portfolio-case{--case-light:#FFFFFF;--case-dark:var(--paper);--case-paper:var(--paper);--case-ink:var(--ink);--case-rule:var(--rule);--case-muted:var(--ink-70);--case-hover:var(--paper-2);font-family:var(--font-sans);padding-top:var(--bar-h);padding-bottom:0} .portfolio-case .topbar{font-family:var(--font-mono)} .portfolio-case .case-hero h1,.portfolio-case .chapter h2,.portfolio-case .foundation-index h2,.portfolio-case .contact-title,.portfolio-case .next-project strong,.portfolio-case .outcomes-grid strong,.portfolio-case .handoff-board h3,.portfolio-case .journey-strip strong,.portfolio-case .process-flow strong{font-family:var(--font-display);font-weight:var(--display-w)} .portfolio-case .eyebrow,.portfolio-case .hero-meta,.portfolio-case .hero-credit,.portfolio-case .footnote,.portfolio-case .footer-bottom,.portfolio-case .case-theme-controls,.portfolio-case code{font-family:var(--font-mono)} .portfolio-case .chapter h2::after{background:var(--rule)} .portfolio-case .interaction-film{margin:48px 0 0;grid-column:1/-1} .interaction-film video{display:block;width:100%;aspect-ratio:8/5;background:#fbf7f0;object-fit:contain} .interaction-film figcaption{display:flex;align-items:center;justify-content:space-between;gap:24px;font:12px/1.5 var(--font-mono);padding:16px 0;color:var(--case-muted)} .interaction-film [data-video-toggle]{background:transparent;color:var(--case-ink);border:1px solid var(--case-rule);padding:10px 18px;min-height:44px;white-space:nowrap;cursor:pointer} .interaction-film [data-video-toggle]:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px} @media(max-width:650px){.interaction-film figcaption{font-size:10px;gap:12px}.portfolio-case .interaction-film{margin-top:32px}} /* ==== was anubhuti-system-story.css ==== */ /* Explanatory loops use the source motion curve. Brand specimens stay ivory. */ .system-board{background:#fbf7f0;color:#2a1d15;padding:clamp(24px,4vw,64px);margin:48px 0 0;overflow:hidden;--board-line:#decebc;--board-muted:#6b5646} .board-label,.audit-tag,.system-board small,.radius-cell>span,.icon-notes>span{font:11px/1.5 var(--font-mono);letter-spacing:.04em} .system-board h3{font:500 clamp(24px,2.5vw,38px)/1.1 var(--font-display);letter-spacing:-.03em;margin:16px 0} .system-board p{font:16px/1.5 var(--font-sans);margin:12px 0;max-width:40ch} .system-board code{font:12px/1.6 var(--font-mono);overflow-wrap:anywhere} .system-board figcaption{font:11px/1.6 var(--font-mono);color:var(--board-muted);border-top:1px solid var(--board-line);margin-top:32px;padding-top:16px} .audit-map{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.audit-map>div{min-width:0}.audit-map h3{font-size:clamp(28px,3.2vw,48px)} .audit-map strong{display:block;font:600 20px/1.2 var(--font-sans);margin:14px 0}.audit-map small{display:block;letter-spacing:0;color:var(--board-muted)} .audit-meter{height:8px;background:#e9ddcd;margin:30px 0 0}.audit-meter i{display:block;width:var(--measure);height:100%;background:#a73c24} .audit-arrow{display:block;font-size:24px;margin-top:24px;color:#995e35}.contrast-pair{display:flex;flex-direction:column;gap:8px;font:14px var(--font-mono);margin-top:20px} .finding-path{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--board-line);padding-top:24px;margin-top:40px;font:12px/1.5 var(--font-sans)}.finding-path>span:first-child{color:var(--board-muted)} @keyframes radius-mark{0%,12%,55%,100%{opacity:.16;transform:scale(.96)}22%,42%{opacity:1;transform:scale(1)}} @keyframes spacing-pulse{0%,15%,75%,100%{opacity:.3}30%,60%{opacity:1}} @keyframes icon-build{0%,10%{stroke-dashoffset:100;opacity:.2}40%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:100;opacity:.2}} @keyframes tier-resolve{0%,12%,75%,100%{background:#fbf7f0}25%,50%{background:#eddfca}} .compact-screen-grid,.compact-checkout{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.screen-crop{height:360px;overflow:hidden;background:#fbf7f0}.screen-crop img,.checkout-crop img{display:block;width:100%;height:auto}.compact-screen-grid figcaption{font:12px var(--font-mono);padding-top:16px}.checkout-crop{height:280px;overflow:hidden;border:1px solid var(--board-line);margin-top:20px}.compact-checkout p{font-size:13px}.compact-checkout a{display:block}.compact-screen-grid a:focus-visible,.compact-checkout a:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px} .portfolio-case #outcomes .outcomes-grid{margin-top:60px}.portfolio-case #outcomes .outcomes-grid strong{color:var(--accent-text)} .loop-controls{display:flex;justify-content:flex-end;margin-top:32px}.loop-controls button{background:none;border:1px solid var(--case-rule);color:var(--case-ink);min-height:44px;padding:10px 16px;font:12px var(--font-mono);cursor:pointer} .checkout-crop img{margin-top:-128%} .loops-paused [data-system-loop] *,[data-system-loop].loop-offscreen *{animation-play-state:paused!important} @media(max-width:650px){.system-board{padding:24px 20px}.process-map,.audit-map,.spacing-motion,.icon-construction,.token-worksheet,.tier-flow{grid-template-columns:1fr;gap:28px}.audit-map>div+div{border-top:1px solid var(--board-line);padding-top:28px}.compact-screen-grid{gap:12px}.screen-crop{height:210px}.compact-screen-grid figcaption{font-size:9px;line-height:1.5}.compact-checkout{grid-template-columns:1fr;gap:28px}.checkout-crop{height:220px}.compact-checkout .checkout-crop img{max-width:360px;margin:auto}.system-board h3{font-size:28px}.compact-checkout .audit-tag{font-size:11px}} @media(prefers-reduced-motion:reduce){[data-system-loop] *{animation:none!important}} /* ==== was anubhuti-case-cohesion.css ==== */ .portfolio-case section[id]{scroll-margin-top:calc(var(--bar-h) + 24px)} .portfolio-case .case-cursor{display:none} /* ==== was anubhuti-recruiter.css ==== */ /* Faster reading path; evidence remains available without expanding the default story. */ .portfolio-case .case-hero{min-height:340px;padding-top:64px;padding-bottom:90px} .portfolio-case .case-hero h1{max-width:20ch} .portfolio-case .chapter{padding-top:88px} .portfolio-case .chapter h2{font-size:clamp(48px,6.3vw,88px);margin-bottom:36px;max-width:20ch} .portfolio-case .chapter h2::after{margin-top:36px} .portfolio-case .chapter-copy{display:block;margin-left:40%;margin-bottom:36px;max-width:64ch;font-size:18px;line-height:1.5} .portfolio-case .chapter-copy p{max-width:none} .portfolio-case .foundation-index{padding-top:88px} .portfolio-case .foundation-index h2{font-size:clamp(48px,6.3vw,88px)} .portfolio-case .foundation-index>p{margin-top:32px;margin-bottom:0} .portfolio-case .interaction-film{max-width:1280px;margin-inline:auto} .portfolio-case .compact-screen-grid,.portfolio-case .compact-checkout{max-width:1173px;margin-inline:auto} .portfolio-case .screen-crop,.portfolio-case .checkout-crop{max-width:375px;margin-inline:auto} @media(max-width:650px){.portfolio-case .case-hero{padding-top:36px;padding-bottom:44px;min-height:0}.portfolio-case .chapter{padding-top:64px}.portfolio-case .chapter h2{font-size:44px;margin-bottom:28px}.portfolio-case .chapter-copy{margin-left:0;font-size:16px;margin-bottom:28px}.portfolio-case .foundation-index{padding-top:64px}.portfolio-case .foundation-index h2{font-size:44px}} /* ==== was anubhuti-rebuild.css ==== */ @keyframes rb-flow { to { stroke-dashoffset: -22; } } @keyframes rb-mark-in { 0%, 8% { opacity: 0; } 18%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } } /* ==== was anubhuti-opening.css ==== */ /* Anubhuti case study: the opening (user, 2026-10-26). The old opening read jagged -- a meta column with a stray "Company" label, the title pushed right, the stats uneven and "See the evidence" stranded -- and gave no clear first move. It now follows the Clario case study's shape in Anubhuti's own palette: 1. a product bar: the mark, jumps to the chapters, and the two real ways in (the Figma library, the live shop) as toy buttons; 2. a thin banner cut from the tissue-silk photograph; 3. one aligned intro: title left, lead right, three stats on a grid, then the evidence link. Width follows the Project overview below it: a 1600px content box, centred, on the case study's own gutter -- so on a wide screen the opening stops where the rest of the page stops. */ .portfolio-case { --an-pad: max(var(--gutter), calc((100% - 1600px) / 2)); } .an-bar { position: sticky; top: var(--bar-h, 48px); z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 72px; box-sizing: border-box; padding: 0 var(--an-pad); background: color-mix(in srgb, #fbf7f0 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(42, 29, 21, .1); color: #2a1d15; } .an-bar-brand img { display: block; height: 52px; width: auto; } /* bigger (user video, 2026-10-26) */ .an-bar-links { display: flex; justify-content: center; gap: 28px; } .an-bar-links a { font: 500 14px/1 var(--font-sans); color: rgba(42, 29, 21, .72); text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid transparent; transition: color .15s ease, border-color .15s ease; } @media (hover: hover) { .an-bar-links a:hover { color: #2a1d15; border-color: #a73c24; } } .an-bar-cta { display: flex; gap: 8px; } .an-bar .tbtn { height: 40px; font-size: 14px; padding: 0 7px 0 16px; gap: 10px; } .an-bar .tbtn .tbtn-chip { width: 26px; height: 26px; } /* in Anubhuti's colours: espresso pill, sindoor chip */ .an-bar .tbtn.is-solid, .an-intro .tbtn.is-solid { background: #2a1d15; color: #fbf7f0; --chip-bg: #a73c24; --chip-ink: #fbf7f0; } /* Figma as an outline, the shop filled -- the same pairing as Clario's bar */ .an-bar .tbtn:not(.is-solid) { background: transparent; color: #2a1d15; box-shadow: inset 0 0 0 1px rgba(42, 29, 21, .28); --chip-bg: #f1e7d9; --chip-ink: #2a1d15; --chip-line: transparent; } :root.theme-dark .an-bar .tbtn:not(.is-solid) { color: #fbf7f0; box-shadow: inset 0 0 0 1px rgba(251, 247, 240, .3); --chip-bg: rgba(251, 247, 240, .12); --chip-ink: #fbf7f0; } .an-banner { position: relative; height: clamp(200px, 17vw, 300px); overflow: hidden; background: #2a1d15; } .an-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .an-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 21, 17, .78) 0%, rgba(27, 21, 17, .42) 45%, rgba(27, 21, 17, 0) 75%); } .an-eyebrow { margin: 0 0 12px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(251, 247, 240, .78); } :root.theme-dark .an-bar, html[data-theme="dark"] .an-bar { background: color-mix(in srgb, #1b1511 86%, transparent); color: #fbf7f0; border-color: rgba(251,247,240,.1); } :root.theme-dark .an-bar-links a, html[data-theme="dark"] .an-bar-links a { color: rgba(251,247,240,.72); } @media (max-width: 1100px) { .an-bar { grid-template-columns: auto 1fr; } .an-bar-links { display: none; } .an-bar-cta { justify-self: end; } } @media (max-width: 760px) { .an-bar { gap: 12px; padding: 10px var(--an-pad); } .an-bar-brand img { height: 24px; } .an-bar .tbtn:not(.is-solid) { display: none; } /* the shop is the one way in on a phone */ .an-banner { height: 200px; } .an-banner::after { background: linear-gradient(0deg, rgba(27,21,17,.82) 0%, rgba(27,21,17,.3) 60%, rgba(27,21,17,0) 100%); } } /* ============================================================ Section heads, all the same (user video, 2026-10-26): the title in the left column, its paragraph in the right column bottom-aligned to it -- the intro's and the Project overview's grid -- and no full-width rule under the title. Figures span both columns. */ .portfolio-case .chapter-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; } .portfolio-case .chapter-inner > * { grid-column: 1 / -1; } .portfolio-case .chapter-inner > h2 { grid-column: 1; margin: 0 0 clamp(36px, 4vw, 56px); max-width: none; font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; } .portfolio-case .chapter-inner > h2::after { content: none; display: none; } .portfolio-case .chapter-inner > .chapter-copy { grid-column: 2; margin: 0 0 clamp(36px, 4vw, 56px); max-width: none; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--ink-70); } .portfolio-case .chapter-inner > .chapter-copy p { max-width: none; margin: 0; } .portfolio-case .night .chapter-inner > .chapter-copy { color: #c2c0b6; } /* The night band is dark in both themes, but its text used --case-paper, which turns dark at night: the heading vanished into the band. It takes the night ink in both themes instead. */ .portfolio-case .night { color: #F5F5F7; } @media (max-width: 850px) { .portfolio-case .chapter-inner { column-gap: 40px; } } @media (max-width: 760px) { .portfolio-case .chapter-inner { grid-template-columns: 1fr; } .portfolio-case .chapter-inner > h2, .portfolio-case .chapter-inner > .chapter-copy { grid-column: 1; } .portfolio-case .chapter-inner > h2 { margin-bottom: 16px; } } /* "Six foundations" sat outside the content width; it now uses the same 1600px box, two columns and heading size as every section head. */ .portfolio-case .foundation-index { box-sizing: border-box; max-width: calc(1600px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(72px, 8vw, 120px) var(--gutter) 0; grid-template-columns: 1fr 1fr; column-gap: 80px; } .portfolio-case .foundation-index h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; max-width: none; margin-bottom: 32px; } @media (max-width: 760px) { .portfolio-case .foundation-index { grid-template-columns: 1fr; } } /* Demo films fill the content width like every other figure (they were capped at 1280px inside a 1600px page). */ .portfolio-case .chapter-inner > .interaction-film { max-width: none; width: 100%; } @keyframes icon-draw { from { stroke-dashoffset: 100; opacity: .3; } to { stroke-dashoffset: 0; opacity: 1; } } /* The site's bottom bar is a