/* ========================================================= TASTY — case study 004 One wall, one shelf. Every chapter stands on the same rail; the far end of the wall is dipped in caramel. ========================================================= */
:root { --t-cream: oklch(0.965 0.018 85); --t-ink: oklch(0.305 0.052 55); --t-ink-soft: oklch(0.46 0.045 58); --t-graphite: oklch(0.42 0.012 90); --t-caramel: oklch(0.795 0.105 78); --t-roast: oklch(0.665 0.115 65); --t-crust: oklch(0.475 0.105 55); --t-sugar: oklch(0.93 0.016 290); --t-white: oklch(0.985 0.006 90); --t-display: "Bricolage Grotesque", system-ui, sans-serif; --t-body: "Hanken Grotesk", system-ui, sans-serif; --t-hand: "Caveat", cursive; --t-round: "Baloo 2", system-ui, sans-serif; --t-soft: "Nunito", system-ui, sans-serif; --t-amber: oklch(0.62 0.124 62); --t-pad: clamp(2.5rem, 5vw, 5.5rem); --t-bar-h: 60px; --t-rail: 19svh; --t-rail-gap: 1.4rem; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body.tj { font-family: var(--t-soft); font-size: 1.0625rem; line-height: 1.65; color: var(--t-ink); background: var(--t-cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
/* ---------- grain ---------- */
body.tj::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }
/* ========================================================= FIXED BAR ========================================================= */
/* ========================================================= TRACK — one continuous wall ========================================================= */
.tj-track { position: relative; }
.tj-wall { position: relative; display: flex; width: max-content; height: 100svh; background: linear-gradient( to right, oklch(0.965 0.018 85) 0%, oklch(0.965 0.018 85) 83%, oklch(0.795 0.105 78) 91%, oklch(0.795 0.105 78) 100% ); }
.tj-panel { position: relative; flex: 0 0 auto; width: max-content; min-width: 60vw; height: 100%; padding: calc(var(--t-bar-h) + 2vh) var(--t-pad) 12svh; display: flex; flex-direction: row; align-items: center; gap: clamp(2.5rem, 4vw, 5rem); }
/* ---------- shared text styles ---------- */
.tj-kicker { font-family: var(--t-hand); font-weight: 700; font-size: clamp(1.3rem, 1.6vw, 1.7rem); color: var(--t-amber); margin-bottom: clamp(0.5rem, 1.4vh, 1rem); }
.tj-h2 { font-family: var(--t-round); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--t-crust); margin-bottom: clamp(1rem, 2.6vh, 1.8rem); }
.tj-lede { max-width: 33rem; font-family: var(--t-soft); font-weight: 600; font-size: clamp(0.98rem, 1.1vw, 1.1rem); line-height: 1.7; color: var(--t-ink-soft); }
.tj-note { font-family: var(--t-hand); font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.15; color: var(--t-crust); }
/* intro text blocks float mid-wall, not on the rail */
.tj-cover__copy, .tj-brief__lead, .tj-brief__cols, .tj-wire__intro, .tj-sys__intro, .tj-shelf__intro, .tj-outro__inner { align-self: center; position: relative; z-index: 2; }
/* ========================================================= PRINTS — browser-framed screens, sticker scatter ========================================================= */
.tj-stand { display: flex; align-items: center; gap: clamp(1.6rem, 2.4vw, 3rem); position: relative; z-index: 2; }
.tj-print { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; background: var(--t-white); border: 1.6px solid oklch(0.62 0.124 62 / 0.5); border-radius: 14px; overflow: visible; box-shadow: 0 22px 50px -26px oklch(0.305 0.052 55 / 0.4); }
/* mini browser chrome drawn in CSS: bar + three lights */
.tj-print::before { content: ""; display: block; flex: 0 0 auto; height: 26px; border-radius: 12px 12px 0 0; background-color: oklch(0.95 0.022 82); background-image: radial-gradient(circle at 16px 13px, #ff5f57 0 4px, transparent 4.6px), radial-gradient(circle at 30px 13px, #febc2e 0 4px, transparent 4.6px), radial-gradient(circle at 44px 13px, #28c840 0 4px, transparent 4.6px); border-bottom: 1.4px solid oklch(0.62 0.124 62 / 0.35); }
.tj-print__view { display: block; width: 100%; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 12px 12px; }
.tj-print__view img { width: 100%; height: auto; will-change: transform; }
.tj-print figcaption { position: absolute; top: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%) rotate(-1.2deg); white-space: nowrap; font-family: var(--t-hand); font-weight: 600; font-size: 1.25rem; color: var(--t-amber); }
/* sticker scatter: gentle alternating tilt + lift */
.tj-stand .tj-print:nth-child(odd) { rotate: -1.1deg; margin-top: 3vh; }
.tj-stand .tj-print:nth-child(even) { rotate: 1.2deg; margin-top: -2vh; }
/* washi tape pinning some prints to the wall */
.tj-print--taped::after { content: ""; position: absolute; top: -0.75rem; left: 50%; width: 3.6rem; height: 1.35rem; margin-left: -1.8rem; background: oklch(0.795 0.105 78 / 0.55); transform: rotate(-5deg); border-radius: 2px; z-index: 3; }
/* print sizes: heights in svh so they command the wall */
.tj-h-48 { height: 48svh; width: clamp(220px, 16vw, 320px); }
.tj-h-52 { height: 52svh; width: clamp(230px, 17vw, 340px); }
.tj-h-56 { height: 56svh; width: clamp(240px, 18vw, 360px); }
.tj-h-58 { height: 58svh; width: clamp(250px, 19vw, 380px); }
.tj-h-60 { height: 60svh; width: clamp(260px, 20vw, 400px); }
.tj-h-62 { height: 62svh; width: clamp(270px, 21vw, 420px); }
.tj-h-66 { height: 66svh; width: clamp(280px, 22vw, 440px); }
.tj-w-lg { width: clamp(320px, 25vw, 500px); }
/* grayscale prints */
.tj-print--gray .tj-print__view img { filter: saturate(0); }
.tj-print--handoff figcaption { color: var(--t-crust); }
/* ========================================================= 01 · COVER — sticker-scrapbook introduction ========================================================= */
.tjc { width: 100vw; display: block; padding: 0; }
.tjc-nuts { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tjc-nut { position: absolute; width: 72px; color: #E08B3D; opacity: 0.14; will-change: transform; animation: tjc-nut-float 11s ease-in-out infinite; }
.tjc-nut path { fill: currentColor; }
.tjc-nut--1 { left: 3.5vw; top: 62vh; width: 96px; transform: rotate(-18deg); }
.tjc-nut--2 { left: 22vw; top: 12vh; width: 56px; transform: rotate(22deg); color: #C8862F; opacity: 0.12; animation-duration: 9s; animation-delay: -3s; }
.tjc-nut--3 { right: 2.5vw; top: 70vh; width: 116px; transform: rotate(12deg); opacity: 0.13; animation-duration: 13s; animation-delay: -6s; }
.tjc-nut--4 { left: 49vw; top: 6vh; width: 46px; transform: rotate(-8deg); opacity: 0.10; animation-duration: 10s; animation-delay: -2s; }
.tjc-nut--5 { left: 10vw; top: 33vh; width: 64px; transform: rotate(40deg); opacity: 0.11; animation-duration: 12s; animation-delay: -4.5s; }
@keyframes tjc-nut-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@media (prefers-reduced-motion: reduce) { .tjc-nut { animation: none; } }
@media (max-width: 900px) { .tjc-nuts { display: none; } }
.tjc-left { position: absolute; z-index: 7; left: clamp(2rem, 3.6vw, 4rem); top: calc(var(--t-bar-h) + 1.5vh); width: clamp(20rem, 26vw, 30rem); }
.tjc-wordmark { position: relative; font-family: var(--t-round); font-weight: 800; font-size: clamp(4rem, 8.6vw, 8.6rem); line-height: 1; letter-spacing: -0.015em; color: var(--t-crust); margin-left: -0.05em; }
.tjc-heart { width: 1.6rem; color: var(--t-amber); display: inline-block; vertical-align: super; margin-left: 0.1em; transform: rotate(12deg); }
.tjc-heart--mini { position: static; display: inline-block; width: 0.85em; transform: rotate(8deg) translateY(0.15em); }
.tjc-sub { font-family: var(--t-round); font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.65rem); color: var(--t-amber); margin: 0.2em 0 0.8em; }
.tjc-lede { font-family: var(--t-soft); font-weight: 600; font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.7; color: var(--t-ink-soft); margin-bottom: 1.4rem; }
/* chips */
.tjc-chips { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; border: 1.6px dashed oklch(0.62 0.124 62 / 0.55); border-radius: 20px; padding: 0.9rem; margin-bottom: 1.3rem; }
.tjc-chips li { display: flex; align-items: center; gap: 0.55rem; font-family: var(--t-soft); font-weight: 700; font-size: 0.86rem; color: var(--t-crust); background: var(--t-white); border: 1.4px solid oklch(0.62 0.124 62 / 0.5); border-radius: 999px; padding: 0.5rem 0.9rem; }
.tjc-chips li svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
/* goal card */
.tjc-goal { position: relative; border: 1.8px dashed oklch(0.62 0.124 62 / 0.6); border-radius: 16px; background: oklch(0.985 0.006 90 / 0.7); padding: 1.1rem 1.2rem 1rem; margin-bottom: 1.2rem; transform: rotate(-0.6deg); }
.tjc-tape { position: absolute; top: -0.7rem; left: 1rem; width: 3.4rem; height: 1.3rem; background: oklch(0.795 0.105 78 / 0.55); transform: rotate(-6deg); border-radius: 2px; }
.tjc-goal__title { font-family: var(--t-hand); font-weight: 700; font-size: 1.5rem; color: var(--t-crust); margin-bottom: 0.2rem; }
.tjc-goal__body { font-family: var(--t-soft); font-weight: 600; font-size: 0.9rem; line-height: 1.6; color: var(--t-ink-soft); }
.tjc-goal__body .tjc-heart--mini { color: var(--t-amber); width: 0.8em; }
.tjc-dive { display: flex; align-items: center; gap: 0.6rem; font-family: var(--t-hand); font-weight: 700; font-size: 1.45rem; color: var(--t-amber); margin: 0 0 0.5rem 0.2rem; }
.tjc-dive__arrow { width: 44px; color: var(--t-amber); margin-top: 0.5em; }
.tjc-ctarow { display: flex; align-items: flex-end; gap: 1rem; }
.tjc-cta { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--t-round); font-weight: 700; font-size: 1.05rem; color: var(--t-white); text-decoration: none; background: linear-gradient(180deg, oklch(0.66 0.13 62), oklch(0.55 0.12 58)); border: 2px solid var(--t-crust); border-radius: 999px; padding: 0.75rem 1.7rem; box-shadow: 0 4px 0 var(--t-crust); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; }
.tjc-cta:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--t-crust); }
.tjc-cta span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: oklch(0.985 0.006 90 / 0.25); }
.tjc-toast { width: clamp(56px, 4.6vw, 76px); transform: rotate(6deg); }
/* stamp */
.tjc-stamp { position: absolute; z-index: 6; left: 32.5vw; top: 24vh; width: 6.4rem; height: 6.4rem; border: 1.8px dashed oklch(0.62 0.124 62 / 0.65); border-radius: 50%; background: var(--t-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; transform: rotate(-9deg); text-align: center; }
.tjc-stamp b { font-family: var(--t-soft); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-crust); }
.tjc-stamp i { font-family: var(--t-hand); font-weight: 600; font-size: 1.05rem; color: var(--t-amber); }
.tjc-heart--stamp { width: 1.1rem; color: var(--t-amber); position: static; transform: none; }
.tjc-stamp--show { left: auto; right: 7vw; top: auto; bottom: 12vh; transform: rotate(8deg); }
/* big browser */
.tjc-browser { position: absolute; z-index: 3; right: 2.4vw; top: calc(var(--t-bar-h) + 3vh); width: 51vw; border: 1.6px solid oklch(0.62 0.124 62 / 0.5); border-radius: 18px; background: var(--t-white); overflow: hidden; box-shadow: 0 30px 70px -30px oklch(0.305 0.052 55 / 0.35); }
.tjc-browser__bar { display: flex; align-items: center; gap: 1rem; height: 44px; padding: 0 1.1rem; background: oklch(0.95 0.022 82); border-bottom: 1.4px solid oklch(0.62 0.124 62 / 0.35); }
.tjc-browser__lights { display: flex; gap: 6px; }
.tjc-browser__lights i { width: 11px; height: 11px; border-radius: 50%; }
.tjc-browser__lights i:nth-child(1) { background: #ff5f57; }
.tjc-browser__lights i:nth-child(2) { background: #febc2e; }
.tjc-browser__lights i:nth-child(3) { background: #28c840; }
.tjc-browser__nav { font-size: 1rem; color: var(--t-ink-soft); letter-spacing: 0.2em; }
.tjc-browser__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--t-soft); font-weight: 700; font-size: 0.82rem; color: var(--t-ink); background: var(--t-white); border-radius: 999px; height: 26px; max-width: 24rem; margin: 0 auto; }
.tjc-browser__url svg { width: 0.85rem; height: 0.85rem; color: var(--t-ink-soft); }
.tjc-browser__acts { font-size: 0.95rem; color: var(--t-ink-soft); letter-spacing: 0.25em; }
.tjc-browser__view { display: block; height: 72vh; overflow: hidden; }
.tjc-browser__view img { width: 100%; height: auto; }
/* mini browser chrome shared by tablet + phone */
.tjc-mini-bar { display: flex; align-items: center; gap: 0.6rem; height: 28px; padding: 0 0.7rem; background: oklch(0.95 0.022 82); border-bottom: 1.4px solid oklch(0.62 0.124 62 / 0.35); }
.tjc-mini-bar .tjc-browser__lights i { width: 8px; height: 8px; }
.tjc-mini-bar--phone { height: 22px; padding: 0 0.55rem; }
.tjc-mini-bar--phone .tjc-browser__lights i { width: 6px; height: 6px; }
.tjc-mini-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-family: var(--t-soft); font-weight: 700; font-size: 0.66rem; color: var(--t-ink); background: var(--t-white); border-radius: 999px; height: 17px; max-width: 9rem; margin: 0 auto; }
.tjc-mini-url svg { width: 0.65rem; height: 0.65rem; color: var(--t-ink-soft); }
/* tablet */
.tjc-tablet { position: absolute; z-index: 4; left: 31vw; top: 40vh; width: 20vw; background: var(--t-white); border: 1.6px solid oklch(0.62 0.124 62 / 0.5); border-radius: 16px; overflow: hidden; box-shadow: 0 26px 55px -26px oklch(0.305 0.052 55 / 0.45); transform: rotate(-1.2deg); }
.tjc-tablet__screen { display: block; height: 46vh; overflow: hidden; background: var(--t-white); }
.tjc-tablet__screen img { width: 100%; height: auto; }
/* phone */
.tjc-phone { position: absolute; z-index: 5; left: 44vw; top: 51vh; width: 10.5vw; min-width: 130px; background: var(--t-white); border: 1.6px solid oklch(0.62 0.124 62 / 0.5); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 45px -20px oklch(0.305 0.052 55 / 0.5); transform: rotate(1.6deg); }
.tjc-phone__screen { display: block; height: 38vh; overflow: hidden; background: var(--t-white); }
.tjc-phone__screen img { width: 146%; max-width: none; margin: -6% 0 0 -23%; }
/* ========================================================= 02 · THE BRIEF ========================================================= */
.tj-brief__lead { width: clamp(28rem, 36vw, 42rem); }
.tj-brief__h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); }
.tj-brief__cols { display: grid; grid-template-columns: minmax(16rem, 21rem) minmax(16rem, 21rem); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.tj-brief__col--low { margin-top: clamp(2rem, 7vh, 4.5rem); }
.tj-brief__col { position: relative; background: var(--t-white); border: 1.6px solid oklch(0.62 0.124 62 / 0.5); border-radius: 18px; padding: 1.3rem 1.4rem 1rem; }
.tj-brief__col:first-child { border-style: dashed; transform: rotate(-0.8deg); }
.tj-brief__col:first-child::before { content: ""; position: absolute; top: -0.7rem; left: 1.2rem; width: 3.4rem; height: 1.3rem; background: oklch(0.795 0.105 78 / 0.55); transform: rotate(-6deg); border-radius: 2px; }
.tj-brief__col--low { transform: rotate(0.7deg); }
.tj-brief__col h3 { font-family: var(--t-round); font-weight: 700; font-size: 1.1rem; color: var(--t-crust); margin-bottom: 0.7rem; }
.tj-numlist { list-style: none; }
.tj-numlist li { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.65rem 0; border-top: 1.4px dashed oklch(0.62 0.124 62 / 0.3); font-family: var(--t-soft); font-weight: 600; font-size: 0.92rem; line-height: 1.55; color: var(--t-ink-soft); }
.tj-numlist li b { flex: 0 0 auto; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1.6px solid var(--t-amber); border-radius: 50%; font-family: var(--t-round); font-weight: 800; font-size: 0.8rem; color: var(--t-crust); transform: translateY(0.2em); }
/* ========================================================= 03 · WIREFRAMES ========================================================= */
.tj-wire__intro { width: clamp(26rem, 32vw, 38rem); }
.tj-wire__facts { margin-top: clamp(1rem, 2.6vh, 1.6rem); font-family: var(--t-soft); font-weight: 600; font-size: 0.95rem; color: var(--t-ink-soft); }
.tj-wire__facts b { font-family: var(--t-round); font-weight: 800; font-size: 1.5rem; color: var(--t-crust); }
.tj-wire__facts span { margin: 0 0.45em; opacity: 0.5; }
/* ========================================================= 04 · DESIGN SYSTEM ========================================================= */
.tj-sys__intro { width: clamp(26rem, 31vw, 36rem); }
/* paint dabs resting on the rail */
/* the spec sheet: dashed sticker card, no browser chrome */
.tj-spec { width: clamp(30rem, 36vw, 42rem); padding: clamp(1.4rem, 2vw, 2.2rem); border: 1.8px dashed oklch(0.62 0.124 62 / 0.6); border-radius: 18px; rotate: -0.6deg; }
.tj-spec::before { content: ""; position: absolute; top: -0.7rem; left: 1.4rem; width: 3.4rem; height: 1.3rem; background: oklch(0.795 0.105 78 / 0.55); transform: rotate(-6deg); border-radius: 2px; border: none; background-image: none; }
.tj-btn { font-family: var(--t-body); font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; border-radius: 999px; padding: 0.7rem 1.4rem; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.tj-btn:hover { transform: translateY(-2px); }
.tj-btn--primary { background: var(--t-crust); color: var(--t-white); }
.tj-btn--ghost { background: transparent; color: var(--t-crust); box-shadow: inset 0 0 0 1.5px var(--t-crust); }
.tj-btn--text { background: transparent; color: var(--t-ink); padding-left: 0.2rem; padding-right: 0.2rem; }
.tj-btn--text span { color: var(--t-crust); }
.tj-tag { font-size: 0.78rem; font-weight: 600; color: var(--t-crust); border: 1px solid oklch(0.475 0.105 55 / 0.45); border-radius: 999px; padding: 0.32rem 0.8rem; }
.tj-tag--solid { background: var(--t-caramel); border-color: transparent; color: var(--t-ink); }
.tj-stars i { color: var(--t-roast); font-style: normal; font-size: 1.05rem; }
.tj-stars i.off { color: oklch(0.305 0.052 55 / 0.2); }
.tj-spec__ratetext { font-size: 0.82rem; color: var(--t-ink-soft); }
/* ========================================================= 05 · THE SHELF ========================================================= */
/* ========================================================= 06 · OUTRO — the caramel dip ========================================================= */
.tj-outro { width: 100vw; justify-content: center; text-align: center; }
.tj-outro__credit { margin-top: clamp(1.6rem, 4.5vh, 3rem); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.305 0.052 55 / 0.6); }
/* ========================================================= 03 · EXPERIENCE FLOW ========================================================= */
.tj-flow__intro { width: clamp(26rem, 30vw, 36rem); align-self: center; position: relative; z-index: 2; }
.tj-flow__banner { display: flex; align-items: flex-end; gap: 0.9rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.tj-flow__banner .tjc-toast { flex: 0 0 auto; transform: rotate(-5deg); }
.tj-flow__banner-card { border: 1.6px dashed oklch(0.62 0.124 62 / 0.6); border-radius: 16px; background: oklch(0.985 0.006 90 / 0.7); padding: 0.85rem 1.1rem; }
.tj-flow__banner-card b { display: block; font-family: var(--t-hand); font-weight: 700; font-size: 1.35rem; color: var(--t-amber); margin-bottom: 0.15rem; }
.tj-flow__banner-card p { font-size: 0.84rem; font-weight: 600; line-height: 1.55; color: var(--t-ink-soft); max-width: 24rem; }
.tj-flow__steps { display: flex; align-items: flex-start; gap: clamp(2.4rem, 3.2vw, 4rem); position: relative; z-index: 2; padding-top: 1.4rem; }
.tj-step { position: relative; flex: 0 0 auto; width: clamp(220px, 16.5vw, 320px); }
.tj-step__num { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--t-white); border: 1.7px solid var(--t-crust); border-radius: 50%; font-family: var(--t-round); font-weight: 800; font-size: 0.95rem; color: var(--t-crust); }
.tj-step__shot { display: block; height: 36vh; overflow: hidden; background: var(--t-white); border: 1.6px solid oklch(0.62 0.124 62 / 0.5); border-radius: 14px; box-shadow: 0 18px 40px -22px oklch(0.305 0.052 55 / 0.38); }
.tj-step__shot img { width: 100%; height: auto; }
.tj-step__shot--cart img { width: 240%; max-width: none; margin: -1% 0 0 -132%; }
.tj-step__shot--pop img { width: 200%; max-width: none; margin: -14% 0 0 -52%; }
.tj-step figcaption { margin-top: 1.1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.7rem; align-items: center; }
.tj-step figcaption b { font-family: var(--t-round); font-weight: 700; font-size: 1.02rem; color: var(--t-crust); }
.tj-step figcaption p { grid-column: 2; font-size: 0.82rem; font-weight: 600; line-height: 1.5; color: var(--t-ink-soft); }
.tj-step__ic { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--t-amber); color: var(--t-white); }
.tj-step__ic svg { width: 1.15rem; height: 1.15rem; }
/* ========================================================= 05 · CONTENT & TRUST ========================================================= */
.tj-trust__intro { width: clamp(26rem, 30vw, 36rem); align-self: center; position: relative; z-index: 2; }
.tj-print--tagged figcaption { top: calc(100% + 0.8rem); transform: translateX(-50%) rotate(-1deg); background: oklch(0.985 0.006 90 / 0.85); border: 1.6px dashed oklch(0.62 0.124 62 / 0.6); border-radius: 12px; padding: 0.55rem 0.95rem; white-space: normal; width: max-content; max-width: 15rem; }
.tj-print--tagged figcaption b { display: block; font-family: var(--t-hand); font-weight: 700; font-size: 1.2rem; line-height: 1.1; color: var(--t-crust); margin-bottom: 0.15rem; }
.tj-print--tagged figcaption p { font-family: var(--t-soft); font-weight: 600; font-size: 0.78rem; line-height: 1.45; color: var(--t-ink-soft); }
/* ========================================================= 06 · DESIGN SYSTEM & UI HIGHLIGHTS ========================================================= */
/* these two chapters run tall: trim bottom padding so no panel ever exceeds 100svh (extra height leaks into vertical scroll) */
.tj-sys, .tj-show { padding-bottom: 4svh; }
.tj-syscard { position: relative; z-index: 2; align-self: center; flex: 0 0 auto; background: var(--t-white); border: 1.6px solid oklch(0.62 0.124 62 / 0.35); border-radius: 18px; padding: clamp(1.3rem, 1.8vw, 2rem); box-shadow: 0 18px 45px -26px oklch(0.305 0.052 55 / 0.3); }
.tj-syscard__label { font-family: var(--t-soft); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-amber); margin-bottom: 1.1rem; }
.tj-palette { display: flex; align-items: flex-start; gap: clamp(0.9rem, 1.2vw, 1.4rem); }
.tj-pal { text-align: center; }
.tj-pal::before { content: ""; display: block; width: clamp(76px, 6.2vw, 112px); height: clamp(76px, 6.2vw, 112px); border-radius: 45% 55% 52% 48% / 55% 45% 58% 42%; margin: 0 auto 0.6rem; }
.tj-pal--cream::before { background: #FFF7F1; box-shadow: inset 0 0 0 1.4px oklch(0.62 0.124 62 / 0.3); }
.tj-pal--peanut::before { background: #F2C385; border-radius: 55% 45% 48% 52% / 45% 58% 42% 55%; }
.tj-pal--caramel::before { background: #E08B3D; }
.tj-pal--choco::before { background: #A4571F; border-radius: 50% 50% 42% 58% / 58% 44% 56% 42%; }
.tj-pal--dark::before { background: #5A3417; }
.tj-pal figcaption b { display: block; font-family: var(--t-round); font-weight: 700; font-size: 0.88rem; color: var(--t-crust); }
.tj-pal figcaption span { font-size: 0.72rem; font-weight: 600; color: var(--t-ink-soft); }
/* palette + typography pinned on top of each other */
.tj-sys__stack { position: relative; z-index: 2; align-self: center; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.tj-sys__stack .tj-syscard--palette { rotate: -1.1deg; z-index: 2; }
.tj-sys__stack .tj-syscard--palette .tjc-tape { left: 50%; margin-left: -1.7rem; }
.tj-sys__stack .tj-syscard--type { rotate: 0.9deg; margin: -1.3rem 0 0 2.2rem; z-index: 1; }
.tj-syscard--type { width: clamp(24rem, 27vw, 33rem); }
.tj-type__hero { display: flex; align-items: baseline; gap: 0.8rem; }
.tj-type__aa { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--t-crust); }
.tj-type__hero b { font-family: var(--t-round); font-weight: 700; font-size: 1rem; color: var(--t-amber); }
.tj-type__sample { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.35; color: var(--t-crust); margin: 0.6rem 0 1rem; }
.tj-type__row { border-top: 1.4px dashed oklch(0.62 0.124 62 / 0.3); padding: 0.6rem 0; }
.tj-type__row b { display: block; font-family: var(--t-soft); font-weight: 800; font-size: 0.76rem; color: var(--t-amber); margin-bottom: 0.2rem; }
.tj-type__row span { font-family: "Poppins", sans-serif; color: var(--t-ink-soft); display: block; line-height: 1.5; }
.tj-type__row:nth-of-type(1) span { font-weight: 700; font-size: 0.95rem; }
.tj-type__row:nth-of-type(2) span { font-weight: 600; font-size: 0.85rem; }
.tj-type__row:nth-of-type(3) span { font-weight: 400; font-size: 0.8rem; }
.tj-syscard--comps { width: clamp(34rem, 42vw, 50rem); }
.tj-comps { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: clamp(1.2rem, 1.8vw, 2rem); }
.tj-comps h4 { font-family: var(--t-round); font-weight: 700; font-size: 0.95rem; color: var(--t-crust); margin-bottom: 0.6rem; }
.tj-comps__gap { margin-top: 1.2rem; }
.tj-comps__col .tj-btn { display: block; margin-bottom: 0.55rem; }
.tj-comps__pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tj-comps__rate { display: flex; align-items: center; gap: 0.5rem; }
.tj-badges { display: flex; gap: 0.7rem; }
.tj-badge { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 3.6rem; text-align: center; }
.tj-badge i { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--t-amber); color: var(--t-white); font-style: normal; font-family: var(--t-round); font-weight: 800; font-size: 0.8rem; }
.tj-badge em { font-style: normal; font-weight: 700; font-size: 0.6rem; line-height: 1.25; color: var(--t-ink-soft); }
.tj-field { display: block; width: 100%; border: 1.4px solid oklch(0.62 0.124 62 / 0.45); border-radius: 10px; padding: 0.55rem 0.8rem; font-family: var(--t-soft); font-weight: 600; font-size: 0.85rem; color: var(--t-ink); background: var(--t-white); margin-bottom: 0.5rem; outline: none; }
.tj-field::placeholder { color: oklch(0.46 0.045 58 / 0.7); }
.tj-review { border: 1.4px solid oklch(0.62 0.124 62 / 0.4); border-radius: 14px; padding: 0.9rem 1rem; font-size: 0.8rem; }
.tj-review__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.tj-review__avatar { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--t-caramel); color: var(--t-crust); font-family: var(--t-round); font-weight: 800; font-size: 0.85rem; }
.tj-review__head b { display: block; font-weight: 800; font-size: 0.85rem; }
.tj-review__head i { font-style: normal; font-size: 0.72rem; color: var(--t-ink-soft); }
.tj-stars--sm i { font-size: 0.85rem; }
.tj-review__title { display: block; font-family: var(--t-round); font-weight: 700; font-size: 0.92rem; color: var(--t-crust); margin: 0.35rem 0 0.15rem; }
.tj-review p { color: var(--t-ink-soft); line-height: 1.5; font-weight: 600; }
.tj-review em { display: block; margin-top: 0.45rem; font-style: normal; font-weight: 800; font-size: 0.74rem; color: var(--t-crust); }
.tj-syscard--shapes { width: clamp(19rem, 21vw, 25rem); }
.tj-shapes__blob { display: block; width: clamp(110px, 8vw, 150px); height: clamp(90px, 6.4vw, 120px); background: #E08B3D; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; margin-bottom: 0.8rem; }
.tj-shapes__text { font-size: 0.85rem; font-weight: 600; line-height: 1.6; color: var(--t-ink-soft); }
.tj-context { display: flex; gap: 0.8rem; }
.tj-context img { width: clamp(100px, 7.6vw, 140px); border-radius: 12px; }
/* ========================================================= 07 · FINAL SHOWCASE ========================================================= */
.tj-show__intro { width: clamp(28rem, 33vw, 40rem); align-self: center; position: relative; z-index: 2; }
.tj-show__intro .tjc-sub { margin-bottom: 0.6em; }
.tj-show__wins { list-style: none; border: 1.6px dashed oklch(0.62 0.124 62 / 0.55); border-radius: 18px; padding: 1rem 1.1rem; margin: clamp(1rem, 2.4vh, 1.6rem) 0; display: grid; gap: 0.85rem; }
.tj-show__wins li { display: flex; gap: 0.8rem; align-items: flex-start; }
.tj-show__wins .tj-step__ic { flex: 0 0 auto; }
.tj-show__wins b { display: block; font-family: var(--t-round); font-weight: 700; font-size: 0.98rem; color: var(--t-crust); }
.tj-show__wins p { font-size: 0.82rem; font-weight: 600; line-height: 1.45; color: var(--t-ink-soft); }
.tj-show__note { position: absolute; left: 6vw; top: 11vh; transform: rotate(-4deg); z-index: 2; }
.tj-show__collage { padding-top: 2vh; }
/* toast companion walking along the bottom edge */
.tj-walker { position: fixed; left: 1.6rem; bottom: 1.1rem; width: clamp(56px, 4.6vw, 76px); z-index: 70; pointer-events: none; }
.tj-walker__in { display: block; }
.tj-walker svg { width: 100%; height: auto; display: block; }
/* doodle positions for the new chapters */
/* ========================================================= MOBILE / NARROW — vertical story, same wall ========================================================= */
@media (max-width: 899px) {
  .tj-wall { display: block; width: 100%; background: linear-gradient( to bottom, oklch(0.965 0.018 85) 0%, oklch(0.965 0.018 85) 88%, oklch(0.9 0.055 80) 96%, oklch(0.9 0.055 80) 100% ); }
  .tjc-stamp--show, .tj-walker { display: none; }
  .tj-sys__stack { width: 100%; }
  .tj-sys__stack .tj-syscard--type { margin: 1.2rem 0 0; }
  .tj-wall { height: auto; }
  .tj-panel { width: 100%; min-width: 0; height: auto; padding: calc(var(--t-bar-h) + 3vh) clamp(1.25rem, 6vw, 2.5rem) 10vh; display: block; }
  .tj-brief__lead, .tj-wire__intro, .tj-sys__intro, .tj-flow__intro, .tj-trust__intro, .tj-show__intro { width: 100%; }
  .tj-flow__steps { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * clamp(1.25rem, 6vw, 2.5rem)); margin: 2.4rem calc(-1 * clamp(1.25rem, 6vw, 2.5rem)) 0; padding: 1.4rem clamp(1.25rem, 6vw, 2.5rem) 1rem; -webkit-overflow-scrolling: touch; }
  .tj-step__shot { height: 44vh; }
  .tj-syscard { width: 100%; margin-top: 1.6rem; }
  .tj-syscard--type, .tj-syscard--comps, .tj-syscard--shapes { width: 100%; }
  .tj-comps { grid-template-columns: 1fr; }
  .tj-palette { flex-wrap: wrap; }
  .tj-show__note { display: none; }
  .tj-stand { flex-wrap: nowrap; overflow-x: auto; align-items: flex-end; width: calc(100% + 2 * clamp(1.25rem, 6vw, 2.5rem)); margin: 2rem calc(-1 * clamp(1.25rem, 6vw, 2.5rem)) 0; padding: 0 clamp(1.25rem, 6vw, 2.5rem) 3.6rem; -webkit-overflow-scrolling: touch; }
  .tj-w-lg { width: 74vw; }
  /* cover: stacked sticker page */
  .tjc { padding: calc(var(--t-bar-h) + 3vh) clamp(1.25rem, 6vw, 2.5rem) 10vh; }
  .tjc-left { position: static; width: 100%; }
  .tjc-stamp, .tjc-tablet { display: none; }
  .tjc-browser { position: relative; inset: auto; width: 100%; margin-top: 2rem; }
  .tjc-browser__view { height: 52vh; }
  .tjc-phone { position: relative; inset: auto; width: 38vw; margin: -16vh 0 0 auto; transform: rotate(2deg); }
  .tj-brief__cols { grid-template-columns: 1fr; margin-top: 2.4rem; }
  .tj-brief__col--low { margin-top: 1.2rem; }
}
/* ========================================================= SHORT DESKTOP SCREENS — denser, so everything fits 100svh ========================================================= */
@media (min-width: 900px) and (max-height: 800px) {
  .tj-h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
  .tj-lede { font-size: 0.95rem; }
  .tj-show__wins { gap: 0.55rem; padding: 0.8rem 0.95rem; }
  .tj-show__wins p { font-size: 0.76rem; }
  .tj-show__wins b { font-size: 0.9rem; }
  .tj-show__wins .tj-step__ic { width: 1.8rem; height: 1.8rem; }
  .tj-outro__credit { margin-top: 0.9rem; }
  .tj-syscard { padding: 1.1rem 1.3rem; }
  .tj-type__sample { font-size: 1.05rem; margin: 0.4rem 0 0.7rem; }
  .tj-type__row { padding: 0.45rem 0; }
  .tj-pal::before { width: clamp(64px, 5.4vw, 96px); height: clamp(64px, 5.4vw, 96px); }
  /* cover column, condensed */
  .tjc-wordmark { font-size: 4.6rem; }
  .tjc-sub { font-size: 1.15rem; margin-bottom: 0.5em; }
  .tjc-lede { font-size: 0.85rem; margin-bottom: 0.9rem; }
  .tjc-chips { padding: 0.6rem; gap: 0.5rem; margin-bottom: 0.9rem; }
  .tjc-chips li { padding: 0.38rem 0.75rem; font-size: 0.8rem; }
  .tjc-goal { padding: 0.8rem 1rem 0.7rem; margin-bottom: 0.8rem; }
  .tjc-goal__title { font-size: 1.3rem; }
  .tjc-goal__body { font-size: 0.82rem; }
  .tjc-dive { font-size: 1.25rem; margin-bottom: 0.3rem; }
  .tjc-cta { font-size: 0.95rem; padding: 0.6rem 1.4rem; }
}
/* ========================================================= REDUCED MOTION ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .tj-bar__back span, .tj-btn, .tj-outro__cta span { transition: none; }
}
/* ========================================================= TOP NAV — star + Selected Works + Next Project (Tasty amber/ink) ========================================================= */
.tj .tjtop { position: fixed; inset: 0 0 auto 0; z-index: 200; display: grid; grid-template-columns: 1fr auto; align-items: center; height: var(--t-bar-h, 60px); padding: 0 clamp(22px, 3.4vw, 48px); font-family: var(--t-body, "Nunito", sans-serif); pointer-events: none; }
.tj .tjtop::before { content: ""; position: absolute; inset: 0 0 -22px 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, oklch(0.965 0.018 85 / 0.62), oklch(0.965 0.018 85 / 0.32) 55%, oklch(0.965 0.018 85 / 0)); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.tj .tjtop > * { pointer-events: auto; }
.tj .tjtop__star { justify-self: start; color: var(--t-amber); font-size: 28px; font-weight: 800; line-height: 1; margin-top: -4px; text-decoration: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.tj .tjtop__star:hover { transform: rotate(90deg) scale(1.1); }
.tj .tjtop__links { justify-self: end; display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.tj .tjtop__links a { position: relative; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--t-ink); text-decoration: none; transition: color 0.25s; }
.tj .tjtop__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.6px; background: var(--t-amber); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.tj .tjtop__links a:hover { color: var(--t-amber); }
.tj .tjtop__links a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .tj .tjtop { height: 54px; padding: 0 18px; }
  .tj .tjtop__star { font-size: 25px; }
  .tj .tjtop__links { gap: 16px; }
  .tj .tjtop__links a { font-size: 12.5px; }
}
.tj:not(.is-motion-ready) [data-reveal] { opacity: 0; transform: translateY(34px); }
@media (max-width: 899px) {
  .tj-flow__steps, .tj-stand { width: 100vw; margin-left: calc(-1 * clamp(1.25rem, 6vw, 2.5rem)); margin-right: calc(-1 * clamp(1.25rem, 6vw, 2.5rem)); padding-inline: clamp(1.5rem, 7vw, 2.75rem); overflow-x: auto; overflow-y: hidden; scroll-padding-inline: clamp(1.5rem, 7vw, 2.75rem); overscroll-behavior-y: auto; cursor: grab; }
  .tj-flow__steps:active, .tj-stand:active { cursor: grabbing; }
  .tj-flow__steps img, .tj-stand img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
  .tj-flow__steps::after, .tj-stand::after { content: ""; flex: 0 0 clamp(1rem, 6vw, 2.25rem); }
  .tj-step { flex: 0 0 min(76vw, 310px); width: auto; }
  .tj-print { flex: 0 0 min(78vw, 330px); }
  .tj-h-48, .tj-h-52, .tj-h-56 { width: auto; }
  .tj-h-58, .tj-h-60, .tj-h-62, .tj-h-66 { width: auto; }
}
/* Mobile rhythm/crop pass: tighter vertical chapters, but enough underside for the taped screen captions so Content & Trust is not clipped. */
@media (max-width: 899px) {
  .tj-panel { padding-top: calc(var(--t-bar-h) + 2vh); padding-bottom: 7vh; }
  .tj-flow__steps, .tj-stand { gap: clamp(0.9rem, 3.6vw, 1.35rem); }
  .tj-trust { padding-bottom: clamp(92px, 14vh, 132px); }
  .tj-trust__collage { align-items: flex-start; }
  .tj-print figcaption, .tj-dab figcaption { top: calc(100% + 0.6rem); }
  .tj-h-48, .tj-h-52, .tj-h-56 { height: min(42svh, 400px); }
  .tj-h-58, .tj-h-60, .tj-h-62, .tj-h-66 { height: min(48svh, 450px); }
}
/* Final mobile rhythm: from the brief onward, keep chapters close together while preserving enough room for the hanging carousel captions. */
@media (max-width: 899px) {
  .tj-panel.tj-trust { padding-bottom: clamp(52px, 7vh, 76px); }
  .tj-trust__collage { padding-bottom: clamp(6rem, 14vh, 7.5rem); }
  .tj-trust__collage .tj-h-58, .tj-trust__collage .tj-h-66 { height: min(42svh, 400px); }
  .tj-show { padding-bottom: clamp(64px, 10vh, 96px); }
}
/* Final mobile pass: native iOS momentum for image strips, softer snap, and tighter chapter rhythm after the cover. */
@media (max-width: 899px) {
  .tj-panel:not(.tjc) { padding-top: calc(var(--t-bar-h) + 10px); padding-bottom: clamp(16px, 2.4vh, 28px); }
  .tj-panel:not(.tjc) + .tj-panel:not(.tjc) { margin-top: -8px; }
  .tj-flow, .tj-wire, .tj-sys { padding-bottom: clamp(16px, 2.6vh, 28px); }
  .tj-flow__steps, .tj-stand { scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; margin-top: clamp(0.75rem, 2vh, 1.15rem); padding-bottom: clamp(1.2rem, 3.5vh, 1.9rem); }
  .tj-flow__steps::-webkit-scrollbar, .tj-stand::-webkit-scrollbar { display: none; }
  .tj-flow__steps > *, .tj-stand > * { scroll-snap-align: center; scroll-snap-stop: normal; }
  .tj-step { flex-basis: min(80vw, 330px); }
  .tj-print { flex-basis: min(82vw, 350px); max-width: min(82vw, 350px); }
  .tj-print.tj-w-lg { flex-basis: min(88vw, 390px); max-width: min(88vw, 390px); }
}
/* Carousel captions hang below each card (figcaption is position:absolute,
   top:100%), and the strip is overflow-y:hidden. A generic .tj-stand rule above
   had shrunk padding-bottom to ~29px, clipping those captions. This block comes
   after it so it wins: enough bottom room for the simple hanging captions, and
   extra for the taller tagged caption cards in the Content & Trust collage. */
@media (max-width: 899px) {
  .tj-stand { padding-bottom: clamp(5.25rem, 11vh, 6.5rem); }
  .tj-trust__collage { padding-bottom: clamp(8.5rem, 17vh, 10rem); }
}
/* Equalize the cover's bottom gap with the rest of the chapters: the hero (.tjc) kept a 7vh bottom pad while every other panel uses ~2.4vh, so the first gap read noticeably bigger than the rest. Match it for a consistent rhythm. */
@media (max-width: 899px) {
  .tj-panel.tjc { padding-bottom: clamp(16px, 2.4vh, 28px) !important; }
}

/* Scattered nut + almond decorations across inner panels (varied per panel,
   distinct from the cover's all-peanut field). Sit behind content via the
   panel's own stacking context; hidden on mobile to keep it clean. */
.tj-brief, .tj-flow, .tj-sys { isolation: isolate; }
.tj-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tj-deco svg { position: absolute; will-change: transform; }
.tj-deco svg path { fill: currentColor; }
.tj-deco .pod { color: #C8862F; }
.tj-deco .alm { color: #9A5218; }
@keyframes tj-deco-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -15px; } }
@media (max-width: 900px) { .tj-deco { display: none; } }