/*
Theme Name: Maison — ראובן יניב
Description: תבנית לקטלוג תכשיטים בעבודת יד: רקע אבן, טיפוגרפיה דקה (Heebo), התכשיט עצמו בגדול. נגישה ורספונסיבית.
Version: 2.1.1
Requires PHP: 8.0
Text Domain: maison
*/

/* Heebo (SIL OFL, assets/fonts/OFL.txt), served from the site itself: no request to Google */
@font-face{font-family:'Heebo';font-style:normal;font-display:swap;font-weight:100 900;src:url(assets/fonts/heebo-hebrew-wght-normal.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-display:swap;font-weight:100 900;src:url(assets/fonts/heebo-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#ecebe8; --step:#dfdeda; --ink:#1d1a16; --ink-2:#4b463f; --muted:#a8a39b; --gold:#7d6233; --err:#8f2a1c;
  --m:clamp(16px,4vw,56px);
  /* page side padding: the small margin on narrow screens, and on wide screens whatever centres a 1200px column (backgrounds stay full width) */
  --max:1200px; --px:max(var(--m),calc((100% - var(--max)) / 2));
  --t-small:.875rem; --t-body:1.0625rem; --t-lead:clamp(1.25rem,1.05rem + .8vw,1.75rem);
  --t-head:clamp(2rem,1.2rem + 3.4vw,4.25rem); --t-display:clamp(3rem,1.6rem + 6.4vw,8.5rem);
  --font:'Heebo',sans-serif; --dw:200;
  --ease:cubic-bezier(.16,1,.3,1);
  --bar:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font:300 var(--t-body)/1.6 var(--font);-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--ground)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;right:-9999px;top:12px;background:var(--ink);color:var(--ground);padding:8px 14px;z-index:30}
.skip-link:focus{right:var(--px)}
h1,h2,h3{font-family:var(--font);font-weight:var(--dw);letter-spacing:-.035em;line-height:.98;text-wrap:balance}
.wrap{padding-inline:var(--px)}
.btn{display:inline-block;background:var(--ink);color:var(--ground);text-decoration:none;font:400 var(--t-body) var(--font);padding:15px 30px;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{background:#000}.btn:active{transform:scale(.97)}
.tlink{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.tlink:hover{text-decoration-thickness:2px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--ground);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--bar);padding:12px var(--px)}
.admin-bar .site-header{top:32px}
.word{font:300 1.375rem/1 var(--font);letter-spacing:-.01em;text-decoration:none;justify-self:start;display:flex;align-items:center;gap:12px}
.word img{height:34px;width:auto}
.main-nav ul{display:flex;gap:32px;list-style:none}
.main-nav a{text-decoration:none}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
.main-nav .nav-cta{display:none}
.hd-act{justify-self:end;display:flex;gap:28px;align-items:center}
.menu-toggle{display:none;background:none;border:0;font:400 var(--t-body) var(--font);color:var(--ink);padding:10px 0;cursor:pointer;min-height:44px}

/* ---------- home: hero, the object large ---------- */
.hero{display:grid;grid-template-columns:5fr 7fr;min-height:calc(100svh - var(--bar));padding:0 var(--px);align-items:center}
.hero .copy{padding:40px 0 64px;align-self:end;position:relative;z-index:2}
.hero h1{font-size:var(--t-display);max-width:7.5em}
.hero .copy p{font-size:var(--t-lead);line-height:1.4;max-width:22em;margin:28px 0 36px}
.hero .obj{position:relative;height:100%;min-height:560px;margin-inline-start:calc(var(--m) * -1);touch-action:none}
.hero .obj img{position:absolute;inset:-8% -6% -4% 4%;width:102%;height:112%;max-width:none;object-fit:contain}
@media (hover:hover){.hero .obj{cursor:none}}
.lens{position:absolute;left:0;top:0;width:176px;height:176px;border-radius:50%;background-color:var(--ground);background-repeat:no-repeat;border:1.5px solid var(--ink);pointer-events:none;opacity:0;will-change:transform;transition:opacity .3s var(--ease)}
.lens::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(29,26,22,.18)}
.obj.on .lens{opacity:1}
.hint{position:absolute;bottom:28px;left:0;font-size:var(--t-small);color:var(--ink-2)}

/* collections: a word index with the piece beside it */
.index{padding:180px var(--px) 160px;display:grid;grid-template-columns:4fr 4fr 4fr;gap:var(--m);align-items:start}
.index h2{font-size:var(--t-head)}
.index .lead{font-size:var(--t-lead);line-height:1.4;margin-top:24px;max-width:18em}
.index ul{list-style:none}
.index li a{display:block;text-decoration:none;padding:10px 0;font:var(--dw) var(--t-head)/1.05 var(--font);letter-spacing:-.03em;transition:color .3s,transform .4s var(--ease)}
.index li a:hover{transform:translateX(-14px)}
.index ul:hover a:not(:hover){color:var(--muted)}
.shown{aspect-ratio:4/5;position:sticky;top:96px}
.shown img{width:100%;height:100%;object-fit:contain;transition:opacity .35s var(--ease)}
.shown img.swap{opacity:0}

/* campaign: full bleed, one statement */
.campaign{display:grid;grid-template-columns:7fr 5fr;background:var(--ink);color:var(--ground);padding-inline:calc(var(--px) - var(--m))}
.campaign figure{aspect-ratio:4/5;overflow:hidden}
.campaign img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.campaign.in img{transform:scale(1)}
.campaign .s{padding:var(--m);align-self:end}
.campaign blockquote{font:var(--dw) clamp(1.5rem,1.1rem + 1.4vw,2.25rem)/1.25 var(--font);letter-spacing:-.02em;max-width:14em}
.campaign .s p{margin-top:28px;max-width:30em;color:#d4d1cb}
.campaign .s a{display:inline-block;margin-top:28px}

/* selected pieces: uneven, unboxed */
.pieces{padding:200px var(--px) 160px}
.pieces h2{font-size:var(--t-head);max-width:10em}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px var(--m);margin-top:72px;align-items:start}
.piece{text-decoration:none;display:block}
.piece .ph{position:relative;aspect-ratio:1}
.piece .ph img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transition:opacity .5s var(--ease),transform .9s var(--ease)}
.piece .ph img.on-body{inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.piece:hover .ph img.on-body{opacity:1}
.piece:hover .ph img:first-child{transform:scale(1.04)}
.piece h3{font:300 var(--t-lead)/1.3 var(--font);letter-spacing:-.01em;margin-top:18px}
.piece p{color:var(--ink-2)}
.p1{grid-column:1/7}.p2{grid-column:8/13;margin-top:180px}.p3{grid-column:1/6;margin-top:-120px}.p4{grid-column:8/13}
.more{margin-top:80px}

/* maker */
.maker{display:grid;grid-template-columns:6fr 6fr;gap:var(--m);padding:0 var(--px) 200px;align-items:center}
.maker img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.2)}
.maker h2{font-size:var(--t-head);max-width:9em}
.maker p{font-size:var(--t-lead);line-height:1.45;margin-top:28px;max-width:22em}
.maker .facts{margin-top:36px;font-size:var(--t-body);max-width:30em}
.maker .tlink{display:inline-block;margin-top:28px}

