/* Sherwood Creative — fabric pages (heritage badge identity).
   Each section is its own cloth hanging from a purple woven binding under the header. Choosing a link drops the
   next cloth over the current one (cloth.js draws the moving cloth in WebGL, then hands over to this
   CSS, which is also the whole look without JavaScript, without WebGL and with reduced motion).
   Type scale (px): 12 · 14 · 16 · 20 · 27 · 40 · 64 · 80. Nothing smaller than 12. */

@font-face{font-family:Poppins;src:url(assets/fonts/poppins-regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-medium.woff) format('woff');font-weight:500;font-display:swap}

:root{
  --ivory:#f7f2e8;
  --paper:#fbf8f1;
  --ink:#171717;
  --text:#3b3540;
  --muted:#5f5864;
  --purple:#321461;
  --purple-soft:#5b3a92;
  --gold:#b58b38;
  --gold-text:#80612a;
  --gold-light:#e2c78a;
  --charcoal:#171717;
  --line:#ddd2bf;
  --seam:url('assets/textiles/purple-seam-tile.webp');
  --thread:url('assets/textiles/purple-thread.webp');
  --arrow:url('assets/icons/arrow-purple.svg');
  --serif:Georgia,'Times New Roman',serif;
  --tap:44px;
  --header:104px;  /* header height, rail excluded */
  --rail:10px;     /* the purple woven binding along the header's edge */
  --tile:420px;    /* cloth texture repeat: cloth.js draws the moving cloth at the same scale */
}

