/*
Theme Name: Arte by Hand
Theme URI: https://artebyhand.com
Author: Alfonso Leon
Author URI: https://artebyhand.com
Description: A custom WordPress and WooCommerce theme for Arte by Hand woodworking.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: arte-by-hand
*/

:root { --ink:#1e211c; --forest:#27382f; --forest-deep:#18251f; --paper:#f0eee7; --cream:#faf8f1; --clay:#b5653d; --gold:#c6a66b; --line:rgba(30,33,28,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
svg { width:1.05em; height:1.05em; }

.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; height:106px; padding:0 clamp(24px,5vw,80px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:var(--ink); background:var(--cream); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; width:fit-content; }
.logo-shell { display:flex; align-items:center; justify-content:center; width:174px; height:100px; padding:11px 13px; }
.logo-shell img { width:148px; height:78px; object-fit:contain; image-rendering:auto; }
.site-header nav { display:flex; gap:clamp(22px,3vw,46px); font-size:12px; text-transform:uppercase; letter-spacing:.15em; }
.site-header nav a { opacity:.72; transition:opacity .2s; }
.site-header nav a:hover { opacity:1; }
.header-cta { justify-self:end; display:flex; align-items:center; gap:9px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid rgba(30,33,28,.45); padding-bottom:7px; }

.hero { min-height:840px; color:#fff; background:var(--forest); display:grid; grid-template-columns:54% 46%; padding-top:106px; overflow:hidden; }
.hero-copy { padding:clamp(90px,12vh,150px) clamp(36px,7vw,112px) 54px; position:relative; z-index:2; }
.eyebrow { margin:0 0 32px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:#d7c8a5; }
.eyebrow.dark { color:#846d4c; }
.hero h1,.section h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
.hero h1 { margin:0; font-size:clamp(54px,6.4vw,96px); line-height:.98; letter-spacing:-.045em; }
.hero h1 span { color:#d8c9a4; font-style:italic; }
.hero-intro { max-width:550px; margin:38px 0 0; font-size:18px; line-height:1.7; color:rgba(255,255,255,.68); }
.hero-actions { display:flex; align-items:center; gap:36px; margin-top:45px; }
.button { min-height:56px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:16px; text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-light { background:#f3efe5; color:var(--ink); }
.button-dark { background:var(--forest); color:#fff; }
.text-link { display:inline-flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid currentColor; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.text-link svg { width:17px; }
.text-link span { font-size:16px; }
.hero-note { margin-top:82px; display:flex; gap:17px; align-items:flex-start; color:rgba(255,255,255,.5); }
.hero-note span { font-family:Georgia,serif; font-style:italic; font-size:12px; }
.hero-note p { margin:0; font-size:10px; line-height:1.7; text-transform:uppercase; letter-spacing:.16em; }
.hero-visual { position:relative; min-width:0; background:#dad5c8; }
.hero-visual::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(39,56,47,.2),transparent 40%); pointer-events:none; }
.hero-image-wrap { height:100%; position:relative; }
.hero-image-wrap>img { width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.04); }
.image-caption { position:absolute; z-index:2; bottom:35px; left:38px; right:38px; padding-top:14px; display:flex; justify-content:space-between; border-top:1px solid rgba(30,33,28,.4); color:var(--ink); }
.image-caption span { font-family:Georgia,serif; font-size:17px; }
.image-caption small { font-size:9px; text-transform:uppercase; letter-spacing:.16em; }
.maker-seal { position:absolute; z-index:3; top:50%; left:-55px; transform:translateY(-50%); width:110px; height:110px; border-radius:50%; background:var(--clay); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 0 7px rgba(181,101,61,.22); }
.maker-seal span { font-size:7px; letter-spacing:.2em; }
.maker-seal b { font-family:Georgia,serif; font-size:31px; font-weight:400; line-height:1.05; }

.promise { min-height:91px; padding:20px clamp(24px,6vw,92px); background:var(--clay); color:white; display:flex; align-items:center; justify-content:space-around; text-transform:uppercase; letter-spacing:.18em; font-size:10px; }
.promise>i { opacity:.5; font-size:7px; font-style:normal; }
.section { padding:clamp(90px,10vw,150px) clamp(24px,7vw,112px); }
.section-heading { display:flex; flex-direction:column; }
.section-heading h2,.featured-copy h2,.about h2,.contact h2 { font-size:clamp(46px,5.5vw,82px); line-height:1.03; letter-spacing:-.04em; margin:0; }
.work { background:var(--paper); display:grid; grid-template-columns:1.2fr .8fr; gap:60px; }
.work-intro { align-self:end; max-width:470px; padding-bottom:10px; }
.work-intro>p { font-family:Georgia,serif; font-size:20px; line-height:1.65; color:#4f514b; margin:0 0 32px; }
.dark-link { color:var(--ink); }
.service-grid { grid-column:1/-1; margin-top:70px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.service-grid article { padding:35px 34px 10px 0; border-right:1px solid var(--line); }
.service-grid article+article { padding-left:34px; }
.service-grid article:last-child { border-right:0; }
.service-grid span { font-family:Georgia,serif; font-style:italic; font-size:13px; color:#917b59; }
.service-grid h3 { font-family:Georgia,serif; font-size:25px; font-weight:400; margin:54px 0 17px; }
.service-grid p { max-width:330px; color:#64665f; font-size:14px; line-height:1.7; }

.featured { padding-top:0; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(48px,8vw,130px); align-items:center; }
.featured-image { min-height:670px; background:#e5e1d7; overflow:hidden; }
.featured-image img { height:100%; min-height:670px; object-fit:cover; transform:scale(1.08); }
.featured-copy h2 { margin-bottom:36px; }
.featured-copy>p { font-family:Georgia,serif; color:#595b55; font-size:18px; line-height:1.7; }
.featured-copy dl { margin:38px 0; border-top:1px solid var(--line); }
.featured-copy dl div { padding:14px 0; display:grid; grid-template-columns:120px 1fr; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.featured-copy dt { color:#88887f; }
.featured-copy dd { margin:0; }

.process { background:var(--forest-deep); color:white; display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; }
.inverse h2 { font-size:clamp(44px,5vw,72px); }
.process-list { list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,.17); }
.process-list li { padding:29px 0; border-bottom:1px solid rgba(255,255,255,.17); display:grid; grid-template-columns:58px 1fr; }
.process-list li>span { color:var(--gold); font-family:Georgia,serif; font-style:italic; font-size:12px; padding-top:5px; }
.process-list h3 { font-family:Georgia,serif; font-weight:400; font-size:21px; margin:0 0 8px; }
.process-list p { color:rgba(255,255,255,.57); font-size:13px; line-height:1.65; margin:0; }

.shop { background:var(--cream); }
.shop-heading { flex-direction:row; justify-content:space-between; align-items:end; }
.shop-heading>p { max-width:380px; margin:0 0 9px; color:#64665f; font-family:Georgia,serif; font-size:17px; line-height:1.6; }
.product-grid { margin-top:66px; display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.product-card { display:block; }
.product-image { aspect-ratio:1; background:#efede7; overflow:hidden; }
.product-image img { height:100%; object-fit:cover; transition:transform .5s ease; mix-blend-mode:multiply; }
.product-card:hover .product-image img { transform:scale(1.035); }
.product-meta { display:flex; justify-content:space-between; gap:20px; padding:19px 0; border-bottom:1px solid var(--line); }
.product-meta h3 { font-family:Georgia,serif; font-size:20px; font-weight:400; margin:0 0 7px; }
.product-meta p,.product-meta>span { color:#74766f; font-size:10px; text-transform:uppercase; letter-spacing:.11em; margin:0; }
.product-meta>span { color:var(--ink); padding-top:6px; white-space:nowrap; }
.shop-note { margin:24px 0 0; color:#7a7b75; font-size:10px; letter-spacing:.06em; }

.about { background:var(--clay); color:white; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(50px,10vw,150px); align-items:center; }
.about-image { height:670px; overflow:hidden; }
.about-image img { height:100%; object-fit:cover; filter:saturate(.9) contrast(1.02); }
.about-copy { max-width:590px; }
.about-copy h2 { margin-bottom:36px; }
.about-copy>p { max-width:525px; color:rgba(255,255,255,.72); font-family:Georgia,serif; font-size:17px; line-height:1.7; }
.about-copy .text-link { margin-top:23px; }

.contact { background:var(--paper); display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(55px,8vw,125px); align-items:start; }
.contact-intro { position:sticky; top:50px; }
.contact h2 em { color:var(--clay); font-weight:400; }
.contact-intro>p:not(.eyebrow) { max-width:570px; margin:33px 0 44px; font-family:Georgia,serif; color:#5f615b; font-size:17px; line-height:1.7; }
.contact-details { border-top:1px solid var(--line); }
.contact-details>div { padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:105px 1fr; gap:20px; }
.contact-details span,.project-form label>span { color:#797a74; text-transform:uppercase; letter-spacing:.15em; font-size:9px; }
.contact-details a,.contact-details p { margin:0; font-family:Georgia,serif; font-size:16px; }
.project-form { background:var(--cream); padding:clamp(30px,4vw,58px); border-top:3px solid var(--clay); box-shadow:0 22px 70px rgba(31,33,28,.08); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.project-form label { display:flex; flex-direction:column; gap:10px; margin-bottom:25px; }
.project-form input,.project-form select,.project-form textarea { width:100%; border:0; border-bottom:1px solid rgba(30,33,28,.28); border-radius:0; background:transparent; color:var(--ink); padding:11px 1px 13px; font:15px Georgia,'Times New Roman',serif; outline:none; }
.project-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.project-form textarea { resize:vertical; min-height:125px; line-height:1.55; }
.project-form input:focus,.project-form select:focus,.project-form textarea:focus { border-bottom-color:var(--clay); box-shadow:0 1px 0 var(--clay); }
.project-form input::placeholder,.project-form textarea::placeholder { color:#9a9a92; }
.honey { position:absolute !important; left:-9999px !important; opacity:0 !important; pointer-events:none !important; }
.form-submit { display:flex; align-items:center; gap:24px; margin-top:9px; }
.form-submit button { border:0; cursor:pointer; min-width:205px; }
.form-submit button:disabled { opacity:.65; cursor:wait; }
.form-submit p { margin:0; color:#81817a; font-size:10px; line-height:1.55; }
.form-error { margin:18px 0 0; padding:12px 14px; color:#8e3b2c; background:#f6e5df; font-size:12px; }
.form-success { min-height:470px; background:var(--forest); color:white; padding:clamp(36px,5vw,70px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.form-success>span { color:var(--gold); text-transform:uppercase; letter-spacing:.22em; font-size:9px; }
.form-success h3 { max-width:480px; margin:24px 0; font:400 clamp(36px,4vw,58px)/1.05 Georgia,serif; }
.form-success p { color:rgba(255,255,255,.65); font:17px/1.6 Georgia,serif; }
.form-success button { margin-top:25px; padding:8px 0; border:0; border-bottom:1px solid rgba(255,255,255,.6); background:transparent; color:white; text-transform:uppercase; letter-spacing:.13em; font-size:10px; cursor:pointer; }

footer { min-height:130px; padding:30px clamp(24px,7vw,112px); background:var(--ink); color:rgba(255,255,255,.74); display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:center; gap:30px; font-size:10px; letter-spacing:.08em; }
.footer-brand { color:white; }
.footer-logo { width:150px; height:104px; padding:2px 10px; justify-content:flex-start; }
.footer-logo img { width:106px; height:100px; object-fit:contain; }
footer p { margin:0; }
footer div { display:flex; gap:22px; text-transform:uppercase; }
footer>span { color:rgba(255,255,255,.38); }

@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.reveal { animation:rise .8s ease both; }
.reveal-delay { animation-delay:.15s; }

@media (max-width:980px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr 42%; }
  .hero-copy { padding-left:42px; padding-right:42px; }
  .hero h1 { font-size:clamp(52px,7.7vw,75px); }
  .maker-seal { width:84px; height:84px; left:-42px; }
  .work,.featured,.process,.about { gap:54px; }
  .about-image { height:580px; }
  .contact { gap:50px; }
}

@media (max-width:720px) {
  .site-header { height:82px; padding:0 22px; }
  .site-header .logo-shell { width:126px; height:76px; padding:8px 10px; }
  .site-header .logo-shell img { width:106px; height:60px; }
  .header-cta { font-size:0; border:1px solid rgba(30,33,28,.35); width:38px; height:38px; padding:0; justify-content:center; }
  .header-cta svg { font-size:15px; }
  .hero { display:flex; flex-direction:column; padding-top:82px; }
  .hero-copy { padding:70px 22px 50px; min-height:670px; }
  .hero h1 { font-size:clamp(51px,14.5vw,70px); }
  .hero-intro { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .hero-note { margin-top:54px; }
  .hero-visual { min-height:520px; }
  .maker-seal { top:0; left:auto; right:23px; transform:translateY(-50%); }
  .image-caption { left:22px; right:22px; bottom:22px; }
  .image-caption small { display:none; }
  .promise { justify-content:center; gap:17px; min-height:78px; }
  .promise p { display:none; }
  .promise p:nth-of-type(2) { display:block; }
  .section { padding:82px 22px; }
  .work,.featured,.process,.about { display:flex; flex-direction:column; }
  .section-heading h2,.featured-copy h2,.about h2,.contact h2 { font-size:46px; }
  .work-intro { margin-top:35px; }
  .service-grid { margin-top:48px; grid-template-columns:1fr; }
  .service-grid article,.service-grid article+article { padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
  .service-grid h3 { margin:22px 0 10px; }
  .featured { padding-top:0; }
  .featured-image,.featured-image img { min-height:420px; }
  .featured-copy dl div { grid-template-columns:105px 1fr; }
  .process-list { margin-top:45px; }
  .shop-heading { align-items:flex-start; }
  .shop-heading { flex-direction:column; }
  .shop-heading>p { margin-top:30px; }
  .product-grid { margin-top:45px; grid-template-columns:1fr; gap:38px; }
  .about { flex-direction:column-reverse; }
  .about-image { width:100%; height:520px; }
  .contact { display:flex; flex-direction:column; }
  .contact-intro { position:static; }
  .project-form { width:100%; padding:30px 22px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .form-submit { align-items:flex-start; flex-direction:column; }
  .form-submit button { width:100%; }
  footer { grid-template-columns:1fr auto; padding-top:45px; padding-bottom:45px; }
  footer p { display:none; }
  footer div { grid-column:1/-1; grid-row:2; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { animation:none; } .product-image img,.button { transition:none; } }

/* WordPress and WooCommerce integration */
body.admin-bar .site-header { top:32px; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.contact-notice { margin:0 0 24px; padding:14px 16px; font-size:13px; line-height:1.55; }
.contact-notice.success { color:#24432f; background:#e3eee5; border-left:3px solid #47704c; }
.contact-notice.error { color:#8e3b2c; background:#f6e5df; border-left:3px solid #b5653d; }
.commerce-shell { min-height:70vh; padding-top:150px; background:var(--cream); }
.commerce-shell .woocommerce { max-width:1220px; margin:0 auto; }
.woocommerce .woocommerce-breadcrumb { color:#74766f; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.woocommerce h1,.woocommerce h2,.woocommerce h3 { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
.woocommerce ul.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.woocommerce ul.products::before,.woocommerce ul.products::after { display:none; }
.woocommerce ul.products li.product { float:none; width:auto; margin:0; }
.woocommerce ul.products li.product img { background:#efede7; }
.woocommerce ul.products li.product .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button { border-radius:0; background:var(--forest); color:#fff; text-transform:uppercase; letter-spacing:.11em; font-size:10px; padding:15px 18px; }
.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce ul.products li.product .price { color:var(--clay); }
.woocommerce-message,.woocommerce-info { border-top-color:var(--clay); }
.woocommerce-message::before,.woocommerce-info::before { color:var(--clay); }
.site-main-default { min-height:70vh; padding-top:150px; background:var(--cream); }
.site-main-default .entry { max-width:900px; margin:0 auto; }
.site-main-default h1 { font:400 clamp(42px,5vw,72px)/1.05 Georgia,serif; }

@media (max-width:782px) { body.admin-bar .site-header { top:46px; } }
@media (max-width:720px) {
  .woocommerce ul.products { grid-template-columns:1fr; }
  .commerce-shell,.site-main-default { padding-top:112px; }
}