/* process: one verb at a time */
.process{background:var(--step);padding:180px var(--px)}
.process h2{font-size:var(--t-head)}
.verbs{list-style:none;margin-top:64px}
.verbs li{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);padding:28px 0;align-items:baseline}
.verbs b{font:var(--dw) var(--t-display)/1 var(--font);letter-spacing:-.04em}
.verbs span{font-size:var(--t-lead);line-height:1.4;max-width:24em}

/* visit */
.visit{padding:200px var(--px) 120px;display:grid;grid-template-columns:7fr 5fr;gap:var(--m);align-items:end}
.visit h2{font-size:var(--t-display);max-width:6em}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin-bottom:36px}
.visit dt{color:var(--ink-2)}

/* ---------- catalog ---------- */
.page-head{padding:120px var(--px) 56px}
.page-head h1{font-size:var(--t-head);max-width:12em}
.page-head .desc{font-size:var(--t-lead);line-height:1.4;max-width:26em;margin-top:24px}
.page-head .desc p+p{margin-top:.6em}
.filters{display:flex;flex-wrap:wrap;gap:8px 32px;list-style:none;padding:0 var(--px) 56px}
.filters a{text-decoration:none;color:var(--ink-2)}
.filters a:hover{color:var(--ink)}
.filters a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:64px var(--m)}
.catalog{padding:0 var(--px) 140px}
.item{display:block;text-decoration:none}
.item .im{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.item img{width:88%;height:88%;object-fit:contain;transition:transform .9s var(--ease)}
.item:hover img{transform:scale(1.04)}
.item h2,.item h3{font:300 var(--t-body)/1.45 var(--font);letter-spacing:0;margin-top:16px}
.item p{font-size:var(--t-small);color:var(--ink-2)}
.empty{font-size:var(--t-lead);padding:40px 0}
.pagination .nav-links{display:flex;gap:6px;margin-top:96px;flex-wrap:wrap}
.pagination .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.pagination a.page-numbers:hover{text-decoration:underline;text-underline-offset:.3em}
.pagination .current{background:var(--ink);color:var(--ground)}

/* ---------- single product ---------- */
.breadcrumbs{font-size:var(--t-small);color:var(--ink-2);padding:28px var(--px) 0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.breadcrumbs li+li::before{content:"/";margin-left:8px}
.breadcrumbs a{text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}
.product{display:grid;grid-template-columns:7fr 5fr;gap:var(--m);padding:32px var(--px) 160px;align-items:start}
.gallery .main{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.gallery .main img{width:92%;height:92%;object-fit:contain}
.gallery .thumbs{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
.gallery .thumbs button{width:84px;height:84px;background:none;border:0;padding:6px;cursor:pointer;opacity:.55;transition:opacity .2s}
.gallery .thumbs button:hover,.gallery .thumbs button[aria-pressed="true"]{opacity:1}
.gallery .thumbs button[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--ink)}
.gallery .thumbs img{width:100%;height:100%;object-fit:contain}
.product-info{position:sticky;top:calc(var(--bar) + 48px);padding-top:8vh}
.product-info h1{font-size:clamp(2rem,1.4rem + 2vw,3.25rem);line-height:1.05;margin:0 0 28px;max-width:12em}
.product-info .entry{font-size:var(--t-lead);line-height:1.45;margin-bottom:32px;max-width:24em}
.specs{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin-bottom:40px}
.specs div{display:contents}
.specs dt{color:var(--ink-2)}
.inquire{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center}
.inquire .note{flex-basis:100%;font-size:var(--t-small);color:var(--ink-2)}
.related{padding:0 var(--px) 160px}
.related h2{font-size:var(--t-head);margin-bottom:64px}

/* ---------- pages and posts ---------- */
.entry-content{padding:0 var(--px) 160px;font-size:1.125rem;line-height:1.7}
.entry-content>*{max-width:44rem}
.entry-content>*+*{margin-top:1.2em}
.entry-content h2,.entry-content h3{line-height:1.15;margin-top:2em}
.entry-content h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.entry-content h3{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);font-weight:300;letter-spacing:-.015em}
.entry-content a{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.entry-content a:hover{text-decoration-thickness:2px}
.entry-content ul,.entry-content ol{padding-right:1.4em}
.entry-content strong{font-weight:500}
.entry-content figure{margin-block:2em}
.entry-content .wp-block-gallery,.entry-content .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.entry-content .wp-block-gallery figure.wp-block-image{width:100%!important;margin:0!important;aspect-ratio:1}
.entry-content .wp-block-gallery figure.wp-block-image img{width:100%;height:100%;object-fit:cover}
.entry-content .lead{font-size:var(--t-lead);line-height:1.45}
.entry-content .wp-block-latest-posts{list-style:none;padding:0}
.entry-content .wp-block-latest-posts li{padding:20px 0}
.entry-content .wp-block-latest-posts__post-title{font-size:var(--t-lead);text-decoration:none}
.entry-content .placeholder{background:#f3e7c4;padding:0 4px}
.posts article+article{margin-top:56px}
.posts h2{margin-top:0}

/* contact page and form */
.entry-content>.contact-grid{max-width:72rem}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);padding-top:16px}
.contact-grid h2{font-size:var(--t-lead);font-weight:300;letter-spacing:-.01em;margin:0 0 18px}
.contact-grid dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin-bottom:28px}
.contact-grid dt{color:var(--ink-2)}
.contact-grid .ways{display:flex;flex-wrap:wrap;gap:20px}
.contact-grid .ways a{text-decoration:none}
.form label{display:block;font-size:var(--t-body);margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--ink-2);border-radius:0;padding:12px 14px;font:300 1rem var(--font);background:#f6f5f3;color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--ink);outline-offset:1px}
.form .row{margin-bottom:20px}
.form .notice{padding:14px 18px;background:var(--step);margin-bottom:24px}
.form .hp{position:absolute;right:-9999px;width:1px;height:1px;overflow:hidden}
.form .check{display:flex;gap:10px;align-items:flex-start}
.form .check input{width:20px;height:20px;margin-top:5px;flex:none;accent-color:var(--ink)}
.form .check label{margin:0}
.form .field-error{margin:6px 0 0;font-size:var(--t-small);color:var(--err)}
.form [aria-invalid=true]{border-color:var(--err);border-width:2px}
.form .notice ul{margin:8px 0 0;padding-inline-start:1.2em}
.form .notice a{color:inherit}
.form .notice:focus{outline:2px solid var(--ink);outline-offset:2px}
.form .req-note{font-size:var(--t-small);color:var(--ink-2);margin-bottom:18px}
.btn-line{display:inline-block;background:var(--ink);color:var(--ground);text-decoration:none!important;font:400 var(--t-body) var(--font);padding:15px 30px;border:0;cursor:pointer}
.btn-line:hover{background:#000}

/* ---------- footer ---------- */
.site-footer{padding:120px var(--px) 32px}
.site-footer .cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:40px 96px;margin-bottom:96px}
.site-footer h2{font:400 var(--t-body)/1.4 var(--font);letter-spacing:0;margin-bottom:12px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:6px;color:var(--ink-2)}
.site-footer li a{text-decoration:none}
.site-footer li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}
.site-footer .big-logo{height:clamp(150px,9rem + 8vw,300px);width:auto}
.site-footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;font-size:var(--t-small);color:var(--ink-2)}

