/* Mixed-size row. Photographic compositions keep their original 3:2 aspect. */
.project-grid[data-view=gallery]{display:flex;align-items:flex-start;gap:20px;height:470px;padding:12px 7px 25px;margin:0 -7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#3b1c3c66 transparent;scroll-snap-type:x proximity}
.project-grid[data-view=gallery] .folder{flex:0 0 var(--tile-base,300px);width:auto;aspect-ratio:auto;margin:0;padding:0;background:none!important;border:0;border-radius:0;box-shadow:none;transform:none!important;transition:flex-basis .55s var(--ease);scroll-snap-align:start;isolation:auto;color:#3b1c3c;text-align:left}
.project-grid[data-view=gallery] .folder:before,.project-grid[data-view=gallery] .folder:after,.project-grid[data-view=gallery] .folder-preview,.project-grid[data-view=gallery] .folder-slip,.project-grid[data-view=gallery] .folder-bookmark{display:none}
.project-grid[data-view=gallery] .gallery-mockup{display:block;width:100%;aspect-ratio:3/2;height:auto;border-radius:6px;overflow:hidden;box-shadow:0 10px 22px #3b1c3c13}
.project-grid[data-view=gallery] .folder-info{position:relative;inset:auto;background:none;padding:17px 1px 0;display:block;z-index:auto}
.project-grid[data-view=gallery] .folder-info strong{display:block;font-size:22px;letter-spacing:-.045em}.project-grid[data-view=gallery] .folder-info small{display:block;font-size:10px;line-height:1.4;margin-top:6px;max-width:95%}.project-grid[data-view=gallery] .folder-info>span{display:block;font-size:10px;margin-top:13px}
.project-grid[data-view=gallery].gallery-focused .folder{flex-basis:calc(var(--tile-base)*.68)}
.project-grid[data-view=gallery].gallery-focused .folder.gallery-active{flex-basis:calc(var(--tile-base)*1.48)}
.gallery-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:11px;letter-spacing:0}.gallery-nav>div{display:flex;gap:8px}.gallery-nav button{background:#3b1c3c;color:#fffdf0;font-size:22px;border-radius:4px;width:43px;height:39px;line-height:1}
/* Process rows: hover or keyboard focus opens an illustration and the original copy. */
#process .step{display:grid;grid-template-columns:35% minmax(0,1fr) 48px;align-items:start;gap:5vw;padding:22px 0;min-height:112px;background:transparent;transition:background-color .35s var(--ease)}
#process .process-picture{height:70px;overflow:hidden;border-radius:5px;transition:height .55s var(--ease);position:relative}
#process .process-picture img{width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;transition:transform .55s var(--ease)}
#process .step details{padding-top:12px}
#process .step summary{font-size:25px;font-weight:700;letter-spacing:-.04em;max-width:620px;line-height:1.15}
#process .step summary:after{display:none}
#process .step details p{font-size:16px;line-height:1.5;max-width:580px;margin-top:28px}
#process .step>span{font-size:24px;line-height:1;font-weight:500;letter-spacing:-.04em;justify-self:end;padding-top:13px}
#process .step.process-active{background:#fffdf030}
#process .step.process-active .process-picture{height:300px}
#process .step.process-active .process-picture img{transform:scale(1.025)}
/* Reference 4: identity behind project fan. Reference 5: condensed visual weight. */
:root{--paper:#ecebee;--berry:#b93659}
.hero-notebook-mode #home{height:auto;min-height:100svh;background:var(--paper);padding:0 var(--gap);overflow:clip}
.hero-notebook-mode .v7-pin{position:relative;min-height:100svh;max-width:1600px;margin:auto}
.hero-notebook-mode .v7-nav{height:62px;color:var(--berry);border-color:#b9365940}
.hero-notebook-mode .v7-logo{font-size:15px;letter-spacing:-.04em;max-width:180px}
.hero-notebook-mode .nav-specialty{margin-left:0;font-size:11px}
.hero-notebook-mode .v7-nav>div{align-items:center;gap:25px}
.catalog-link{display:flex;align-items:center;gap:12px;border:1px solid #b9365960;padding:8px 12px!important}
.catalog-link b{border-left:1px solid #b9365960;padding-left:15px;font-size:20px;font-weight:400}
.hero-notebook-mode .v7-grid{opacity:.2}
.fan-hero{position:relative;padding:30px 0 38px;isolation:isolate}
.back-name{position:absolute;top:25px;left:0;width:100%;color:var(--berry);font-size:clamp(80px,12.4vw,190px);font-weight:900;letter-spacing:-.085em;line-height:.8;pointer-events:none;z-index:0}
.back-name span{display:block;text-align:center;transform:scaleX(1.03)}
.project-fan{position:relative;height:345px;max-width:720px;margin:12px auto 40px;z-index:2}
.fan-card{position:absolute;left:50%;top:38px;width:205px;height:263px;overflow:hidden;padding:7px;background:#fffdf8;border-radius:10px;box-shadow:0 14px 30px #3b1c3c25;transform:translateX(calc(-50% + var(--fan-x))) rotate(var(--angle));transform-origin:50% 90%;transition:transform .5s var(--ease);border:1px solid #3b1c3c15}
.fan-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.fan-card:hover,.fan-card:focus-visible{z-index:6;transform:translateX(calc(-50% + var(--fan-x))) translateY(-22px) rotate(calc(var(--angle)*.65))}
.fan-portal{position:absolute;left:50%;top:62px;transform:translateX(-50%) rotate(-3deg);width:242px;z-index:4}
.hero-notebook-mode .portal-stage{height:210px;width:100%;perspective:none}
.hero-notebook-mode .v7-screen{position:relative;inset:auto;width:100%;height:210px;max-width:none;background:#fff;border:7px solid #fffdf8;box-shadow:0 18px 35px #3b1c3c30;transform:none!important;border-radius:9px}
.hero-notebook-mode .v7-browser{height:23px;font-size:8px;padding:0 4px;background:#fffdf8}
.hero-notebook-mode #v7-film{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0;object-fit:cover;object-position:top;clip-path:none}
.hero-notebook-mode .v7-project-caption{background:#fffdf8;padding:10px;display:flex;flex-wrap:wrap;gap:6px;box-shadow:0 7px 16px #3b1c3c14;font-size:9px;margin-top:8px;border-radius:4px}
.hero-notebook-mode .caption-category{display:none}.hero-notebook-mode .caption-name{font-size:12px}.hero-notebook-mode .v7-open-case{font-size:9px}.hero-notebook-mode .v7-pause{margin:0;font-size:9px}
.fan-portal>select{width:100%;border:1px solid #3b1c3c30;background:var(--paper);color:var(--ink);padding:6px 8px;font:500 10px Inter,Arial,sans-serif;margin-top:6px;border-radius:3px}
.hero-lower{display:grid;grid-template-columns:1.35fr .75fr;gap:6vw;align-items:start;position:relative;z-index:3}
.hero-notebook-mode .v7-copy{max-width:none;opacity:1!important}
.hero-notebook-mode .v7-copy h1{font-size:clamp(54px,4vw,60px);line-height:1.02;max-width:850px;margin-bottom:22px;color:var(--berry);font-weight:900;letter-spacing:-.065em}
.hero-notebook-mode .v7-copy p{font-size:16px;max-width:440px;margin-bottom:24px}
.hero-notebook-mode .v7-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:22px}
.hero-tasks>p{max-width:460px;margin-bottom:25px;font-size:16px;line-height:1.5}
.hero-tasks .benefit-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 17px}
.hero-tasks .benefit-tabs button{font-size:12px;padding:8px 11px;border:1px solid #b9365950;border-radius:25px;background:transparent;color:var(--berry)}
.hero-tasks .benefit-tabs button[aria-selected=true]{background:var(--berry);color:white}
.hero-tasks .benefit-panel{font-size:14px;line-height:1.5;min-height:85px;max-width:440px;padding:0;border:0}