/*
Theme Name: Keeps Company
Theme URI: https://example.com/keeps-company
Author: Keeps Company
Description: Custom theme for Keeps Company, with a live embroidery personalizer, design requests in the dashboard and market dates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keeps-company
*/

/* Layout concept: a hang tag on a market stall. Tag shapes, cord, scalloped trim and satin stitch carry every page. */
:root{
  --oxblood:#641F32; --pink:#F1D4D9; --cream:#FFF8EC; --cherry:#CB393B;
  --blush:#F9E8E6; --brass:#B08A4E; --ink:#3A1420;
  --display:"Gloock","Playfair Display",Georgia,serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --logo:url(assets/img/logo.png);
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 1.125rem/1.55 var(--body);overflow-x:clip}
h1,h2,h3,p{margin:0}
h2{font:400 clamp(2.25rem,6vw,4rem)/1.05 var(--display);color:var(--oxblood);text-wrap:balance}
h3{font:400 1.5rem/1.15 var(--display);color:var(--oxblood)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cherry);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1180px;margin-inline:auto}
.band{padding-left:var(--gut-l);padding-right:var(--gut-r)}
.label{font-size:.8125rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.lede{font-size:1.25rem;max-width:34em}
.wm{display:block;aspect-ratio:1689/838;background:currentColor;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.6em 1.5em;border:0;
  background:var(--oxblood);color:var(--cream);font:500 1.0625rem var(--body);text-decoration:none;cursor:pointer;
  outline:1px dashed color-mix(in srgb,var(--cream) 65%,transparent);outline-offset:-5px;transition:background .15s}
.btn:hover{background:var(--cherry)}
.btn:focus-visible{outline:3px solid var(--cherry);outline-offset:3px}

/* scalloped trim, as on the booth table */
.scallop{height:14px;background-repeat:repeat-x;background-size:28px 14px}
.scallop.pink-down{background-image:radial-gradient(circle at 14px 0,var(--pink) 13.5px,transparent 14px)}
.scallop.ox-up{background-image:radial-gradient(circle at 14px 14px,var(--oxblood) 13.5px,transparent 14px)}
.scallop.ox-down{background-image:radial-gradient(circle at 14px 0,var(--oxblood) 13.5px,transparent 14px)}
.scallop.pink-up{background-image:radial-gradient(circle at 14px 14px,var(--pink) 13.5px,transparent 14px)}

/* nav */
.top{background:var(--pink);color:var(--oxblood)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.nav .wm{width:92px}
.nav .menu{display:flex;gap:clamp(14px,3vw,32px);margin:0;padding:0;list-style:none}
.nav .menu a{text-decoration:none;font-size:1.0625rem;border-bottom:1px dashed transparent}
.nav .menu a:hover{border-color:currentColor}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(20px,4vw,48px) clamp(40px,6vw,72px)}
.hero-copy{display:grid;gap:22px;justify-items:start;min-width:0;color:var(--oxblood)}
.hero-copy h1{width:100%;max-width:520px}
.hero-copy .tag-line{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2}
.hero-copy p{color:var(--ink)}
.hanging{position:relative;transform:rotate(1.6deg);transform-origin:7% 0;min-width:0;filter:drop-shadow(0 16px 20px rgba(100,31,50,.28))}
.hanging .card{background:var(--cream);padding:10px;
  clip-path:polygon(7% 0,93% 0,100% 10%,100% 97%,99% 100%,1% 100%,0 97%,0 10%)}
.hanging img{display:block;width:100%;height:auto;
  clip-path:polygon(6.8% 0,93.2% 0,100% 10%,100% 100%,0 100%,0 10%)}
.eyelet{position:absolute;left:5.5%;top:5.5%;width:30px;height:30px;border-radius:50%;background:var(--pink);border:6px solid var(--brass);z-index:2}
.cord{position:absolute;left:0;bottom:calc(100% - 9%);width:30%;height:auto;overflow:visible;z-index:3;pointer-events:none}
.cord path{fill:none;stroke:var(--oxblood);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;animation:draw 1.5s ease-out both}
@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}

