/* B1–B3 only. Original A, B and C use styles.css alone.
   No fonts, assets, dependencies or JavaScript to download. */
:is(.design-b1,.design-b2,.design-b3){--paper:#fff;--ink:#101010;--line:#b8b8b8}
:is(.design-b1,.design-b2,.design-b3) .hero-mark{display:none}
:is(.design-b1,.design-b2,.design-b3) .site-header{padding:24px 0;border-bottom:1px solid #101010}
:is(.design-b1,.design-b2,.design-b3) h2{font-family:'Courier New',monospace;font-size:12px;font-weight:400;letter-spacing:.04em}
:is(.design-b1,.design-b2,.design-b3) .text-section p{max-width:65ch}
:is(.design-b1,.design-b2,.design-b3) .site-header nav a:hover{text-decoration:underline}

/* B1: a two-line typographic masthead, a huge job title and small marginal labels. */
.design-b1 .hero{display:grid;grid-template-columns:1.4fr 1fr;column-gap:7%;padding:50px 0 70px;align-items:end;border-bottom:4px solid}
.design-b1 .hero-title{display:contents}
.design-b1 h1{grid-column:1;grid-row:1 / 3;font-size:clamp(120px,19vw,270px);line-height:.76;font-weight:900;letter-spacing:-.085em}
.design-b1 h1 span{display:block}
.design-b1 h1 span+span{margin-top:.12em}
.design-b1 .role{grid-column:2;grid-row:1;margin:0 0 45px;font-size:clamp(38px,5.5vw,78px);font-weight:700;line-height:.98;letter-spacing:-.065em;max-width:7ch}
.design-b1 .intro{grid-column:2;grid-row:2;margin:0;font-size:20px;line-height:1.55;letter-spacing:-.02em}
.design-b1 .text-section{grid-template-columns:1fr 3fr;gap:7%;padding:65px 0}
.design-b1 #about p:first-child{font-size:clamp(26px,3.2vw,42px);line-height:1.22;letter-spacing:-.035em;font-weight:600}
.design-b1 .experience>div{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.design-b1 .experience p+p{margin:0}
.design-b1 .experience p:last-child{grid-column:1 / -1;max-width:42ch;font-size:27px;line-height:1.3;letter-spacing:-.025em;margin-top:18px}
.design-b1 .awards p{font-size:clamp(25px,3vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.04em}
.design-b1 .work-links a{font-size:clamp(32px,4.5vw,64px);font-weight:800;letter-spacing:-.06em;padding:23px 0}
.design-b1 .contact{grid-template-columns:1fr 3fr;gap:7%;border-top:4px solid}
.design-b1 .contact>div>p:first-child{font-size:clamp(27px,3.4vw,44px);line-height:1.2;letter-spacing:-.04em}

/* B2: twelve-column editorial grid, offset copy and fine rules. */
.design-b2 .site-header,.design-b2 main,.design-b2 footer{width:min(1280px,86%)}
.design-b2 .hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:90px 0 100px;border-bottom:0}
.design-b2 .hero-title{display:contents}
.design-b2 h1{grid-column:1 / 10;font-size:clamp(80px,11.8vw,170px);font-weight:700;line-height:.95;letter-spacing:-.075em}
.design-b2 .role{grid-column:10 / 13;align-self:end;margin:0 0 8px;font:14px/1.4 'Courier New',monospace;max-width:10ch}
.design-b2 .intro{grid-column:5 / 12;margin:65px 0 0;font-size:clamp(27px,3vw,40px);line-height:1.3;letter-spacing:-.035em}
.design-b2 .text-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:55px 0;border-top:1px solid #101010;border-bottom:0}
.design-b2 .text-section h2{grid-column:1 / 4;max-width:20ch}
.design-b2 .text-section>div{grid-column:5 / 11}
.design-b2 .text-section p{font-size:19px;line-height:1.75}
.design-b2 .experience{padding-top:75px;margin-top:55px}
.design-b2 .experience h2{grid-column:3 / 6}
.design-b2 .experience>div{grid-column:7 / 13}
.design-b2 .awards{margin-top:65px}
.design-b2 .awards>div{grid-column:5 / 12}
.design-b2 .awards p{font-family:Georgia,'Times New Roman',serif;font-size:29px;line-height:1.5}
.design-b2 .explore{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:100px 0}
.design-b2 .explore h2{grid-column:1 / 4;margin:6px 0 0}
.design-b2 .work-links{grid-column:4 / 13}
.design-b2 .work-links a{font-size:clamp(28px,3.2vw,44px);padding:28px 0;letter-spacing:-.045em;font-weight:500}
.design-b2 .contact{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:50px 0 90px;border-color:#101010}
.design-b2 .contact h2{grid-column:1 / 4}
.design-b2 .contact>div{grid-column:6 / 13}
.design-b2 .contact>div>p:first-child{font-size:29px;letter-spacing:-.03em;line-height:1.4}

/* B3: one electric lime accent. CSS-only interactions, including keyboard focus.
   Specialist links stay disabled; tabindex permits previewing the same effect
   with a keyboard without making them navigate. */
.design-b3{--accent:#d6ff38}
.design-b3 .wordmark span{background:var(--accent);padding:0 6px 0 2px}
.design-b3 .hero{padding:70px 0}
/* Version E uses the shared thin hero divider from styles.css. */
.design-b3:not(.design-e) .hero{border-bottom:3px solid #101010}
.design-b3 .hero-title{display:grid;grid-template-columns:3fr 1fr;gap:6%;align-items:end}
.design-b3 h1:not(.portfolio-name){font-size:clamp(80px,12.5vw,178px);font-weight:900;line-height:.88;letter-spacing:-.08em;max-width:8ch;text-transform:uppercase}
.design-b3 .role{font-size:clamp(22px,3vw,40px);font-weight:700;line-height:1.05;letter-spacing:-.04em;margin:0 0 8px;padding-left:18px;border-left:8px solid var(--accent)}
.design-b3 .intro{margin:50px 0 0 auto;font-size:clamp(24px,2.6vw,34px);max-width:740px;line-height:1.4}
.design-b3 .text-section{grid-template-columns:1fr 2fr;padding:55px 0;gap:7%}
.design-b3 .text-section h2{font-weight:700}
.design-b3 .awards p{font-size:26px;font-weight:600;line-height:1.4;letter-spacing:-.025em}
.design-b3 .explore{background:#101010;color:#fff;margin:65px 0;padding:45px 4% 55px}
.design-b3 .explore h2{color:var(--accent);margin-bottom:40px}
.design-b3 .work-links{counter-reset:specialism}
.design-b3 .work-links a{position:relative;isolation:isolate;counter-increment:specialism;display:grid;grid-template-columns:24px minmax(0,1fr) 40px;gap:22px;font-size:clamp(34px,5vw,70px);font-weight:800;line-height:1.02;letter-spacing:-.06em;padding:35px 12px;border-color:#666;transition:color .2s ease,padding .2s ease}
.design-b3 .work-links a::before{content:'0' counter(specialism);font:12px/1.3 'Courier New',monospace;letter-spacing:0;align-self:start;margin-top:7px}
.design-b3 .work-links a::after{content:'';position:absolute;inset:0;background:var(--accent);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .2s ease}
.design-b3 .work-links a span{font-size:40px;transition:transform .2s ease}
.design-b3 .work-links a:focus-visible{color:#101010;outline:2px solid var(--accent);outline-offset:5px}
.design-b3 .work-links a:focus-visible::after{transform:scaleY(1)}
.design-b3 .work-links a:focus-visible span{transform:translate(3px,-3px)}
.design-b3 .contact{border-top:0;padding-top:10px;gap:7%}
.design-b3 .contact>div>p:first-child{font-size:clamp(28px,3vw,40px);line-height:1.2;font-weight:600;letter-spacing:-.035em}
.design-b3 .email a{text-decoration-color:#101010;text-decoration-thickness:2px}
@media(hover:hover){.design-b3 .work-links a:hover{color:#101010}.design-b3 .work-links a:hover::after{transform:scaleY(1)}.design-b3 .work-links a:hover span{transform:translate(3px,-3px)}.design-b3 .email a:hover{background:var(--accent)}}

/* Tablet: collapse the narrower editorial columns before they squeeze the copy. */
@media(max-width:1000px) and (min-width:701px){
 .design-b1 .hero{grid-template-columns:1.2fr 1fr;gap:6%}.design-b1 h1{font-size:19vw}.design-b1 .role{font-size:6vw}.design-b1 .intro{font-size:18px}
 .design-b2 .role{grid-column:10 / 13}.design-b2 .experience h2{grid-column:1 / 4}.design-b2 .experience>div{grid-column:5 / 13}.design-b2 .text-section>div{grid-column:5 / 13}
 .design-b3 .hero-title{grid-template-columns:2fr 1fr}
}
/* Mobile: keep the hierarchy, return every reading section to one column. */
@media(max-width:700px){
 :is(.design-b1,.design-b2,.design-b3) .site-header{padding:19px 0}
 .design-b1 .hero{display:block;padding:45px 0}.design-b1 h1{font-size:clamp(100px,27vw,185px);line-height:.8}.design-b1 .role{font-size:46px;max-width:9ch;line-height:1;margin:35px 0 25px}.design-b1 .intro{font-size:20px}
 .design-b1 .text-section,.design-b1 .contact{grid-template-columns:1fr;gap:22px;padding:38px 0}.design-b1 #about p:first-child{font-size:28px}.design-b1 .experience>div{display:block}.design-b1 .experience p+p{margin-top:22px}.design-b1 .experience p:last-child{font-size:25px}.design-b1 .awards p{font-size:27px}.design-b1 .work-links a{font-size:31px}.design-b1 .contact>div>p:first-child{font-size:30px}
 .design-b2 .hero{grid-template-columns:1fr;gap:25px;padding:50px 0 60px}.design-b2 h1{grid-column:auto;font-size:clamp(65px,16vw,105px);line-height:.95;max-width:8ch}.design-b2 .role{grid-column:auto;max-width:none;margin:0}.design-b2 .intro{grid-column:auto;margin:15px 0 0 9%;font-size:27px}
 .design-b2 .text-section,.design-b2 .explore,.design-b2 .contact{grid-template-columns:1fr;gap:23px;padding:35px 0;margin-top:0}.design-b2 .text-section h2,.design-b2 .text-section>div,.design-b2 .explore h2,.design-b2 .work-links,.design-b2 .contact h2,.design-b2 .contact>div{grid-column:auto;max-width:none}.design-b2 .text-section p{font-size:18px}.design-b2 .experience{margin-top:25px}.design-b2 .awards{margin-top:25px}.design-b2 .awards p{font-size:26px}.design-b2 .explore{padding:50px 0}.design-b2 .work-links a{font-size:28px}.design-b2 .contact{padding-bottom:55px}
 .design-b3 .hero{padding:45px 0}.design-b3 .hero-title{display:block}.design-b3 h1:not(.portfolio-name){font-size:clamp(78px,22vw,145px)}.design-b3 .role{font-size:28px;margin:30px 0 0;padding-left:14px;max-width:11ch}.design-b3 .intro{margin-top:32px;font-size:24px}
 .design-b3 .text-section,.design-b3 .contact{grid-template-columns:1fr;gap:22px;padding:35px 0}.design-b3 .awards p{font-size:23px}.design-b3 .explore{margin:40px 0;padding:28px 6%}.design-b3 .explore h2{margin-bottom:25px}.design-b3 .work-links a{grid-template-columns:18px minmax(0,1fr) 24px;gap:10px;font-size:clamp(25px,6.3vw,42px);padding:28px 0;letter-spacing:-.045em}.design-b3 .work-links a::before{font-size:10px;margin-top:4px}.design-b3 .work-links a span{font-size:25px}.design-b3 .contact>div>p:first-child{font-size:29px}
}
@media(prefers-reduced-motion:reduce){.design-b3 .work-links a,.design-b3 .work-links a::after,.design-b3 .work-links a span{transition:none}.design-b3 .work-links a:is(:hover,:focus-visible) span{transform:none}}