/* Layout: a fabric-scrap zine. Section titles are ransom-note tiles cut from the logo;
   everything between them stays quiet on limewash cream so the quilts do the talking. */
:root{
  /* Brand palette, taken straight from the logo files */
  --cream:#F1EBDF;      /* limewash cream: page ground */
  --scrap:#FAF6EE;      /* lighter scrap for cards */
  --ink:#4A2436;        /* cherry charcoal: text */
  --muted:#6E5A62;
  --sienna:#A14B34;     /* clay brick sienna */
  --blue:#1B3F8D;       /* luminous blue */
  --greyblue:#8C9DAF;
  --meadow:#6E8B67;     /* meadowland green */
  --olive:#5A5C2E;
  --on-tile:#F1EBDF;    /* text on a colored tile, both themes */
  --line:#4A243633;
  --shadow:#4A24361f;
  --f-display:"Archivo","Arial Black",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-type:"Special Elite","Courier New",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --cream:#1E1619;--scrap:#2A2024;--ink:#F1EBDF;--muted:#C2B3B8;
  --sienna:#D2724F;--blue:#7E9DE0;--greyblue:#A9B7C6;--meadow:#94B08C;--olive:#A7AA6A;
  --on-tile:#1E1619;--line:#F1EBDF2e;--shadow:#00000066;color-scheme:dark}}
:root[data-theme="dark"]{
  --cream:#1E1619;--scrap:#2A2024;--ink:#F1EBDF;--muted:#C2B3B8;
  --sienna:#D2724F;--blue:#7E9DE0;--greyblue:#A9B7C6;--meadow:#94B08C;--olive:#A7AA6A;
  --on-tile:#1E1619;--line:#F1EBDF2e;--shadow:#00000066;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  padding-inline:clamp(16px,4vw,48px);padding-block:0 56px}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px dashed var(--sienna);outline-offset:3px}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.1}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(72px,10vw,120px)}
section{display:flex;flex-direction:column;gap:36px;scroll-margin-top:24px}
.typed{font-family:var(--f-type);font-size:14px;letter-spacing:.06em;color:var(--muted)}

/* ---------- nav ---------- */
nav{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;
  padding-block:18px;border-bottom:2px dashed var(--line)}
.mark{font-family:var(--f-display);font-weight:900;font-size:15px;letter-spacing:.04em;text-decoration:none;display:flex;gap:6px;align-items:center}
.mark i{font-family:var(--f-serif);font-weight:800;font-size:17px;color:var(--sienna)}
nav ul{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0;font-family:var(--f-type);font-size:15px}
nav ul a{text-decoration:none;display:inline-block;padding-block:10px}
nav ul a:hover{color:var(--sienna);text-decoration:underline wavy}
nav .join{color:var(--sienna)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding-top:clamp(28px,6vw,64px)}
.logo-scrap img{width:100%;height:auto}
.logo-scrap{background:#F1EBDF;margin:0;padding:clamp(16px,3vw,32px);box-shadow:5px 7px 0 var(--shadow);transform:rotate(-1deg);
  outline:2px dashed #4A243655;outline-offset:-10px}
.call{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-type);font-size:15px;color:var(--sienna)}
.call svg{width:22px;height:22px;flex:none;transform-origin:50% 60%}
@media (prefers-reduced-motion:no-preference){.call svg{animation:ring 2.4s ease-in-out 1s 3}}
@keyframes ring{0%,40%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-14deg)}10%,20%,30%{transform:rotate(14deg)}}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero-copy .lede{font-size:clamp(19px,2.1vw,22px);line-height:1.45;max-width:32ch}
.hero-copy .aside{color:var(--muted);max-width:40ch}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;font-family:var(--f-display);font-weight:700;font-size:15px;
  text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:var(--cream);cursor:pointer;transition:transform .15s}