/* pieces */
.section{padding-block:clamp(56px,8vw,96px)}
.head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.head .label{color:var(--cherry)}
.pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.piece{position:relative;display:grid;align-content:start;gap:6px;padding:30px 18px 20px;background:var(--blush);color:inherit;text-decoration:none;
  clip-path:polygon(12% 0,88% 0,100% 8%,100% 100%,0 100%,0 8%);transition:background .15s,transform .15s}
.piece::before{content:"";position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 3px var(--brass)}
.piece:hover{background:var(--pink);transform:translateY(-3px)}
.piece svg{display:block;width:100%;height:auto}
.piece p{font-size:1.0625rem;line-height:1.35}
.piece .go{color:var(--cherry);font-weight:500;margin-top:6px}

/* personalizer */
.maker-band{background:var(--pink)}
.maker{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,48px);align-items:start}
.stage{background-color:var(--blush);position:sticky;top:16px;min-width:0;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--oxblood) 16%,transparent) 1.6px,transparent 2px);background-size:22px 22px}
.stage svg{display:block;width:100%;height:auto}
.controls{display:grid;gap:22px;min-width:0}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
legend{padding:0 0 8px;color:var(--oxblood)}
label.field{display:grid;gap:8px;color:var(--oxblood)}
input[type=text]{width:100%;min-height:50px;padding:.4em .7em;border:1px solid var(--oxblood);background:var(--cream);color:var(--ink);font:400 1.25rem var(--body);border-radius:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt span{display:flex;align-items:center;justify-content:center;min-height:46px;min-width:46px;padding:.3em .9em;background:var(--cream);color:var(--oxblood);border:1px solid color-mix(in srgb,var(--oxblood) 40%,transparent);font-size:1.0625rem}
.opt input:checked+span{background:var(--oxblood);color:var(--cream);border-color:var(--oxblood)}
.opt input:focus-visible+span{outline:3px solid var(--cherry);outline-offset:2px}
.opt.font span{font-size:1.25rem;min-width:84px;line-height:1.1}
.opt.spool span{min-width:0;width:40px;height:46px;padding:0;background:var(--c);border:0;border-radius:3px;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 2px,rgba(0,0,0,.1) 2px 4px);box-shadow:inset 0 0 0 1px rgba(58,20,32,.25)}
.opt.spool input:checked+span{outline:3px solid var(--oxblood);outline-offset:2px;background-color:var(--c);box-shadow:inset 0 0 0 1px rgba(58,20,32,.25)}
.now{font-style:italic;color:var(--ink)}
.ticket{display:grid;gap:12px;background:var(--cream);padding:20px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.ticket output{display:block;font-size:1.125rem;color:var(--oxblood)}
.ticket .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ticket small{font-size:1rem}

/* steps */
.steps-band{background:var(--oxblood);color:var(--cream)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,44px);margin-block:0;padding:clamp(44px,6vw,68px) 0;list-style:none}
.steps b{display:block;font:400 clamp(1.875rem,4vw,2.75rem)/1.1 var(--display);color:var(--pink);margin-bottom:8px}
.steps li:not(:last-child) b::after{content:" \2192";color:var(--cream)}

/* details */
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:start}
.mosaic figure{margin:0;min-width:0}
.mosaic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mosaic figcaption{padding-top:10px;font-size:1.0625rem}

/* market */
.market{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding-block:clamp(44px,6vw,72px)}
.market h2{margin-bottom:10px}

/* footer */
.site-foot{background:var(--oxblood);color:var(--cream)}

