/* JFula | Product-led visual direction | Nov 2026
   Authored interface, real project images, deliberate type hierarchy.
   No stock imagery, no speculative outcomes, no decorative animation. */
:root {--paper:#f5f1e9;--ink:#242724;--dim:#657069;--accent:#b95135;--line:#cbcfc7;--white:#fff;--forest:#14241f;--forestline:#3b4c42;--yellow:#e8eab7;--gutter:clamp(22px,4vw,72px);--max:1440px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Helvetica Neue',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.067em}p{max-width:75ch}a{color:inherit;text-decoration:none}button{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}
img{display:block;max-width:100%}a:focus-visible,button:focus-visible{outline:3px solid #bd593e;outline-offset:4px}a:hover{color:var(--accent)}::selection{background:#e3bbac;color:var(--ink)}
.shell{max-width:var(--max);padding-inline:var(--gutter);margin-inline:auto}
.skip-link{position:fixed;z-index:99;left:12px;top:-100px;background:#14241f;color:white;padding:14px 18px}.skip-link:focus{top:12px}
.site-header{background:rgba(245,241,233,.97);border-bottom:1px solid #d4d8d0;position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}
.nav-wrap{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:baseline;gap:19px;white-space:nowrap}.brand-name{font-size:28px;font-weight:800;letter-spacing:-.09em}.brand-period,.footer-inner>a span{color:var(--accent)}.brand-under{font-size:11px;color:#71766f;letter-spacing:.02em}.main-nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,31px);font-size:12px;font-weight:700}.main-nav>a{white-space:nowrap;display:flex;align-items:center;gap:5px;min-height:42px}.main-nav>a span{font-size:9px;color:var(--accent)}.main-nav>a.nav-email{padding:10px 14px;border:1px solid var(--ink);min-height:37px}.main-nav>a.nav-email:hover{background:var(--ink);color:var(--paper)}
.microbar,.section-rule,.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.115em;font-weight:700}.microbar-divider{margin-inline:8px;color:#a59f95}.signal{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:9px}
.hero{padding-top:30px}.microbar{border-bottom:1px solid var(--line);padding-bottom:18px;color:var(--dim)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(265px,.63fr);gap:clamp(40px,6vw,114px);padding-top:72px;padding-bottom:68px;align-items:end}.context{font-size:11px;letter-spacing:.11em;color:var(--accent);font-weight:800;margin-bottom:23px}.context span{padding-inline:7px;color:#ada99e}.hero h1{font-size:clamp(57px,7.7vw,120px);line-height:.99;letter-spacing:-.086em;max-width:950px}.hero h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.075em;color:var(--accent);white-space:nowrap}.hero-side{padding-bottom:10px;align-self:end}.hero-side-line{font-size:42px;margin-bottom:40px;color:var(--accent);line-height:.7}.hero-side>p{font-size:17px;line-height:1.65;max-width:370px;letter-spacing:-.012em;color:#424841}.hero-quicklinks{display:flex;align-items:start;flex-direction:column;gap:18px;margin-top:30px;font-size:13px;font-weight:700}.hero-quicklinks a{border-bottom:1px solid transparent}.hero-quicklinks a:hover{border-color:currentColor}.hero-quicklinks .primary-link{display:flex;justify-content:space-between;gap:35px;background:var(--ink);color:var(--paper);padding:14px 17px;min-width:192px}.hero-quicklinks .primary-link:hover{background:var(--accent);color:#fff}.hero-bottom{border-top:1px solid var(--line);padding:17px 0 23px;color:var(--dim)}
.feature{background:var(--forest);color:#f6f4e9;padding:69px 0 96px}.section-rule{border-top:1px solid var(--line);padding-top:16px;color:#667168}.feature .section-rule{border-color:var(--forestline);color:#b7c2b6}.feature-heading{display:grid;grid-template-columns:1fr minmax(230px,320px);gap:55px;align-items:end;margin-top:35px;margin-bottom:47px}.feature-heading h2,.experience-intro h2,.closing-copy h2{font-size:clamp(50px,6vw,88px);line-height:1.02}.feature-heading h2 em,.experience-intro h2 em,.closing-copy h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em;color:var(--yellow)}.feature-heading>p{font-size:16px;line-height:1.7;color:#bdc7bc;max-width:310px;padding-bottom:3px}
.feature-stage{display:grid;grid-template-columns:286px minmax(0,1fr);border:1px solid #4d6458;min-height:495px}.feature-rail{display:flex;flex-direction:column;padding:28px 25px;background:#1d3027;border-right:1px solid #4d6458}.stage-label,.screen-topline,.mini-copy>span,.portrait>span{font-size:10px;font-weight:800;letter-spacing:.11em}.stage-label{color:#a9baaa}.stage-details{margin-top:80px}.stage-details h3{font-size:42px;letter-spacing:-.07em;line-height:1.05}.stage-details p{font-size:14px;color:#afc2b5;max-width:210px;margin-top:14px;line-height:1.6}.stage-controls{margin-top:auto;padding-top:35px}.view-button{display:flex;align-items:center;gap:13px;text-align:left;width:100%;border:0;border-top:1px solid #475d51;background:none;color:#a5b9ac;font-size:14px;padding:15px 0}.view-button:last-child{border-bottom:1px solid #475d51}.view-button span:first-child{font-size:10px;color:#9fae9f}.view-button span:last-child{margin-left:auto;font-size:16px}.view-button.is-active,.view-button:hover{color:#f5f5ec}.view-button.is-active span:first-child{color:var(--yellow)}.stage-case-link{display:flex;justify-content:space-between;gap:10px;margin-top:25px;color:var(--yellow);font-size:13px}.stage-case-link:hover{color:#fff}
.feature-screen{display:flex;flex-direction:column;min-width:0;background:#f0efe8;color:#18221e;padding:20px 20px 0}.screen-topline{display:flex;justify-content:space-between;gap:20px;padding:1px 4px 17px;color:#526559}.screen-image-wrap{background:#d9dfd5;min-height:355px;overflow:hidden;flex:1;display:grid;align-items:center}.screen-image-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;max-height:470px}.feature-screen figcaption{font-size:12px;color:#5c665d;line-height:1.55;min-height:52px;padding:17px 4px}
.extra-projects{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.project-mini{display:grid;grid-template-columns:42% 1fr;align-items:stretch;border:1px solid #496155;min-height:165px;overflow:hidden}.project-mini:hover{border-color:#e8eab7;color:#fff}.mini-image{background:#f5f1e9;overflow:hidden}.mini-image img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .4s}.project-mini:hover .mini-image img{transform:scale(1.035)}.mini-copy{padding:23px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.mini-copy>span{color:#b2c3b5}.mini-copy strong{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:25px;font-weight:500;line-height:1.18;letter-spacing:-.05em}.mini-copy strong>span{color:var(--yellow);font-size:18px}
.experience{padding-top:89px;padding-bottom:116px}.experience-layout{display:grid;grid-template-columns:minmax(280px,.77fr) minmax(0,1.23fr);gap:clamp(50px,7vw,115px);margin-top:45px}.experience-intro h2 em{color:var(--accent)}.experience-intro>p{font-size:16px;line-height:1.7;color:#616861;max-width:340px;margin-top:26px}.experience-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:83px;font-weight:700;letter-spacing:-.085em;margin-top:100px;line-height:1}.experience-mark>span{font-size:33px;color:var(--accent);letter-spacing:0}.experience-mark small{flex-basis:100%;font-size:10px;line-height:1.4;letter-spacing:.13em;max-width:240px;font-weight:700;color:#6d786e;margin-top:6px}.experience-list{border-top:1px solid var(--line)}.experience-item{display:grid;grid-template-columns:35px minmax(0,1fr) 30px;gap:14px;align-items:start;border-bottom:1px solid var(--line);padding:27px 0 30px;transition:padding-left .15s}.experience-item:hover{padding-left:8px}.item-number{font-size:11px;font-weight:800;color:var(--accent);padding-top:9px}.item-body{display:flex;flex-direction:column;gap:6px;min-width:0}.item-body strong{font-size:29px;font-weight:600;letter-spacing:-.055em;line-height:1.12}.item-body small{font-size:11px;font-weight:700;letter-spacing:.015em;color:#555e56;margin-top:5px}.item-body>span{font-size:14px;line-height:1.5;color:#646b64;margin-top:3px}.item-arrow{font-size:20px;justify-self:end}
.closing{background:#e5e5d9}.closing-inner{display:grid;grid-template-columns:minmax(210px,.46fr) minmax(0,1fr);gap:clamp(50px,8vw,130px);padding-block:85px 103px}.portrait{display:flex;flex-direction:column;gap:12px;max-width:365px}.portrait img{width:100%;aspect-ratio:625/650;object-fit:cover;object-position:center 34%;filter:grayscale(100%)}.portrait>span{color:#647064}.closing-copy .section-rule{margin-bottom:55px;border-color:#bfc3b7}.closing-copy h2 em{color:var(--accent)}.closing-copy>p{font-size:17px;line-height:1.75;color:#495148;max-width:630px;margin-top:24px}.closing-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:38px;font-size:14px;font-weight:700}.closing-actions .contact-link{display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--ink);color:#fff;padding:16px 20px;min-height:53px}.closing-actions .contact-link:hover{background:var(--accent)}
.footer{background:#192721;color:#e9eee7;padding-block:26px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-inner>a{font-size:21px;letter-spacing:-.07em;font-weight:800}.footer-inner>p{font-size:11px;color:#b1beb3}.footer-inner>div{display:flex;gap:20px;font-size:11px}.footer-inner a:hover{color:#e8eab7}
@media(max-width:1130px){.brand-under{display:none}.hero-grid{gap:40px}.hero h1{font-size:clamp(58px,7.5vw,90px)}.feature-stage{grid-template-columns:248px 1fr}.stage-details h3{font-size:36px}.project-mini{grid-template-columns:36% 1fr}.mini-copy strong{font-size:22px}}
@media(max-width:820px){.nav-wrap{flex-wrap:wrap;padding-block:18px;gap:8px;min-height:auto}.main-nav{margin-left:auto;flex-wrap:wrap;gap:12px 18px}.hero-grid{grid-template-columns:1fr;padding-top:50px;gap:32px}.hero h1{font-size:clamp(59px,9.4vw,85px)}.hero-side{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.hero-side-line{display:none}.hero-quicklinks{margin-top:0}.feature-stage{grid-template-columns:1fr}.feature-rail{border-right:0;border-bottom:1px solid #4d6458;display:grid;grid-template-columns:1fr 1fr;gap:20px}.stage-details{margin:0}.stage-controls{margin:0;padding-top:0}.stage-case-link{margin-top:0}.feature-screen{min-height:490px}.experience-layout{grid-template-columns:1fr;gap:32px}.experience-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:15px}.experience-intro h2{grid-column:1/2}.experience-intro>p{grid-column:2/3}.experience-mark{display:none}.closing-inner{gap:45px}}
@media(max-width:600px){html{scroll-padding-top:105px}.shell{padding-inline:20px}.nav-wrap{align-items:center;gap:10px;padding-block:16px}.brand-name{font-size:25px}.main-nav{gap:9px 13px;width:100%;justify-content:space-between;font-size:11px}.main-nav>a{min-height:26px}.main-nav>a span{display:none}.main-nav>a.nav-email{min-height:28px;padding:4px 8px}.microbar,.section-rule,.hero-bottom{font-size:9px;letter-spacing:.08em}.microbar{flex-wrap:wrap;gap:7px}.microbar span:last-child{white-space:nowrap}.hero{padding-top:22px}.hero-grid{padding-top:36px;padding-bottom:37px;gap:29px}.hero h1{font-size:clamp(46px,12vw,69px)}.hero h1 em{white-space:normal}.context{font-size:9px;line-height:1.8}.hero-side{grid-template-columns:1fr;gap:16px}.hero-side>p{font-size:16px}.hero-quicklinks{gap:16px}.feature{padding-top:45px;padding-bottom:57px}.feature-heading{display:block;margin-top:24px;margin-bottom:25px}.feature-heading h2,.experience-intro h2,.closing-copy h2{font-size:clamp(48px,10.5vw,64px)}.feature-heading>p{margin-top:17px;font-size:14px}.feature-rail{padding:19px;grid-template-columns:1fr;gap:20px}.stage-details h3{font-size:32px}.stage-details p{margin-top:6px}.stage-controls{display:flex;gap:12px}.view-button{font-size:12px;gap:7px;min-height:45px;border-bottom:1px solid #475d51;white-space:nowrap}.view-button span:last-child{display:none}.stage-case-link{margin-top:0}.feature-screen{padding:12px 12px 0;min-height:270px}.screen-topline{font-size:9px;padding-bottom:10px}.screen-image-wrap{min-height:220px}.screen-image-wrap img{min-height:220px}.feature-screen figcaption{min-height:53px;font-size:11px;padding:11px 2px}.extra-projects{grid-template-columns:1fr;gap:10px;margin-top:10px}.project-mini{min-height:118px;grid-template-columns:42% 1fr}.mini-copy{padding:15px;gap:15px}.mini-copy strong{font-size:18px}.mini-copy>span{font-size:9px}.experience{padding-top:62px;padding-bottom:74px}.experience-layout{display:block;margin-top:29px}.experience-intro{display:block}.experience-intro>p{font-size:15px;margin-top:16px}.experience-list{margin-top:28px}.experience-item{grid-template-columns:25px minmax(0,1fr) 18px;gap:6px;padding:22px 0}.item-body strong{font-size:23px}.item-body small{font-size:11px}.item-body>span{font-size:13px}.item-arrow{font-size:16px}.closing-inner{display:flex;flex-direction:column-reverse;gap:35px;padding-block:57px 60px}.portrait{width:62%;min-width:180px}.closing-copy .section-rule{margin-bottom:32px}.closing-copy>p{font-size:15px;margin-top:20px}.closing-actions{gap:18px;margin-top:29px}.closing-actions .contact-link{width:100%}.footer-inner{align-items:start;flex-wrap:wrap;gap:13px}.footer-inner>div{width:100%;gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Simplified one-page portfolio: no hero secondary column or decorative numbering. */
.hero{border-bottom:1px solid var(--line)}
.hero-grid{grid-template-columns:minmax(0,1fr);align-items:start;padding-top:clamp(40px,5.5vw,76px);padding-bottom:clamp(54px,6vw,90px)}
.hero h1{max-width:1000px}
.experience{padding-top:clamp(52px,6vw,89px)}
.experience-item{grid-template-columns:minmax(0,1fr) 28px;gap:20px}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:600px){.hero-grid{padding-top:35px;padding-bottom:56px}.experience-item{grid-template-columns:minmax(0,1fr) 18px;gap:10px}}

/* Wide-format hero and stripped-down experience transition. */
.hero h1{max-width:none;width:100%;}
@media(min-width:821px){.hero h1{font-size:clamp(74px,9.1vw,134px)}}
.hero-title-primary{display:block;}
.hero h1 em{display:block;}
.experience{padding-top:clamp(44px,4.7vw,70px);}
.experience-layout{margin-top:0;}
@media (max-width:820px){
  .hero h1{max-width:none;}
  .hero-title-primary{display:block;}
}

/* Skills and knowledge: editorial index, not a card grid. */
.capabilities{padding-top:clamp(64px,6.6vw,98px);padding-bottom:clamp(74px,7.4vw,112px);border-top:1px solid var(--line)}
.capabilities-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(210px,.55fr);align-items:end;gap:clamp(28px,6vw,90px);padding-bottom:clamp(32px,3.8vw,56px)}
.capabilities-heading h2{font-size:clamp(49px,6.3vw,93px);line-height:1.04;letter-spacing:-.075em;max-width:900px}
.capabilities-heading h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.06em}
.capabilities-heading>p{font-size:15px;line-height:1.7;color:#586159;max-width:320px}
.skills-index{border-top:1px solid var(--line)}
.skill-row{display:grid;grid-template-columns:minmax(210px,.38fr) minmax(0,1fr);gap:clamp(24px,4vw,68px);border-bottom:1px solid var(--line);padding:25px 0 28px;align-items:start}
.skill-row h3{font-size:clamp(23px,2.25vw,31px);font-weight:600;line-height:1.12;letter-spacing:-.06em}
.skill-row ul{list-style:none;padding:2px 0 0;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:8px}
.skill-row li{font-size:14px;line-height:1.5;color:#505a53;white-space:normal}
.skill-row li:not(:last-child)::after{content:'·';color:var(--accent);font-weight:700;margin-left:14px}
@media(max-width:820px){.capabilities-heading{grid-template-columns:1fr;gap:16px}.capabilities-heading>p{max-width:560px}.skill-row{grid-template-columns:minmax(150px,.38fr) minmax(0,1fr);gap:20px}}
@media(max-width:600px){.capabilities{padding-top:58px;padding-bottom:71px}.capabilities-heading{padding-bottom:27px}.capabilities-heading h2{font-size:clamp(45px,10.5vw,63px)}.capabilities-heading>p{font-size:14px}.skill-row{grid-template-columns:1fr;gap:10px;padding:22px 0}.skill-row h3{font-size:23px}.skill-row ul{column-gap:11px;row-gap:7px}.skill-row li{font-size:13px}.skill-row li:not(:last-child)::after{margin-left:11px}}