/* Seema Atelier: WordPress-only additions on top of css/styles.css (which is kept
   byte-identical to the static site so the two never drift apart). */

/* Admin toolbar (logged-in users only): keep the fixed header below it */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* Contact form: honeypot (hidden from people, visible to naive bots) */
.hp-field{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Contact form: file upload */
.field input[type=file]{padding:11px 12px;font-size:14px;cursor:pointer}
.field input[type=file]::file-selector-button{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--plum);background:#fff;border:1px solid #fff;padding:10px 14px;margin-right:14px;cursor:pointer;transition:background-color .2s}
.field input[type=file]::file-selector-button:hover{background:var(--mauve)}
.field-hint{font-size:13px;line-height:1.5;color:#e2d9e4}
.field [aria-invalid=true]{border-color:#f4b4ac}
.field-error{font-size:13px;line-height:1.5;color:#ffd9d3}
.field-error:empty{display:none}

/* Contact form: result messages (success / error) */
.form-status{border-left:2px solid var(--mauve);padding-left:12px}
.form-status.is-success{border-left-color:#bfe3c4}
.form-status.is-error{border-left-color:#f4b4ac}
.form-status ul{list-style:disc;padding-left:20px;margin-top:4px}
.contact-form.is-sending .btn{opacity:.7;cursor:progress}

/* Comment form on single posts: WordPress prints cols="45" / size="30", which made the
   page 40px wider than a 390px phone screen */
.comment-respond textarea,.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url]{max-width:100%}

/* Plain pages (page.php, index.php, 404.php) */
.page-shell{padding:72px 0 96px}
.page-shell .wrap{max-width:820px}
.page-shell .page-title{font:300 clamp(2.2rem,1.4rem + 2.2vw,3.25rem)/1.12 var(--slab);letter-spacing:-.015em;margin:22px 0 34px}
.entry-content > * + *{margin-top:1.1em}
.entry-content h2{font:300 30px/1.25 var(--slab);margin-top:1.8em}
.entry-content h3{font:400 22px/1.3 var(--slab);margin-top:1.6em}
.entry-content a{border-bottom:1px solid var(--clay)}
.entry-content a:hover{color:var(--plum);border-color:var(--plum)}
.entry-content ul{list-style:disc;padding-left:1.4em}
.entry-content ol{list-style:decimal;padding-left:1.4em}
.entry-content img{height:auto}
.entry-content figure{margin-block:1.6em}
.entry-content figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.entry-content blockquote{border-left:2px solid var(--clay);padding-left:18px;font:300 20px/1.6 var(--slab)}
.post-list > li{border-top:1px solid var(--line);padding:28px 0}
.post-list h2{font:400 26px/1.3 var(--slab);margin-bottom:8px}
.post-list h2 a:hover{color:var(--plum)}
.post-list .cap{margin-bottom:10px}
.pagination{margin-top:40px;display:flex;gap:24px}
.page-shell .ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center}

/* 1.0.4: tap targets of at least 44px for the small text links (they were 16-20px tall on phones).
   The extra height is added on both sides of the text (text links: the underline is drawn by ::after
   where the border was; the hero email link: above it) and cancelled by negative margins (inline
   padding needs none), so nothing moves on the page. */
.tlink{position:relative;display:inline-flex;align-items:flex-end;min-height:44px;margin:-12px 0 -13px;padding-bottom:20px;border-bottom:0}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;background:var(--clay);transition:background-color .2s} /* the underline, same place as the old border */
.tlink:hover::after{background:var(--plum)}
@media (max-width:960px){.header-cta{display:none}} /* keep styles.css hiding the header link on tablets/phones */
.hero .meta a{padding-top:28px} /* inline link: vertical padding enlarges the tap area without moving the line or its underline */
.legal a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}

/* 1.0.4: no text below 12px on phones (small caps labels were 9.5-11px) */
@media (max-width:600px){
  .brand .wm span{font-size:12px;letter-spacing:.14em}
  .hero .meta b,.contact dt,.field label,.site-footer h2{font-size:12px}
  .placeholder span{font-size:12px}
  .field input[type=file]::file-selector-button{font-size:12px}
}
/* very narrow phones (below 360px): make room for the larger wordmark line so the menu button keeps 44px */
@media (max-width:359px){
  .header-inner{gap:12px}
  .brand{gap:10px}
  .brand .wm{padding-left:10px}
  .brand .wm span{letter-spacing:.1em}
  .brand img,.is-scrolled .brand img{height:38px}
  .nav-toggle{flex-shrink:0}
}

/* ---------- 1.0.5: more photos ---------- */
/* Rows of photos with one shared height, never cropped: each item grows by its aspect ratio (--ar).
   Phones: the row scrolls sideways at a fixed height (--mh). */
.jrow{display:flex;gap:16px;margin-top:40px}
.jrow > li{position:relative;flex:var(--ar) 1 0;min-width:0} /* relative: keeps the .sr-only caption gap inside the scrolling row on phones */
.jrow-ph{display:block;background:var(--linen);cursor:zoom-in;overflow:hidden}
.jrow-ph img{width:100%;height:auto;transition:transform .6s ease}
.jrow-ph:hover img{transform:scale(1.03)}
.jrow .cap{margin-top:10px}
.jrow .cap b{margin-right:6px}
@media (max-width:699px){
  .jrow{overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);padding-bottom:6px;scrollbar-width:thin}
  .jrow > li{flex:0 0 auto;width:calc(var(--mh) * var(--ar));scroll-snap-align:start}
  .jrow-ph img{height:var(--mh);width:auto;max-width:none}
}
.statement .st > div{min-width:0} /* let the photo row scroll instead of widening the grid on phones */
.statement .st-photos{margin-top:40px;max-width:960px}
.process .process-photos{margin-top:44px}
.process .process-photos .jrow-ph{background:#fff} /* the 3D drawing has a white background */

/* All projects: filter buttons + masonry columns (photos keep their own shape) */
.projects{padding:0 0 90px}
.projects .head{display:flex;justify-content:space-between;align-items:end;gap:20px 60px;margin-bottom:34px;border-top:1px solid var(--line);padding-top:54px}
.projects h2{font:300 clamp(2.1rem,1.4rem + 2vw,3rem)/1.1 var(--slab);letter-spacing:-.015em;margin-top:22px}
.projects .head > p{max-width:440px;color:var(--muted);font-size:15px;line-height:1.65}
.gal-filters{display:none;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.js .gal-filters{display:flex}
.gal-filters button{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;min-height:44px;padding:0 18px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.gal-filters button span{color:var(--muted);margin-left:6px;letter-spacing:.04em}
.gal-filters button:hover{border-color:var(--clay)}
.gal-filters button[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:#fff}
.gal-filters button[aria-pressed=true] span{color:var(--mauve)}
.gal-list{columns:3;column-gap:24px}
.gal-item{position:relative;break-inside:avoid;padding-bottom:26px}
.gal-item[hidden]{display:none}
.js .gal:not(.is-expanded):not(.is-filtered) .gal-item.is-extra{display:none}
.gal-ph{display:block;background:var(--linen);cursor:zoom-in;overflow:hidden}
.gal-ph img{width:100%;height:auto;transition:transform .6s ease}
.gal-ph:hover img{transform:scale(1.03)}
.gal-item .cap{margin-top:10px}
.gal-more-wrap{display:none;margin-top:10px;text-align:center}
.js .gal-more-wrap{display:block}
.js .gal.is-expanded .gal-more-wrap,.js .gal.is-filtered .gal-more-wrap{display:none}
@media (max-width:899px){.gal-list{columns:2;column-gap:16px}.gal-item{padding-bottom:20px}}
@media (max-width:760px){.projects .head{flex-direction:column;align-items:start;padding-top:44px;margin-bottom:26px}.projects{padding-bottom:72px}}
@media (max-width:600px){.gal-filters{gap:8px}.gal-filters button{padding:0 14px}.gal-more{width:100%}}
@media (prefers-reduced-motion:reduce){.gal-ph img,.jrow-ph img{transition:none}}

/* The /projects/ page (page-projects.php): full-width gallery */
.projects-page .wrap{max-width:none}
.projects-page .entry-content{max-width:720px;margin-bottom:36px}

/* 1.0.7: inline SVG logo (replaces img/seema-logo-220.png in the header and footer; same box and sizes) */
.brand .logo-art{display:block;height:62px;width:auto;aspect-ratio:220/128;flex-shrink:0;overflow:visible;transition:height .25s ease}
.is-scrolled .brand .logo-art{height:48px}
svg.footer-logo{display:block;height:84px;width:auto;aspect-ratio:220/128}
@media (max-width:960px){.brand .logo-art{height:48px}.is-scrolled .brand .logo-art{height:42px}}
@media (max-width:600px){.brand .logo-art{height:42px}.is-scrolled .brand .logo-art{height:38px}}
@media (max-width:359px){.brand .logo-art,.is-scrolled .brand .logo-art{height:38px}}
/* The two figures saw: the saw slides 24 units (about 1.5 CSS px in the 62 px header) each way, each
   figure leans with it (skewX about its feet, so the feet stay put and the hands stay on the handles),
   and five sawdust specks drop from the cut. 3 strokes on page load (0.4 s delay + 3 x 1.5 s), 2 more
   on hover/keyboard focus. transform/opacity only; none of it runs with prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .brand .logo-art .sa-saw,.brand .logo-art .sa-fl,.brand .logo-art .sa-fr,.brand .logo-art .sa-h{transform-box:view-box;transform-origin:0 1004px}
  .brand .logo-art .sa-saw{animation:sa-saw 1.5s .4s 3}
  .brand .logo-art .sa-fl{animation:sa-lean-l 1.5s .4s 3}
  .brand .logo-art .sa-fr{animation:sa-lean-r 1.5s .4s 3}
  .brand:hover .logo-art .sa-saw .sa-h,.brand:focus-visible .logo-art .sa-saw .sa-h{animation:sa-saw 1.5s 2}
  .brand:hover .logo-art .sa-fl .sa-h,.brand:focus-visible .logo-art .sa-fl .sa-h{animation:sa-lean-l 1.5s 2}
  .brand:hover .logo-art .sa-fr .sa-h,.brand:focus-visible .logo-art .sa-fr .sa-h{animation:sa-lean-r 1.5s 2}
  .brand .logo-art .sa-dl circle{animation:sa-dust 1.3s ease-in}
  .brand:hover .logo-art .sa-dh circle,.brand:focus-visible .logo-art .sa-dh circle{animation:sa-dust 1.3s ease-in}
  .logo-art .sa-d1{--dx:30px;--dy:125px}.logo-art .sa-d2{--dx:-22px;--dy:118px}.logo-art .sa-d3{--dx:48px;--dy:95px}.logo-art .sa-d4{--dx:-8px;--dy:140px}.logo-art .sa-d5{--dx:16px;--dy:150px}
  .brand .logo-art .sa-dl .sa-d1{animation-delay:.6s}.brand .logo-art .sa-dl .sa-d2{animation-delay:1.3s}.brand .logo-art .sa-dl .sa-d3{animation-delay:2s}.brand .logo-art .sa-dl .sa-d4{animation-delay:2.7s}.brand .logo-art .sa-dl .sa-d5{animation-delay:3.4s}
  .brand:hover .logo-art .sa-dh .sa-d2,.brand:focus-visible .logo-art .sa-dh .sa-d2{animation-delay:.6s}
  .brand:hover .logo-art .sa-dh .sa-d3,.brand:focus-visible .logo-art .sa-dh .sa-d3{animation-delay:1.1s}
  .brand:hover .logo-art .sa-dh .sa-d4,.brand:focus-visible .logo-art .sa-dh .sa-d4{animation-delay:1.6s}
  .brand:hover .logo-art .sa-dh .sa-d5,.brand:focus-visible .logo-art .sa-dh .sa-d5{animation-delay:2.1s}
}
/* sine-like stroke: 0 -> +24 (ease-out), +24 -> -24 (ease-in-out), -24 -> 0 (ease-in) */
@keyframes sa-saw{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{transform:translateX(24px);animation-timing-function:cubic-bezier(.37,0,.63,1)}75%{transform:translateX(-24px);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:translateX(0)}}
@keyframes sa-lean-l{0%{transform:skewX(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{transform:skewX(-3.14deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}75%{transform:skewX(3.14deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:skewX(0)}}
@keyframes sa-lean-r{0%{transform:skewX(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{transform:skewX(-2.8deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}75%{transform:skewX(2.8deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:skewX(0)}}
@keyframes sa-dust{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}70%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@media (prefers-reduced-motion:reduce){.logo-art *{animation:none!important}}