@media (max-width:860px){
  .hero,.maker{grid-template-columns:minmax(0,1fr)}
  .stage{top:0;z-index:5;box-shadow:0 6px 12px rgba(100,31,50,.18)}
  .stage svg{max-height:36vh;margin-inline:auto}
  .hanging{margin-top:44px}
  .pieces{grid-template-columns:minmax(0,1fr)}.piece svg{max-width:280px;margin-inline:auto}
  .steps{grid-template-columns:minmax(0,1fr)}
  .mosaic{grid-template-columns:minmax(0,1fr)}.mosaic img{aspect-ratio:4/3}
  .market{grid-template-columns:minmax(0,1fr)}
  .market .btn{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cord path{animation:none}
  .piece,.btn{transition:none}
}

/* ---- site-wide additions ---- */
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--cream);color:var(--oxblood);padding:10px 16px}
.skip:focus{left:8px;top:8px}
.brand{display:block}
.nav-toggle{display:none;min-height:44px;padding:0 14px;background:transparent;border:1px solid var(--oxblood);color:var(--oxblood);font:500 1rem var(--body);cursor:pointer}
.page-head{display:grid;gap:8px;padding-block:clamp(24px,5vw,56px) clamp(32px,5vw,60px);color:var(--oxblood)}
.page-head h1{font:400 clamp(2.75rem,8vw,5rem)/1 var(--display);text-wrap:balance}
.narrow{max-width:760px}
.prose{display:grid;gap:16px}
.prose h2{font-size:clamp(1.75rem,4vw,2.25rem);margin-top:16px}
.prose>:first-child{margin-top:0}
.preview{display:block}
.preview svg{display:block;width:100%;height:auto}
.price{color:var(--oxblood);font-weight:500}
.piece-rows{display:grid;gap:clamp(32px,5vw,56px)}
.piece-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,5vw,64px);align-items:center}
.piece-row>div{display:grid;gap:14px;justify-items:start}
.piece-row .preview{background:var(--blush)}
.notice{padding:14px 18px;margin-bottom:24px;font-size:1.125rem}
.notice.good{background:var(--pink);color:var(--oxblood)}
.notice.bad{background:var(--cherry);color:#fff}
.hp{position:absolute;left:-9999px}
.ticket{background:var(--blush)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
input[type=email],input[type=tel],input[type=number],input[type=date],textarea{width:100%;min-height:50px;padding:.4em .7em;border:1px solid var(--oxblood);background:var(--cream);color:var(--ink);font:400 1.125rem var(--body);border-radius:0}
.contact-form{display:grid;gap:16px;justify-items:start;margin-top:8px}
.contact-form .form-grid,.contact-form .field{width:100%}
.opt.spool span{font-size:0}
.markets{display:grid;gap:18px;margin:12px 0 0;padding:0;list-style:none}
.markets li{padding-bottom:14px;border-bottom:1px dashed color-mix(in srgb,var(--oxblood) 45%,transparent)}
.markets time{color:var(--cherry);font-weight:500}
.foot{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);gap:24px 48px;align-items:start;padding-block:44px}
.foot-brand{display:grid;gap:10px}
.foot-brand .wm{width:170px;color:var(--pink)}
.foot-brand p{font-size:1.25rem}
.foot-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 32px;margin:0;padding:0;list-style:none}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
.foot-contact{display:grid;gap:4px;font-style:normal}
.foot-legal{grid-column:1/-1}
@media (max-width:860px){
  .piece-row{grid-template-columns:minmax(0,1fr)}
  .piece-row .preview svg{max-width:280px;margin-inline:auto}
  .foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .js .nav-toggle{display:block}
  .nav{flex-wrap:wrap}
  .js .nav-menu{display:none;flex-basis:100%}
  .js .nav-menu.open{display:block}
  .nav .menu{flex-direction:column;gap:0;flex-wrap:wrap}
  .nav-menu:not(.open) .menu{flex-direction:row;gap:6px 16px}
  .nav .menu a{display:block;padding:10px 0}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}
.closing{display:grid;gap:18px;justify-items:start}