*{box-sizing:border-box}
html{background:var(--ivory);overflow-y:scroll;scroll-padding-top:calc(var(--header) + var(--rail))}   /* anchors land below the sticky header */
body{margin:0;background:var(--ivory);color:var(--text);font:400 16px/1.7 Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--purple-soft);outline-offset:4px}
[tabindex="-1"]:focus{outline:0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink)}
h1 em,h2 em{color:var(--purple)}
.wrap{max-width:1360px;width:calc(100% - 112px);margin-inline:auto}
.skip{position:absolute;top:-100px;left:12px;background:var(--ink);color:#fff;padding:12px 16px;z-index:40}
.skip:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.arrow{display:inline-block;width:.85em;height:.85em;flex:none;vertical-align:-.08em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.arrow.down{transform:rotate(135deg)}
.arrow.up{transform:rotate(-45deg)}
.arrow.back{transform:rotate(-135deg)}
.seam-top,.seam-bottom{position:relative}
.seam-top::before,.seam-bottom::after{content:'';position:absolute;left:0;right:0;height:6px;background:var(--seam) left center/auto 6px repeat-x;pointer-events:none}
.seam-top::before{top:-3px}
.seam-bottom::after{bottom:-3px}
.rule-top{border-top:1px solid var(--line)}
.rule-bottom{border-bottom:1px solid var(--line)}

/* ---------- header and the binding the cloths hang from ---------- */
/* a denser, darker linen than the pages */
.header{position:sticky;top:0;z-index:30;background:#d2c5ac url('assets/fabric/header-linen-tile.webp') 0 0/var(--tile)}
.header-in{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;flex:none}
.brand img,.brand.brand-full img{width:auto;height:84px}
.rail{height:var(--rail);background:#4b2a63 url('assets/fabric/purple-binding-tile.png') 0 0/512px 10px repeat-x}
nav{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--ink)}
nav a{display:inline-flex;align-items:center;min-height:var(--tap)}
nav a:hover{color:var(--purple-soft)}
nav a[aria-current=page]{color:var(--purple);background:url('assets/fabric/stitch-line-gold.png') left calc(50% + 15px)/150px 4px repeat-x}
/* couched-cord capsule: horizontal three-slice (caps 44 source px each side, middle repeats) */
.nav-contact{gap:10px;height:44px;padding:0 4px;border-style:solid;border-width:0 22px;border-image:url('assets/fabric/pill-outline.png') 0 44 fill / 0 22px round stretch;transition:color .15s}
.nav-contact:hover,nav a.nav-contact[aria-current=page]{border-image-source:url('assets/fabric/pill-filled.png');color:var(--ivory);background:none}
.menu-toggle{display:none}

/* ---------- shared type ---------- */
.eyebrow{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.6px;display:flex;align-items:center;gap:10px;margin:0 0 22px;color:var(--ink)}
.small-dot{width:10px;height:10px;background:url('assets/fabric/knot-gold.png') center/contain no-repeat;flex:none}   /* a gold French knot */
h1{font-size:clamp(44px,5.4vw,80px);letter-spacing:-2.6px;line-height:1.06;margin-bottom:24px}
h2{font-size:clamp(40px,4.6vw,64px);letter-spacing:-2.2px;line-height:1.08;margin-bottom:26px}
h3{font-size:27px;line-height:1.2;letter-spacing:-.5px;margin-bottom:0}
.lead{font-size:20px;line-height:1.6;color:var(--text)}
.text-link,.email-link,.download-link{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-size:14px;color:var(--ink);
  text-decoration:underline;text-decoration-color:#b58b38aa;text-underline-offset:7px;text-decoration-thickness:1px}
.text-link:hover,.email-link:hover,.download-link:hover{text-decoration-color:var(--gold);color:var(--purple)}
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;width:330px;max-width:100%;min-height:58px;padding:16px 34px;border:0;flex:none;
  background:transparent url('assets/textiles/embroidered-button.webp') center/100% 100% no-repeat;
  color:var(--ivory);font-size:14px;font-weight:500;letter-spacing:.3px;text-shadow:0 1px 1px #000;transition:transform .2s}
.button::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/textiles/embroidered-button-hover.webp') center/100% 100% no-repeat;opacity:0;transition:opacity .15s;pointer-events:none}   /* hover: the thread catches more light */
.button .arrow{color:#d9b25e}
.button:hover{transform:translateY(-1px)}
.button:hover::before{opacity:1}
.button:focus-visible{outline-offset:2px}
.button[disabled]{filter:saturate(.6);cursor:wait}

/* ---------- the cloths ---------- */
.page{position:relative;min-height:calc(100vh - var(--header) - var(--rail));background-position:0 0;background-size:var(--tile) var(--tile);background-repeat:repeat;
  box-shadow:0 16px 26px -14px rgba(30,22,10,.55)}
.js .page{display:none}
.js .page.is-current{display:block}
.js .page.is-measuring{display:block;position:fixed;left:0;right:0;top:calc(var(--header) + var(--rail));opacity:0;pointer-events:none;z-index:-1}
.cloth-black{background-color:#1a191d;background-image:url('assets/textiles/black-thread-tile.webp')}
.cloth-linen{background-color:#e5dbc7;background-image:url('assets/textiles/oat-linen-tile.webp')}
.cloth-purple{background-color:#311760;background-image:url('assets/textiles/purple-cloth-tile.webp')}
/* turned hems with a gold running stitch, top and bottom (cloth.js draws the same strips on the moving cloth) */
/* the cloth tucks straight under the purple binding at the top (no stitched hem there); the bottom is hemmed */
.page::after{content:'';position:absolute;left:0;right:0;height:36px;pointer-events:none;background-repeat:repeat-x;background-size:420px 36px;background-position:0 0;bottom:0;background-image:url('assets/fabric/hem-bottom.png')}
.page-in{padding:84px 0 104px}

/* dark cloths: black and purple */
.cloth-black,.cloth-purple{color:#ddd5c8}
.cloth-black :is(h1,h2,h3),.cloth-purple :is(h1,h2,h3){color:#fff9ec}
.cloth-black :is(h1,h2) em{color:#c8b0f4}
.cloth-purple :is(h1,h2) em{color:var(--gold-light)}
.cloth-black .eyebrow,.cloth-purple .eyebrow{color:var(--gold-light)}
.cloth-black .lead{color:#ddd5c8}
.cloth-black .text-link,.cloth-black .email-link,.cloth-purple .text-link{color:#fff9ec;text-decoration-color:#e2c78a}
.cloth-black .text-link:hover,.cloth-black .email-link:hover{color:var(--gold-light)}
.cloth-black :focus-visible,.cloth-purple :focus-visible{outline-color:var(--gold-light)}

/* ---------- home ---------- */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:calc(100vh - var(--header) - var(--rail));padding:40px 0 40px}
.home-logo{position:relative;width:min(640px,100%);max-width:100%;aspect-ratio:1300/469;margin:0 0 26px}
.home-logo img{width:100%}
.home .eyebrow{justify-content:center;margin-bottom:18px}
.home h1{max-width:900px}
.home .lead{max-width:640px;margin:0 0 30px}
.actions{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:center}
.principles{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin:40px 0 0;padding:0;font-size:14px;color:var(--ink)}
.principles li:not(:last-child)::after{content:'';display:inline-block;width:10px;height:10px;background:url('assets/fabric/knot-gold.png') center/contain no-repeat;margin:0 16px;vertical-align:middle}

/* ---------- what I do (linen) ---------- */
.split-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:40px}
.split-heading>p:last-child{max-width:380px;font-size:16px;color:var(--muted)}
.cloth-purple .split-heading>p:last-child{color:#ddd2ee}
.service-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* sewn-on cotton patches: nine-slice images, 48 source px slices shown as 24 CSS px borders, edges repeat */
.patch,.service-list details,.client:not(.soon),.about-art{border:24px solid transparent;border-image:url('assets/fabric/patch-ivory.png') 48 fill / 24px round;background:none}
.service-list details{padding:8px 8px 4px}
summary{display:flex;align-items:center;list-style:none;gap:16px;cursor:default}
summary::-webkit-details-marker{display:none}
.service-icon{width:44px;height:44px;flex:none}
.service-list h3{font-size:27px}
.plus{display:none;margin-left:auto;position:relative;width:20px;height:20px;flex:none;transition:transform .2s}
.plus::before,.plus::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--purple-soft);transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .plus{transform:rotate(45deg)}
.service-body{padding-top:16px;font-size:16px;color:var(--muted)}
.service-body p{margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 6px}
.tags span{font-size:12px;letter-spacing:.3px;color:var(--text)}
.tags span:not(:last-child)::after{content:'/';color:var(--gold);margin:0 10px}
.service-body a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);color:var(--ink);font-size:14px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}

/* ---------- work (purple) ---------- */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.client{display:flex;flex-direction:column;color:var(--text)}
.client-logo{height:190px;display:grid;place-items:center;padding:10px 14px 18px;background:url('assets/fabric/stitch-line-ink.png') left bottom/150px 4px repeat-x}
.client-logo img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.client-logo .logo-mote{width:220px}
.client-logo .logo-bbg{width:200px}
.client-logo .logo-moat{width:132px}
.client-logo .logo-boots{width:300px}
.client-text{padding:14px 4px 2px}
.client-text h3{color:var(--ink);font-size:20px;letter-spacing:-.2px}
.client-text p{font-size:14px;color:var(--muted);margin:6px 0 0}
.client.soon{grid-column:span 2;border:24px solid transparent;border-image:url('assets/fabric/patch-charcoal.png') 48 fill / 24px round;color:#e9e2d6;flex-direction:row;align-items:center;gap:30px;padding:10px 16px}
.soon-mark{width:124px;height:124px;flex:none}
.soon-mark img{width:100%}
.client.soon .eyebrow{color:var(--gold-light);margin-bottom:10px}
.client.soon h3{color:#fff9ec;font-size:27px}
.client.soon p{font-size:16px;color:#cfc6b8;margin:10px 0 0;max-width:440px}

/* ---------- the studio (linen) ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12%}
.about-art{min-height:470px;padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.about-art .eyebrow{color:var(--muted)}
.studio-label{display:grid;place-items:center;padding:10px 0}
.studio-label img{width:min(280px,74%)}
.about-art p{font-size:16px;margin:20px 0 0;color:var(--ink)}
.about-art small{display:block;color:var(--muted);font-size:14px}
.about-copy>p:not(.eyebrow){color:var(--muted)}
.about-copy .text-link{margin-top:6px}
.process{margin-top:90px;border:24px solid transparent;border-image:url('assets/fabric/patch-purple.png') 48 fill / 24px round;padding:34px 34px 38px;color:#f4eefb}
.process .eyebrow{color:var(--gold-light)}
.process h2{color:#fff9ec;font-size:clamp(34px,3.6vw,52px)}
.process h2 em{color:#d4c2f1}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-top:40px}
.steps article{background:url('assets/fabric/stitch-line-gold.png') left top/150px 4px repeat-x;padding-top:24px}
.steps article>span{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--gold-light)}
.steps h3{margin:18px 0 12px;color:#fff9ec}
.steps p{color:#e6ddf2;max-width:320px;margin:0}

/* ---------- let's talk (black) ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:12%}
.contact h2{font-size:clamp(56px,6vw,80px)}
.contact>div>p:not(.eyebrow){color:var(--muted);max-width:380px}
.reply-time{display:flex;align-items:center;gap:10px;font-size:14px!important;color:var(--ink)!important}
.email-link{font-size:16px;margin:4px 0 14px}
form{display:flex;flex-direction:column}
label{font-size:14px;margin:0 0 6px;color:var(--ink)}
/* recessed linen fields with a running-stitch underline (purple when selected) */
input,select,textarea{background:#ebe2d1 url('assets/textiles/oat-linen-tile.webp') 0 0/var(--tile);background-clip:padding-box;box-shadow:inset 0 1px 2px rgba(60,40,12,.12);color:var(--ink);border:10px solid transparent;border-image:url('assets/fabric/field.png') 20 / 10px round;border-radius:0;padding:4px 6px;margin-bottom:20px;width:100%;font-size:16px}
input::placeholder,textarea::placeholder{color:#6b6470;opacity:1}
input:focus,select:focus,textarea:focus{border-image-source:url('assets/fabric/field-focus.png')}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .button{align-self:flex-start;margin-top:4px}
.form-note{font-size:12px;margin:14px 0 6px;color:var(--muted)}
#form-status{font-size:14px;color:var(--ink)}
#form-status a{text-decoration:underline}

/* ---------- moving cloth canvases (added and removed by cloth.js) ---------- */
/* the logo patch being sewn on (patch.js) */
.patch-gl,.patch-fx{position:absolute;pointer-events:none;z-index:3}
.home-logo.is-sewing>img{visibility:hidden}
/* client patches placed on Work (flourishes.js): hidden while the cloth drops, then each settles onto the linen */
.is-unsewn .client{visibility:hidden}
@keyframes patch-settle{0%{opacity:0;transform:translateY(-16px) scale(1.04) rotate(var(--tilt,0deg));filter:drop-shadow(0 18px 14px rgba(40,28,10,.28))}
  18%{opacity:1}
  58%{transform:translateY(1px) scale(.994) rotate(0deg);filter:drop-shadow(0 2px 2px rgba(40,28,10,.18))}
  78%{transform:translateY(-1px) scale(1.003)}
  100%{opacity:1;transform:none;filter:none}}
.client.settle-in{animation:patch-settle .95s cubic-bezier(.3,.62,.3,1) both;animation-delay:var(--d,0ms)}
.cloth-stage{position:fixed;left:0;top:calc(var(--header) + var(--rail));width:100%;z-index:20;pointer-events:none}
.cloth-intro,.cloth-fx{position:absolute;left:0;top:0;width:100%;z-index:3;pointer-events:none}

/* ---------- footer ---------- */
/* the maker's label: a small woven label sewn on at both ends, with a personal sign-off beside it */
.maker{display:flex;align-items:center;flex-wrap:wrap;gap:20px 40px;padding:4px 0 34px}
.maker-label{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:11px 30px;
  background:#f4ecdb repeating-linear-gradient(0deg,rgba(90,64,24,.06) 0 1px,transparent 1px 3px);color:#3a1d6e;
  font:500 12px/1.3 Poppins,system-ui,sans-serif;letter-spacing:2.2px;text-transform:uppercase;
  border-top:1px solid #e3d6bd;border-bottom:1px solid #e3d6bd;box-shadow:0 2px 4px rgba(40,28,10,.14)}
.maker-label i{font-style:normal;color:var(--gold)}
.maker-label::before,.maker-label::after{content:'';position:absolute;top:4px;bottom:4px;width:0;border-left:2px dashed #b8862a}
.maker-label::before{left:10px}.maker-label::after{right:10px}
.maker-note{margin:0;max-width:520px;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--text)}
.maker-note p{margin:0}
.maker-sign{display:block;width:200px;height:auto;margin:10px 0 0 -6px}               /* handwritten "Chris" */
.maker-note .maker-name{margin-top:2px;font-family:Poppins,Arial,sans-serif;font-style:normal;font-size:14px;letter-spacing:.3px;color:var(--ink)}
footer{background:#f2ece1 url('assets/fabric/footer-canvas-tile.webp') 0 0/var(--tile);color:var(--muted);margin-top:0}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 0 36px}
.footer-top img{width:260px}
.footer-top>span{font-family:var(--serif);font-size:20px;color:var(--ink)}
.footer-top a{color:var(--ink)}
.footer-top a,.footer-bottom a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-size:14px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:16px 0 24px;font-size:12px;color:var(--muted);border-top:0!important;background:url('assets/fabric/stitch-line-ink.png') left top/150px 4px repeat-x}
.footer-bottom a{color:var(--ink);font-size:12px}
.footer-bottom a:hover,.footer-top a:hover{color:var(--purple)}
footer .arrow{color:var(--gold-text)}

/* ---------- identity page ---------- */
.brand-hero{padding-top:70px;padding-bottom:55px}
.brand-hero>p{max-width:640px;color:var(--muted)}
.logo-stage{padding:80px 8%;background:var(--ivory)}
.logo-stage img{max-width:720px;width:100%;margin:auto}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.swatches{display:flex;gap:10px}
.swatch{flex:1;height:150px;padding:13px;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #ddd3c3;line-height:1.5}
.swatch span{display:block;opacity:.85}
.type-sample{font-family:var(--serif);font-size:64px;line-height:1.1;margin:25px 0;color:var(--ink)}
.type-sample em{color:var(--purple)}
.brand-note{font-size:14px;color:var(--muted);max-width:660px}
.brand-section-title{padding-bottom:22px;margin-bottom:38px;border-bottom:1px solid var(--line)}
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.icon-card{border-top:1px solid var(--line);padding-top:26px}
.icon-card img{width:44px;height:44px;margin-bottom:16px}
.icon-card p{font-size:14px;color:var(--ink)}
.emblem-row{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;margin-top:50px}
.emblem-row img{width:180px}
.brand-elements{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:38px}
.brand-section{scroll-margin-top:30px}
/* brand-card and social mock-ups (identity page) */
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.mock{height:430px;position:relative}
.business{width:60%;aspect-ratio:1.55;position:absolute;padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 20px #1b181d1c}
.business.back{left:6%;top:4%;background:linear-gradient(#321461a0,#321461a0),var(--thread) center/cover;background-color:var(--purple);color:#fff9e8;transform:rotate(-7deg);justify-content:flex-start;gap:12px}
.business.back strong{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05;color:#fff9e8}
.mini-label{font-size:10px;letter-spacing:1px}
.business.front{right:5%;bottom:4%;background:var(--paper);transform:rotate(6deg)}
.business.front img{width:88%;margin:6% auto 0}
.business.front>span{font-size:11px;color:var(--ink);line-height:1.4}
.business.front small{font-size:10px;color:var(--muted)}
.social-scene{display:grid;place-items:center}
.social-art{background:var(--paper);width:74%;height:88%;padding:28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 20px #1b181d14}
.social-art .mini-label{color:var(--muted);line-height:1.8}
.social-art strong{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-2px;font-weight:400;color:var(--ink)}
.social-art strong em{color:var(--purple)}
.social-art>div{display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:11px;color:var(--text)}
.social-art .arrow{font-size:30px;color:var(--purple)}
.project-caption{display:flex;justify-content:space-between;gap:15px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.project-caption h3{font-size:27px}
.project-caption p{font-size:14px;color:var(--muted);margin:6px 0}
.project-caption .arrow{font-size:22px;color:var(--purple)}

/* ---------- responsive ---------- */
@media(min-width:761px) and (max-height:820px){.home{padding-top:26px}.home-logo{width:min(500px,100%);margin-bottom:18px}.home .lead{margin-bottom:22px}.principles{margin-top:28px}}
@media(min-width:1600px){.wrap{width:calc(100% - 160px)}}
@media(max-width:1100px){
  .wrap{width:calc(100% - 64px)}
  nav{gap:18px}
  .about{gap:7%}
  .client-grid{grid-template-columns:1fr 1fr}
  .client.soon{grid-column:1/-1}
  .steps{gap:30px}
  .mock{height:360px}.business{padding:18px}.business.back strong{font-size:30px}.social-art strong{font-size:39px}
}
@media(max-width:760px){
  :root{--header:84px}
  .wrap{width:calc(100% - 40px)}
  .header-in{position:relative}
  .brand img,.brand.brand-full img{height:64px}
  .menu-toggle{display:inline-flex;align-items:center;gap:12px;min-height:var(--tap);background:transparent;border:0;font-size:14px;padding:0;color:var(--ink)}
  .menu-toggle .plus{display:inline-block}
  .menu-toggle[aria-expanded=true] .plus{transform:rotate(45deg)}
  nav{display:none;position:absolute;top:calc(var(--header) + var(--rail));left:-20px;right:-20px;padding:14px 20px 22px;background:#d3c6ad;z-index:5;align-items:stretch;box-shadow:0 12px 20px #1b181d24}
  nav.open{display:flex;flex-direction:column;gap:4px}
  nav a{font-size:16px}
  .nav-contact{align-self:flex-start;margin-top:8px}
  .page-in{padding:56px 0 72px}
  .home{padding:34px 0 36px}
  .home-logo{margin-bottom:24px}
  .home .small-dot{display:none}
  .home h1{font-size:clamp(40px,10.5vw,56px);letter-spacing:-1.8px;line-height:1.1}
  .lead{font-size:18px}
  .actions{gap:8px 24px}
  .principles{flex-direction:column;gap:4px;margin-top:34px;font-size:12px}
  .principles li::after{display:none!important}
  .about,.contact,.brand-grid{grid-template-columns:1fr;gap:34px}
  h2{font-size:40px;letter-spacing:-1.6px}
  .service-list{grid-template-columns:1fr;gap:0;border:24px solid transparent;border-image:url('assets/fabric/patch-ivory.png') 48 fill / 24px round;padding:0 2px}
  .service-list details{border:0;border-image:none;padding:0;background:url('assets/fabric/stitch-line-ink.png') left bottom/150px 4px repeat-x}
  .service-list details:last-child{background:none}
  summary{cursor:pointer;min-height:76px;padding:12px 0}
  .service-icon{width:32px;height:32px}
  .service-list h3{font-size:22px}
  .plus{display:inline-block}
  .service-body{padding:0 0 22px 48px}
  .split-heading{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:28px}
  .client-grid{grid-template-columns:1fr;gap:16px}
  .client-logo{height:160px}
  .client.soon{flex-direction:column;align-items:flex-start;gap:18px;padding:8px 6px}
  .soon-mark{width:96px;height:96px}
  .about-art{min-height:380px;order:2}
  .process{margin-top:56px;padding:14px 4px 18px}
  .steps{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .steps p{max-width:100%}
  .contact h2{font-size:56px}
  .button{width:320px;padding:16px 26px}
  .footer-top{flex-wrap:wrap;padding:34px 0 20px;gap:12px 22px}
  .footer-top img{width:220px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:0}
  .maker{padding-bottom:26px}
  .maker-sign{width:165px}
  .maker-label{flex-direction:column;gap:2px;padding:10px 28px;letter-spacing:1.6px}
  .maker-label i{display:none}
  .brand-hero{padding:46px 0 35px}
  .logo-stage{padding:40px 6%}
  .swatches{flex-wrap:wrap}.swatch{min-width:40%;height:120px}
  .icon-grid{grid-template-columns:1fr 1fr}
  .type-sample{font-size:48px}
  .emblem-row{grid-template-columns:1fr;gap:20px}.emblem-row img{width:150px}
  .showcase-grid{grid-template-columns:1fr;gap:40px}
  .mock{height:380px}.business{width:68%;max-width:350px;padding:20px}.business.back strong{font-size:32px}
  .social-art{width:78%;max-width:320px}.social-art strong{font-size:42px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .home-logo>img{visibility:visible!important}
  .is-unsewn .client{visibility:visible}
}
@media(forced-colors:active){.button{background:ButtonFace;color:ButtonText;border:1px solid ButtonText;text-shadow:none}.arrow{background:CanvasText}}

/* ---------- holding page ---------- */
.holding .nav-contact{display:inline-flex;align-items:center;min-height:var(--tap);font-size:14px;color:var(--ink);white-space:nowrap}
.holding .brand img{height:84px}
.hold-clients{width:100%;max-width:980px;margin-top:56px}
.hold-clients .eyebrow{justify-content:center;margin-bottom:18px}
/* current clients: one ivory panel with a purple woven binding, logos in a 2 by 2 grid */
.hold-clients ul.client-portfolio{list-style:none;margin:0 auto}
.client-portfolio{box-sizing:border-box;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,48px);
 padding:clamp(54px,6vw,76px) clamp(50px,6vw,80px);width:100%;max-width:920px;margin-inline:auto}               /* clear of the 32px binding */
.client-portfolio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:32px solid transparent;
 border-image:url('assets/portfolio/bound-panel.webp') 64 / 32px / 0 round;background:#e8decd url('assets/portfolio/canvas-tile.webp') 0 0/128px 128px repeat;background-origin:padding-box;background-clip:padding-box}   /* the same canvas as the binding's inner edge, so it reads as one patch */
.client-portfolio>.client-logo{display:flex;align-items:center;justify-content:center;min-width:0;height:auto;min-height:130px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;filter:none}
.client-portfolio>.client-logo::before,.client-portfolio>.client-logo::after{content:none}
.client-portfolio .client-logo img{display:block;height:auto;max-width:100%;max-height:130px;object-fit:contain}
.client-portfolio .logo-mote{width:250px}.client-portfolio .logo-moat{width:130px}.client-portfolio .logo-boots{width:300px}.client-portfolio .logo-bbg{width:220px}
.client-logo:focus-visible{outline:2px solid #321461;outline-offset:6px}
.holding footer .footer-bottom{padding:22px 0 26px}
@media(max-width:760px){
  .holding .brand img{height:64px}
  .hold-clients{margin-top:40px}
}
.hold-clients h2.eyebrow{font-family:inherit;font-weight:500;color:var(--ink)}


.hold-clients h2.eyebrow{font-family:inherit;font-weight:500;color:var(--ink)}
.holding .maker{padding-top:26px}
@media(max-width:480px){
  .client-portfolio{gap:22px 18px;padding:50px 44px}
  .client-portfolio>.client-logo{min-height:84px}
  .client-portfolio .client-logo img{max-height:100px}
  .client-portfolio .logo-moat{width:92px}
}
@media(max-width:400px){
  .holding .header-in{gap:14px}
  .holding .brand img{height:54px}
}

/* the sewing intro canvas reaches a few px past the logo for its shadow: never let it cause sideways scroll */
main{overflow-x:clip}
@media(max-width:340px){.holding .brand img{height:48px}}