/* ---------- entrances (only when JS runs) ---------- */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.js .rise{opacity:1;transform:none}.campaign img{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .site-header{grid-template-columns:1fr auto}
  .hd-act{display:none}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;right:0;left:0;background:var(--ground);padding:8px var(--m) 32px}
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{display:block;padding:12px 0;font:var(--dw) 2rem/1.15 var(--font);letter-spacing:-.03em}
  .main-nav .nav-cta{display:block;margin-top:16px}
  .main-nav .nav-cta a{font:400 var(--t-body) var(--font);letter-spacing:0}
  .hero,.index,.campaign,.maker,.visit,.product,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero .obj{min-height:112vw;order:-1;margin:0 calc(var(--m) * -1)}
  .hero .obj img{inset:2% 6% 0 6%;width:88%;height:98%}
  .hero .copy{padding:24px 0 72px}
  .hint{display:none}
  .index,.pieces,.process{padding-top:110px;padding-bottom:110px}
  .index{gap:32px}
  .shown{position:static;order:3}
  .pgrid{gap:40px 16px}
  .p1,.p2,.p3,.p4{grid-column:auto/span 12;margin-top:0}
  .p3,.p4{grid-column:auto/span 6}
  .verbs li{grid-template-columns:1fr;gap:6px}
  .maker{padding-bottom:110px}
  .visit{padding-top:110px}
  .visit h2{max-width:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:40px 16px}
  .page-head{padding-top:72px}
  .product-info{position:static;padding-top:0}
  .site-footer{padding-top:96px}
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:40px 32px}
  .entry-content .wp-block-gallery,.entry-content .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:600px) and (max-width:900px){.hero .obj{min-height:58vw}}
@media (max-width:782px){.admin-bar .site-header{top:46px}}