.btn.alt{background:transparent;color:var(--ink);border-style:dashed}
.btn:hover{transform:rotate(-1.5deg) translateY(-2px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- ransom-tile section titles ---------- */
.head{display:flex;flex-direction:column;gap:14px;max-width:64ch}
.head h2{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,4.6vw,50px);text-transform:uppercase;letter-spacing:-.005em;
  display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.t{display:inline-block;padding:.12em .32em .1em;box-shadow:3px 4px 0 var(--shadow);outline:2px dashed currentColor;outline-offset:-7px}
.t.s{background:var(--sienna);color:var(--on-tile);transform:rotate(-2deg)}
.t.b{background:var(--blue);color:var(--on-tile);transform:rotate(1.5deg)}
.t.g{background:var(--meadow);color:var(--on-tile);transform:rotate(-1deg)}
.t.o{background:var(--olive);color:var(--on-tile);transform:rotate(2deg)}
.t.gb{background:var(--greyblue);color:var(--on-tile);transform:rotate(-1.5deg)}
.t.x{outline:2px solid var(--ink);outline-offset:0;box-shadow:none;transform:rotate(1deg)}
.sm{font-family:var(--f-serif);font-style:italic;font-weight:800;text-transform:none;font-size:.72em;color:var(--blue)}
.head p{color:var(--muted)}

/* fabric swatches stand in for photos until real ones go in assets/photos */
.ph{position:relative;border:10px solid var(--scrap);box-shadow:4px 6px 0 var(--shadow);max-width:100%}
.ph span{position:absolute;left:10px;bottom:10px;font-family:var(--f-type);font-size:12px;background:var(--scrap);color:var(--ink);padding:2px 8px}
.ridges{background:
  linear-gradient(172deg,transparent 62%,#4A6B45 62.4%),
  linear-gradient(190deg,transparent 52%,#6E8B67 52.4%),
  linear-gradient(166deg,transparent 42%,#3F5F86 42.4%),
  linear-gradient(196deg,transparent 33%,#8C9DAF 33.4%),#D8E0E8}
.tarot{background:radial-gradient(circle at 50% 38%,#E9C46A 0 14%,transparent 15%),
  repeating-linear-gradient(0deg,#ffffff14 0 2px,transparent 2px 6px),linear-gradient(#1B3F8D,#4A2436)}
.greenman{background:radial-gradient(ellipse at 50% 45%,#94B08C 0 22%,transparent 23%),
  repeating-radial-gradient(circle at 50% 45%,#5A5C2E 0 8px,#6E8B67 8px 16px)}
.denim{background:repeating-linear-gradient(45deg,#3E5672 0 3px,#4D6888 3px 6px)}
.shadowbox{background:linear-gradient(#0000 0 0) padding-box,
  linear-gradient(175deg,transparent 58%,#A14B34 58.4%),linear-gradient(188deg,transparent 46%,#C98A5B 46.4%),#E9DCC4;
  border-color:#3a2a22!important}
.runner{background:repeating-linear-gradient(90deg,#A14B34 0 18px,#F1EBDF 18px 24px,#1B3F8D 24px 42px,#F1EBDF 42px 48px,#6E8B67 48px 60px,#F1EBDF 60px 66px)}
.placemat{background:repeating-conic-gradient(#8C9DAF 0 25%,#F1EBDF 0 50%) 0 0/30px 30px}
.shibori{background:repeating-radial-gradient(circle at 30% 40%,#1B3F8D 0 6px,#5C7BB8 6px 9px,#DCE3F0 9px 13px)}

/* ---------- art ---------- */
.art{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.piece{display:flex;flex-direction:column;gap:12px;min-width:0}
.piece .ph{width:100%}
.piece h3{font-family:var(--f-display);font-weight:900;font-size:22px}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-type);font-size:14px;color:var(--muted)}
.price{font-variant-numeric:tabular-nums;color:var(--sienna);font-weight:700}
.p1{grid-column:span 5}.p1 .ph{aspect-ratio:4/5}
.p2{grid-column:span 7}.p2 .ph{aspect-ratio:4/3}
.p3{grid-column:span 4}.p3 .ph{aspect-ratio:3/4}
.p4{grid-column:span 4}.p4 .ph{aspect-ratio:33/35}
.p5{grid-column:span 4}.p5 .ph{aspect-ratio:1}
@media (max-width:820px){.p1,.p2{grid-column:span 12}.p3,.p4,.p5{grid-column:span 6}.p5{grid-column:span 12}}
@media (max-width:520px){.p3,.p4{grid-column:span 12}}

/* ---------- process ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:3px solid var(--olive);counter-increment:s;min-width:0}
.steps li:nth-child(2){border-color:var(--blue)}
.steps li:nth-child(3){border-color:var(--sienna)}
.steps li:nth-child(4){border-color:var(--meadow)}
.steps li::before{content:"Step " counter(s);font-family:var(--f-type);font-size:14px;color:var(--muted)}
.steps h3{font-family:var(--f-display);font-weight:900;font-size:21px}
.steps p{font-size:16px}
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.method{background:var(--scrap);border:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.method h3{font-family:var(--f-type);font-weight:400;font-size:17px;letter-spacing:.08em;color:var(--sienna)}

/* found footage: video and reel links */
.tapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.tape{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--ink);color:var(--cream);padding:18px 18px 20px;position:relative;
  box-shadow:4px 6px 0 var(--shadow);transition:transform .15s}
.tape:hover{transform:rotate(-1deg) translateY(-2px)}
.tape .label{background:#F1EBDF;color:#4A2436;font-family:var(--f-type);font-size:14px;padding:8px 10px;transform:rotate(-1deg);
  border-left:6px solid var(--sienna)}
.tape:nth-child(2) .label{border-color:var(--blue)}
.tape:nth-child(3) .label{border-color:var(--meadow)}
.tape:nth-child(4) .label{border-color:var(--olive)}
.tape p{font-size:15px;opacity:.85}
.tape .rec{font-family:var(--f-type);font-size:12px;letter-spacing:.1em;display:flex;align-items:center;gap:6px}
.tape .rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#D2724F}

/* ---------- manifesto ---------- */
.manifesto{background:var(--blue);color:var(--on-tile);padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);
  clip-path:polygon(0 2%,100% 0,99.5% 98%,0.5% 100%)}
.manifesto h2{font-family:var(--f-serif);font-style:italic;font-weight:800;font-size:clamp(32px,4.6vw,52px);line-height:1.05}
.manifesto .body{display:flex;flex-direction:column;gap:16px;max-width:60ch}
.manifesto .typed{color:inherit;opacity:.8}
.minutes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--f-type);font-size:15px}
.minutes li{display:flex;gap:10px}
.minutes li::before{content:"\2610";flex:none}
.minutes li.done::before{content:"\2611"}
@media (max-width:760px){.manifesto{grid-template-columns:1fr}}

/* ---------- shop ---------- */
.shop-feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px}
.feat{display:flex;flex-direction:column;gap:12px;min-width:0}
.feat .ph{aspect-ratio:16/9;width:100%}
.feat h3{font-family:var(--f-display);font-weight:900;font-size:24px}
.booth{background:var(--scrap);border:2px dashed var(--line);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.booth h3{font-family:var(--f-type);font-weight:400;font-size:18px;letter-spacing:.06em}
.tagrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:0 32px}
.tagrow div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted var(--line);font-size:16px}
.tagrow b{font-weight:500}
.tagrow span{font-variant-numeric:tabular-nums;color:var(--sienna);font-weight:700;white-space:nowrap}

/* ---------- journal ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.post{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;background:var(--scrap);border:1px solid var(--line);min-width:0}
.post h3{font-family:var(--f-display);font-weight:900;font-size:21px}
.post p{font-size:16px;color:var(--muted)}
.post a{font-family:var(--f-type);font-size:15px;color:var(--sienna);margin-top:auto}
.post.vault{background:var(--ink);color:var(--cream);border:0;transform:rotate(-.6deg)}
.post.vault p{color:inherit;opacity:.85}
.post.vault .typed{color:inherit;opacity:.75}
.post.vault a{color:#E9A07F}

/* ---------- find me ---------- */
.fairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.fair{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:20px;border:2px dashed var(--line);background:var(--scrap)}
.date{font-family:var(--f-display);font-weight:900;text-align:center;line-height:1;background:var(--ink);color:var(--cream);padding:10px 12px;min-width:72px}
.date b{display:block;font-size:28px;font-variant-numeric:tabular-nums}
.date small{font-family:var(--f-type);font-weight:400;font-size:12px;letter-spacing:.1em}
.fair h3{font-family:var(--f-display);font-weight:900;font-size:18px;line-height:1.25}
.fair p{font-size:15px;color:var(--muted)}

/* ---------- join ---------- */
.join-box{background:var(--sienna);color:var(--on-tile);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);
  clip-path:polygon(0 0,99.5% 2%,100% 100%,0.5% 97%)}
.join-box h2{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,4.4vw,48px);text-transform:uppercase}
.join-box .typed{color:inherit;opacity:.85}
.join-box ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.join-copy{display:flex;flex-direction:column;gap:16px;max-width:52ch}
form{display:flex;flex-direction:column;gap:12px;align-self:center;min-width:0}
label{font-family:var(--f-type);font-size:14px;letter-spacing:.06em}
input{font:inherit;font-size:17px;min-height:50px;padding:0 14px;border:2px solid var(--on-tile);background:var(--cream);color:var(--ink);width:100%}
form .btn{background:var(--ink);border-color:var(--ink);color:var(--cream);justify-content:center}
.fine{font-size:14px;opacity:.85}
.status{font-family:var(--f-type);font-size:15px;min-height:1.4em}
@media (max-width:760px){.join-box{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}

footer{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;border-top:2px dashed var(--line);padding-top:22px;font-family:var(--f-type);font-size:14px;color:var(--muted)}
footer ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}

/* ---------- stitch library + freebie ---------- */
.lib{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.lib a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--scrap);border:1px solid var(--line);text-decoration:none;height:100%;transition:transform .15s}
.lib a:hover{transform:rotate(-1deg);border-color:var(--sienna)}
.lib b{font-family:var(--f-display);font-weight:900;font-size:17px;line-height:1.2}
.lib span{font-family:var(--f-type);font-size:13px;color:var(--muted)}
.freebie{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 28px;align-items:center;padding:clamp(18px,3vw,28px);border:2px dashed var(--sienna);background:var(--scrap)}
.freebie h3{font-family:var(--f-display);font-weight:900;font-size:24px}
.freebie p:not(.typed){max-width:56ch}
.bm{display:flex;gap:6px}
.bm i{display:block;width:26px;height:78px;outline:2px dashed #F1EBDF;outline-offset:-4px;
  background:linear-gradient(172deg,transparent 40%,#6E8B67 40.5%),linear-gradient(190deg,transparent 58%,#5A5C2E 58.5%),linear-gradient(165deg,transparent 28%,#8C9DAF 28.5%),#1B3F8D}
.bm i:nth-child(2){transform:rotate(4deg)}.bm i:nth-child(3){transform:rotate(-3deg)}
@media (max-width:700px){.freebie{grid-template-columns:1fr}}

/* ---------- real photos ---------- */
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .badge{position:absolute;top:10px;right:10px;left:auto;bottom:auto;font-family:var(--f-type);font-size:13px;letter-spacing:.06em;padding:3px 10px;transform:rotate(2deg)}
.ph .badge.sold{background:#4A2436;color:#F1EBDF}
.ph .badge.avail{background:#A14B34;color:#F1EBDF}
.pw{grid-column:span 12}.pw .ph{aspect-ratio:16/9}
.ph2{grid-column:span 6}.ph2 .ph{aspect-ratio:3/4}
.p3w{grid-column:span 4}.p3w .ph{aspect-ratio:6/7}
@media (max-width:820px){.ph2{grid-column:span 6}.p3w{grid-column:span 6}}
@media (max-width:520px){.ph2,.p3w{grid-column:span 12}}
.more-work{color:var(--muted);font-size:16px}
.view{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.view img{width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:4px 6px 0 var(--shadow)}
.view > div{display:flex;flex-direction:column;gap:12px;max-width:52ch}
.view h3{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,3vw,32px)}
@media (max-width:760px){.view{grid-template-columns:1fr}}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.pair figure{margin:0;display:flex;flex-direction:column;gap:8px}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover;border:10px solid var(--scrap);box-shadow:4px 6px 0 var(--shadow)}
.pair figcaption{font-family:var(--f-type);font-size:14px;color:var(--muted)}

.blankets{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,44px);align-items:center;background:var(--scrap);border:1px solid var(--line);padding:clamp(16px,3vw,28px)}
.blankets img{width:100%;aspect-ratio:1;object-fit:cover}
.blankets > div{display:flex;flex-direction:column;gap:10px;max-width:52ch}
.blankets h3{font-family:var(--f-display);font-weight:900;font-size:24px}
@media (max-width:700px){.blankets{grid-template-columns:1fr}}

/* current page in the nav */
nav ul a[aria-current="page"]{color:var(--sienna);text-decoration:underline wavy}
main > section:first-child:not(.hero){padding-top:clamp(28px,5vw,48px)}
.hero{padding-top:clamp(4px,1.5vw,16px)}
.ph.fit{background:var(--scrap)}
.ph.fit img{object-fit:contain}