/* One editorial language from the first impression to the final conversation. */
.header {height:76px; justify-content:space-between;}
.header nav {gap:40px; font-size:13px;}
.header nav .nav-about {display:inline-flex;}
.hero {padding-top:80px; padding-bottom:90px; gap:75px;}
.hero h1 {font-size:clamp(96px,11.6vw,153px); letter-spacing:-.065em; margin-block:33px;}
.hero-role {font-size:clamp(25px,2.55vw,34px); font-weight:400; line-height:1.15; margin-bottom:22px;}
.hero-intro {font-size:15px; max-width:390px;}
.hero-copy > .eyebrow {font-size:10px;}
.hero-visual {padding:12px 10px 12px 20px; margin:0 12px 0 0;}
.hero-visual::before {content:''; position:absolute; inset:-12px -18px -12px 26px; border:1px solid #c8cbbd; transform:rotate(-3deg); pointer-events:none;}
.hero-visual::after {content:'01 / RECENT WORK'; position:absolute; right:-33px; top:50%; font:9px/1 'Courier New',monospace; letter-spacing:.13em; writing-mode:vertical-rl; color:#626956;}
.image-note {margin-bottom:20px; font-size:10px;}
.hero-picture {transform:rotate(2deg); box-shadow:0 18px 32px #1b1e1615;}
.hero-picture img {height:470px;}
.hero-picture figcaption {padding:15px; font-size:10px;}
.hero-sticker {left:-26px; bottom:60px; width:137px; height:137px; font-size:20px; transform:rotate(-7deg);}
.hero-copy .text-link {margin-top:4px;}
.proof {grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding-bottom:0;}
.proof-heading {grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; margin:0!important; padding-bottom:22px; color:#686e60; font:10px/1.5 'Courier New',monospace!important; letter-spacing:.12em;}
.proof-heading span {font-size:24px; line-height:1; color:var(--accent);}
.proof>div {padding:30px 30px 34px; border-top:1px solid #b7bbac; border-right:1px solid #d5d7cc; position:relative;}
.proof>div:nth-of-type(3n) {border-right:0;}
.proof>div:nth-of-type(3n+1) {padding-left:0;}
.proof>div:nth-of-type(3n) {padding-right:0;}
.proof-number {font-size:clamp(48px,5.3vw,70px); font-weight:500; letter-spacing:-.065em;}
.proof>div:first-of-type .proof-number {color:#b74126;}
.proof p:not(.proof-heading) {font-size:15px; line-height:1.4; margin-top:17px;}
.proof small {font-size:11px; line-height:1.65; max-width:290px;}

/* A typographic spread for a publication built around culture. */
.outlander {gap:0; padding-block:100px; grid-template-columns:1fr 1fr;}
.outlander-statement {background:#db542e; color:#201d17; padding:43px 40px 35px; display:flex; flex-direction:column; justify-content:space-between; min-height:550px; position:relative; overflow:hidden;}
.outlander-statement > .eyebrow {font-size:10px;}
.outlander h2 {font-size:clamp(42px,4.9vw,65px); line-height:1.02; letter-spacing:-.055em; margin:40px 0 75px; font-weight:500; text-wrap:balance;}
.outlander-signature {border-top:1px solid #542d2270; padding-top:20px; display:flex; flex-direction:column; gap:10px;}
.outlander-signature span:first-child {font:italic clamp(42px,5vw,66px)/1 Georgia,'Times New Roman',serif; letter-spacing:-.06em;}
.outlander-signature span:last-child {font:9px/1.5 'Courier New',monospace; text-transform:uppercase; letter-spacing:.13em;}
.outlander > div:last-child {padding:40px; background:#e7e5db;}
.outlander-company,.outlander-intro {font-size:14px; line-height:1.75; color:#4e5747;}
.outlander-intro {margin-top:20px;}
.outlander .company-source {margin-top:12px;}
.outlander .brand-label {font-size:9px; margin-block:28px 17px;}
.outlander .brand-roster {gap:0; border-top:1px solid #c4c7b8;}
.outlander .brand-roster > span {display:flex; align-items:center; justify-content:center; text-align:center; min-height:76px; border-bottom:1px solid #c4c7b8; font-size:16px; letter-spacing:-.03em; padding:14px 9px;}
.outlander .brand-roster > span:nth-child(odd) {border-right:1px solid #c4c7b8;}
.outlander .brand-roster .ugg {font-size:28px;}
.outlander .brand-roster .bottega {font-size:24px; line-height:1.15;}
.outlander .brand-roster .lv {font-size:13px;}

/* An open, readable biography and a continuous career line. */
.about-section {padding-block:100px; background:#e5e6dc; border-top:1px solid #d2d5c6;}
.about-grid {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:95px; align-items:start;}
.about-copy .eyebrow {color:#a43a21;}
.about-copy h2 {font-size:clamp(42px,4.7vw,61px); line-height:1.06; letter-spacing:-.055em; margin:27px 0 32px;}
.about-copy>p:not(.eyebrow) {font-size:15px; line-height:1.75; color:#505a47;}
.personal-note {border:0; padding:26px; margin:30px 0; background:#d5e5aa; gap:20px; align-items:center; transform:rotate(-1deg);}
.personal-note .note-arrow {font-size:42px; font-weight:400; line-height:1;}
.personal-note p {font-size:13px; line-height:1.65; color:#3a472b;}
.personal-note strong {display:block; font-size:18px; letter-spacing:-.025em; font-weight:600; margin-top:3px;}
.experience {padding-top:5px;}
.experience>.eyebrow {display:flex; justify-content:space-between; margin-bottom:26px; font-size:10px;}
.experience>.eyebrow span {color:#a43a21; font-size:20px;}
.experience-item {border:0; border-left:1px solid #b5beaa; padding:0 0 35px 29px; position:relative;}
.experience-item::before {content:''; position:absolute; top:3px; left:-5px; width:9px; height:9px; border:2px solid #a43a21; border-radius:50%; background:#e5e6dc;}
.experience-item:first-of-type::before {background:#a43a21; box-shadow:0 0 0 5px #a43a2110;}
.experience-item:last-of-type {padding-bottom:7px;}
.experience-date {font-size:10px; color:#5d6853;}
.experience-item h3 {font-size:30px; line-height:1.15; letter-spacing:-.045em; font-weight:500; margin:10px 0 9px;}
.experience-item p {font-size:13px; line-height:1.5; max-width:370px;}
.experience-item small {font-size:12px; line-height:1.7; max-width:350px; color:#637057;}
.experience .timeline-note {margin:26px 0 0 29px; font:10px/1.65 'Courier New',monospace; max-width:320px; color:#626f55;}

/* The closing invitation is a full-width final spread. */
.contact.wrap {max-width:none; padding:90px max(var(--gutter),calc((100% - 1232px)/2)) 65px; background:#20251e; color:var(--paper); position:relative;}
.contact .eyebrow {color:#c1cbb4; font-size:10px;}
.contact .status-dot {background:var(--lime);}
.contact-top {margin:35px 0 48px; gap:50px; align-items:center;}
.contact h2 {font-size:clamp(62px,8.4vw,112px); line-height:.99; letter-spacing:-.06em; font-weight:500; text-wrap:balance;}
.contact h2 span {color:var(--lime);}
.contact-arrow {width:118px; height:118px; min-width:118px; font-size:65px; border-color:#5e6c50; background:var(--lime); color:var(--ink); transition:transform .25s,background .25s;}
.contact-arrow:hover {transform:rotate(45deg); background:#f2f0e9; color:#20251e;}
.contact-bottom {border-top:1px solid #536247; padding-top:25px; gap:27px; flex-wrap:wrap;}
.contact .email-link {font-size:clamp(23px,2.8vw,37px); letter-spacing:-.04em; line-height:1.4;}
.contact .small-link {font-size:11px; color:#d3dcc8;}
.contact a:focus-visible,.contact button:focus-visible {outline-color:var(--lime);}
.footer.wrap {max-width:none; background:#20251e; color:#b1bca6; padding:24px max(var(--gutter),calc((100% - 1232px)/2)) 30px; border-color:#3b4832; gap:20px;}
.footer a:hover {color:var(--lime);}
.footer>p {max-width:900px; font-size:9px; line-height:1.7; color:#a1ad97; margin-top:2px;}
@media(hover:hover) {
 .hero-visual:hover .hero-picture {transform:rotate(0deg); box-shadow:0 22px 36px #1b1e1620;}
 .experience-item:hover::before {background:#a43a21;}
}
@media(max-width:1050px) {
 .hero {gap:45px; padding-block:65px 80px;}
 .hero h1 {font-size:clamp(88px,11.6vw,133px);}
 .hero-picture img {height:420px;}
 .hero-visual {margin-right:6px; padding-left:8px;}
 .hero-sticker {left:-15px; width:120px; height:120px; font-size:18px;}
 .outlander-statement,.outlander>div:last-child {padding:32px;}
 .outlander h2 {font-size:49px;}
 .about-grid {gap:55px;}
 .contact-bottom .email-link {flex-basis:100%;}
}
@media(max-width:750px) {
 html {scroll-padding-top:86px;}
 .header {height:68px; min-height:68px; display:flex; flex-wrap:nowrap; gap:20px; padding-block:0;}
 .header .monogram {font-size:30px;}
 .header nav {width:auto; order:0; justify-content:flex-end; gap:24px; font-size:12px; padding:0;}
 .header nav a {min-height:44px; padding-block:10px;}
 .hero {grid-template-columns:minmax(0,1fr); gap:45px; padding-top:46px; padding-bottom:55px;}
 .hero-copy>.eyebrow {font-size:9px; letter-spacing:.07em;}
 .hero h1 {font-size:clamp(88px,23vw,145px); line-height:.9; margin-block:29px;}
 .hero-role {font-size:28px; max-width:370px; margin-bottom:18px;}
 .hero-intro {font-size:15px; max-width:420px; margin-bottom:19px;}
 .hero-visual {max-width:460px; width:calc(100% - 22px); margin:0 auto 12px; padding:9px 9px 9px 14px;}
 .hero-visual::before {inset:-6px -6px -6px 16px;}
 .hero-visual::after {right:-18px; font-size:8px;}
 .image-note {font-size:9px; margin-bottom:17px;}
 .hero-picture img {height:clamp(350px,100vw,470px); object-position:center 16%;}
 .hero-picture figcaption {font-size:9px; padding:12px;}
 .hero-sticker {left:-11px; bottom:42px; width:118px; height:118px; font-size:18px;}
 .proof {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding-bottom:0;}
 .proof-heading {font-size:9px!important; padding-bottom:18px;}
 .proof>div,.proof>div:nth-of-type(3n),.proof>div:nth-of-type(3n+1) {display:block; padding:23px 17px 25px; border-top:1px solid #b7bbac; border-right:0;}
 .proof>div:nth-of-type(odd) {padding-left:0; border-right:1px solid #d5d7cc;}
 .proof>div:nth-of-type(even) {padding-right:0;}
 .proof-number {font-size:clamp(40px,11vw,55px);}
 .proof p:not(.proof-heading) {font-size:13px; line-height:1.4; margin-top:14px;}
 .proof small {font-size:10px; line-height:1.65; margin-top:10px;}
 .outlander {grid-template-columns:minmax(0,1fr); padding-block:55px;}
 .outlander-statement {min-height:390px; padding:30px 26px;}
 .outlander h2 {font-size:clamp(44px,11vw,65px); max-width:470px; margin:32px 0 55px;}
 .outlander-signature span:first-child {font-size:53px;}
 .outlander>div:last-child {padding:28px 25px;}
 .outlander-company,.outlander-intro {font-size:14px;}
 .outlander .brand-roster>span {font-size:13px; min-height:74px; padding-inline:8px;}
 .outlander .brand-roster .lv {font-size:11px;}
 .outlander .brand-roster .bottega {font-size:22px;}
 .about-section {padding-block:60px;}
 .about-grid {grid-template-columns:minmax(0,1fr); gap:48px;}
 .about-copy h2 {font-size:clamp(40px,10.5vw,58px); margin:25px 0;}
 .about-copy>p:not(.eyebrow) {font-size:14px; line-height:1.75;}
 .personal-note {padding:23px 20px; margin:27px 0;}
 .personal-note strong {font-size:17px;}
 .experience {padding-top:0;}
 .experience-item {padding-left:25px; padding-bottom:32px; margin-left:5px;}
 .experience-item h3 {font-size:29px;}
 .experience-item p {font-size:13px;}
 .experience-item small {max-width:330px;}
 .contact.wrap {padding-block:60px 38px;}
 .contact-top {margin:28px 0 34px; gap:22px; align-items:flex-end;}
 .contact h2 {font-size:clamp(41px,10vw,67px); letter-spacing:-.05em; line-height:1.04; text-wrap:initial;}
 .contact-arrow {width:54px; height:54px; min-width:54px; font-size:34px; margin-bottom:5px;}
 .contact .eyebrow {font-size:9px;}
 .contact-bottom {padding-top:23px; gap:14px 25px;}
 .contact .email-link {font-size:clamp(22px,6.25vw,35px); flex-basis:100%;}
 .contact .small-link {font-size:11px;}
 .footer.wrap {font-size:9px; gap:15px; padding-block:24px;}
 .footer>span:nth-child(2) {flex-basis:100%; order:2;}
 .footer>p {order:3; font-size:9px;}
}
@media(max-width:360px) {.header nav{gap:20px}.hero-copy>.eyebrow{font-size:8px}.hero h1{font-size:83px}.contact-top{gap:14px}.contact h2{font-size:37px}.contact-arrow{width:47px;height:47px;min-width:47px}.outlander-statement,.outlander>div:last-child{padding-inline:22px}}
@media(prefers-reduced-motion:reduce) {.hero-picture,.contact-arrow{transition:none}.hero-visual:hover .hero-picture{transform:rotate(2deg)}.contact-arrow:hover{transform:none}}
