/*
Theme Name: theybe
Theme URI: https://theybe.co.uk
Author: theybe
Author URI: https://theybe.co.uk
Description: Minimalist creative-brand homepage theme for theybe.co.uk: apparel, art prints and SEN essentials.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theybe
*/


  :root{
    --bg:#FFFFFF;
    --bg-soft:#F6F5F1;
    --ink:#17160F;
    --ink-soft:#6B6A61;
    --line:#E6E3D9;
    --accent:#A97B2E;
    --accent-ink:#241A08;
    --white:#FFFFFF;
    --shadow: 0 18px 40px -28px rgba(23,22,15,0.35);
    --font-display:'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-body:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#111009; --bg-soft:#1A1912; --ink:#F3F1E8; --ink-soft:#B5B2A5;
      --line:#2C2A20; --accent:#D6A24C; --accent-ink:#17160F; --white:#1A1912;
      --shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#111009; --bg-soft:#1A1912; --ink:#F3F1E8; --ink-soft:#B5B2A5;
    --line:#2C2A20; --accent:#D6A24C; --accent-ink:#17160F; --white:#1A1912;
    --shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;
    font-size:16px;
  }
  @media (min-width:1600px){ body{font-size:17.5px;} }
  img,svg{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1440px; margin:0 auto; padding:0 48px;}
  @media (max-width:900px){ .wrap{padding:0 24px;} }
  section{padding:96px 0;}
  @media (max-width:720px){ section{padding:56px 0;} .wrap{padding:0 20px;} }

  h1,h2,h3{font-family:var(--font-display); font-weight:400; margin:0; letter-spacing:-0.01em;}
  .kicker{font-size:0.8rem; font-weight:600; color:var(--ink-soft); letter-spacing:0.02em; margin:0 0 14px;}

  /* header */
  header.site{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:22px 0;}
  .logo{font-family:var(--font-display); font-size:1.7rem; font-style:italic; letter-spacing:-0.01em; text-decoration:none;}
  nav.primary{display:flex; gap:36px; font-size:0.92rem; font-weight:500;}
  nav.primary a{text-decoration:none; color:var(--ink); padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .15s;}
  nav.primary a:hover, nav.primary a:focus-visible{border-color:var(--ink);}
  .nav-actions{display:flex; align-items:center; gap:20px;}
  .icon-btn{background:none; border:none; cursor:pointer; color:var(--ink); padding:4px;}
  .icon-btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .menu-toggle{display:none;}
  @media (max-width:860px){ nav.primary{display:none;} .menu-toggle{display:block;} }

  .btn{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600;
    font-size:0.9rem; padding:14px 28px; border-radius:2px; text-decoration:none; border:1px solid var(--ink);
    cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .btn-primary{background:var(--ink); color:var(--bg);}
  .btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .btn-outline{background:transparent; color:var(--ink);}
  .btn-outline:hover{background:var(--ink); color:var(--bg);}
  .text-link{font-weight:600; font-size:0.92rem; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;}
  .text-link:hover{color:var(--accent); border-color:var(--accent);}

  /* hero */
  .hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-top:64px; padding-bottom:64px;}
  @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr; gap:40px;} }
  .hero h1{font-size:clamp(2.6rem,4.4vw,3.8rem); line-height:1.05; max-width:12ch;}
  .hero p.lede{color:var(--ink-soft); font-size:1.08rem; max-width:38ch; margin:24px 0 34px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-figure{position:relative; aspect-ratio:4/5; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden;}
  .hero-figure svg{position:absolute; inset:0; width:100%; height:100%;}
  .hero-figure .crop{position:absolute; width:16px; height:16px; border-color:var(--ink); opacity:0.5;}
  .crop.tl{top:14px; left:14px; border-top:1px solid; border-left:1px solid;}
  .crop.tr{top:14px; right:14px; border-top:1px solid; border-right:1px solid;}
  .crop.bl{bottom:14px; left:14px; border-bottom:1px solid; border-left:1px solid;}
  .crop.br{bottom:14px; right:14px; border-bottom:1px solid; border-right:1px solid;}
  .hero-figure .tag{position:absolute; bottom:20px; left:20px; font-size:0.72rem; font-weight:600; letter-spacing:0.03em; color:var(--ink-soft); background:var(--bg); padding:5px 10px; border:1px solid var(--line);}

  /* trust strip */
  .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .trust .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; padding:20px 32px; justify-content:space-between; font-size:0.86rem; color:var(--ink-soft); font-weight:500;}
  .trust .item{display:flex; align-items:center; gap:9px; white-space:nowrap;}
  .trust svg{width:16px; height:16px; flex-shrink:0;}

  /* categories */
  .cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:820px){ .cat-grid{grid-template-columns:1fr;} }
  .cat-card{background:var(--bg); text-decoration:none; color:var(--ink); display:flex; flex-direction:column;}
  .cat-media{aspect-ratio:3/4; background:var(--bg-soft); position:relative; overflow:hidden;}
  .cat-media svg{position:absolute; inset:0; width:100%; height:100%;}
  .cat-body{padding:20px 22px 26px; display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
  .cat-body h3{font-size:1.3rem;}
  .cat-body span{font-size:0.85rem; color:var(--ink-soft);}
  .cat-card:hover .cat-media svg{transform:scale(1.03);}
  .cat-media svg{transition:transform .3s ease;}

  /* section head */
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:44px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(1.7rem,2.6vw,2.2rem);}
  .section-head p{color:var(--ink-soft); max-width:44ch; margin:12px 0 0; font-size:0.98rem;}

  /* products */
  .product-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:900px){ .product-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:560px){ .product-grid{grid-template-columns:1fr;} }
  .product-card{background:var(--bg); display:flex; flex-direction:column;}
  .product-media{aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--bg-soft);}
  .product-media svg{position:absolute; inset:0; width:100%; height:100%;}
  .product-tag{position:absolute; top:14px; left:14px; font-size:0.68rem; font-weight:700; letter-spacing:0.03em; color:var(--ink); background:var(--bg); padding:5px 10px; border:1px solid var(--line);}
  .product-body{padding:20px 22px 26px;}
  .product-body h4{font-family:var(--font-display); font-weight:400; font-size:1.2rem; margin:0 0 6px;}
  .product-body .desc{font-size:0.88rem; color:var(--ink-soft); margin:0 0 16px; min-height:2.6em;}
  .price-row{display:flex; align-items:center; justify-content:space-between;}
  .price{font-weight:600; font-size:1rem;}
  .add-link{font-weight:600; font-size:0.85rem; background:none; border:none; color:var(--ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0;}
  .add-link:hover{color:var(--accent);}

  /* sen spotlight */
  .sen-spot{background:var(--ink); color:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .sen-spot .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  @media (max-width:900px){ .sen-spot .wrap{grid-template-columns:1fr; gap:36px;} }
  .sen-spot .kicker{color:var(--accent);}
  .sen-spot h2{font-size:clamp(1.9rem,3vw,2.6rem); color:var(--bg); max-width:14ch;}
  .sen-spot p.copy{color:#C9C6BA; font-size:1.02rem; max-width:46ch; margin:20px 0 30px;}
  .sen-spot .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .sen-spot .btn-primary:hover{background:var(--bg); border-color:var(--bg); color:var(--ink);}
  .sen-spot .btn-outline{border-color:var(--bg); color:var(--bg);}
  .sen-spot .btn-outline:hover{background:var(--bg); color:var(--ink);}
  .sen-media{aspect-ratio:4/3; border:1px solid #3A382C; position:relative; overflow:hidden;}
  .sen-media svg{position:absolute; inset:0; width:100%; height:100%;}
  .sen-points{display:flex; gap:28px; margin-top:32px; flex-wrap:wrap;}
  .sen-points div{font-size:0.86rem; color:#C9C6BA; max-width:20ch;}
  .sen-points strong{display:block; color:var(--bg); font-family:var(--font-display); font-size:1.5rem; font-weight:400;}

  /* about / brand */
  .about{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .about .wrap{max-width:760px;}
  .about h2{font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:22px;}
  .about p{color:var(--ink-soft); font-size:1.05rem; margin:0 0 18px; max-width:62ch;}
  .about p:last-of-type{margin-bottom:0;}

  /* steps */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
  @media (max-width:760px){ .steps{grid-template-columns:1fr;} }
  .step{border-top:1px solid var(--ink); padding-top:20px;}
  .step h4{font-family:var(--font-display); font-weight:400; font-size:1.3rem; margin:0 0 8px;}
  .step p{color:var(--ink-soft); font-size:0.95rem; margin:0; max-width:34ch;}

  /* testimonials */
  .testimonials{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
  @media (max-width:860px){ .t-grid{grid-template-columns:1fr;} }
  .t-card p{font-family:var(--font-display); font-style:italic; font-size:1.25rem; line-height:1.45; color:var(--ink); margin:0 0 16px;}
  .t-name{font-size:0.86rem; color:var(--ink-soft); font-weight:500;}

  /* newsletter */
  .newsletter{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; border:1px solid var(--ink); padding:48px 52px;}
  .newsletter h3{font-size:1.7rem; max-width:16ch;}
  .newsletter p{color:var(--ink-soft); margin:12px 0 0; max-width:36ch; font-size:0.96rem;}
  .nl-form{display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--ink);}
  .nl-form input{padding:14px 18px; border:none; font-family:var(--font-body); font-size:0.92rem; min-width:220px; background:var(--bg); color:var(--ink);}
  .nl-form input:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .nl-form button{border:none; border-left:1px solid var(--ink);}

  footer{padding-top:72px; border-top:1px solid var(--line);}
  .footer-grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line);}
  @media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  .footer-grid h5{font-family:var(--font-body); font-weight:600; font-size:0.85rem; margin:0 0 16px; letter-spacing:0.02em;}
  .footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
  .footer-grid a{text-decoration:none; color:var(--ink-soft); font-size:0.92rem;}
  .footer-grid a:hover{color:var(--ink);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:24px 0 48px; flex-wrap:wrap; gap:12px; color:var(--ink-soft); font-size:0.84rem;}