/*
Theme Name: Eyes on Watches
Theme URI: https://eyesonwatches.com
Description: Child theme for Eyes on Watches. Brand identity (fonts, colors, motion) + custom chic homepage. Content stays editable in WordPress.
Author: Byoond Studio
Template: astra
Version: 1.1.0
*/

/* ===== Brand tokens ===== */
:root{
  --paper:#F6F2EA; --paper-2:#EFE8DA; --ink:#1B1A16; --ink-soft:#544F44; --line:#D8CFBD;
  --brass:#9B7B45; --brass-deep:#6E5933; --navy:#1B2C4F; --navy-soft:#33456B; --dark:#15130E;
  --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",monospace; --maxw:1180px;
}

/* ===== Global base (site-wide) ===== */
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6,.entry-title,.site-title{ font-family:var(--serif); font-weight:500; color:var(--ink); letter-spacing:-.012em; }
a{ color:inherit; text-decoration:none; }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-deep); font-weight:700; }

/* film-grain overlay for the chic, tactile feel */
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* buttons (Elementor inner pages + blocks) */
.wp-block-button__link,.ast-button,button,input[type="submit"],.elementor-button{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:var(--navy); color:var(--paper); border-radius:3px; }
.wp-block-button__link:hover,.ast-button:hover,.elementor-button:hover{ background:var(--brass-deep); color:var(--paper); }

/* blog / archive cards */
.ast-article-post .entry-title a{ font-family:var(--serif); }
.ast-separate-container .ast-article-post{ background:var(--paper-2); border:1px solid var(--line); }

/* footer (inner pages, Astra) */
.site-footer,.ast-small-footer{ background:var(--dark); color:rgba(246,242,234,.7); }
.site-footer a{ color:rgba(246,242,234,.7); }
.site-footer a:hover{ color:var(--paper); }

/* single-post drop-cap */
.single-post .entry-content > p:first-of-type::first-letter{ font-family:var(--serif); font-size:64px; line-height:.78; float:left; padding:6px 12px 0 0; color:var(--brass-deep); font-weight:500; }

/* ===== Motion: scroll reveal (site-wide) ===== */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* shared dial-with-image helper */
.has-img{ background-size:cover !important; background-position:center !important; }
.has-img::after{ display:none !important; }

/* =========================================================
   CUSTOM HOMEPAGE  (.eow-home)
   ========================================================= */
.eow-home main{ display:block; }

/* masthead */
.eow-home header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.eow-home .masthead{ display:flex; flex-direction:column; align-items:center; padding:24px 0 0; }
.eow-home .brandmark{ display:block; text-align:center; }
.eow-home .brandmark .bm-full{ font-family:var(--serif); font-weight:500; font-size:34px; letter-spacing:.01em; line-height:1; display:block; }
.eow-home .brandmark .bm-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--brass-deep); margin-top:7px; display:block; }
.eow-home nav.main ul{ display:flex; gap:30px; justify-content:center; list-style:none; margin:15px 0 0; padding:14px 0 13px; flex-wrap:wrap; }
.eow-home nav.main a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); transition:color .25s; }
.eow-home nav.main a:hover{ color:var(--navy); }

/* intro */
.eow-home .intro{ text-align:center; padding:50px 32px 6px; }
.eow-home .intro .kicker{ display:inline-block; margin-bottom:14px; }
.eow-home .intro h1{ font-weight:400; font-size:clamp(31px,4vw,49px); line-height:1.06; letter-spacing:-.015em; max-width:20ch; margin:0 auto; }
.eow-home .intro p{ font-size:18px; color:var(--ink-soft); max-width:48ch; margin:16px auto 0; }

/* featured: lead + side */
.eow-home .featured{ padding:42px 32px 8px; }
.eow-home .flead{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:stretch; }
.eow-home .lead{ display:flex; flex-direction:column; }
.eow-home .lead .ph{ aspect-ratio:16/10; border-radius:4px; margin-bottom:20px; position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 30% 22%,#2a2519,#15130e 62%,#0c0a07); }
.eow-home .lead .ph::after{ content:""; position:absolute; width:38%; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid rgba(232,221,197,.16); box-shadow:0 0 0 14px rgba(232,221,197,.04), inset 0 0 60px rgba(0,0,0,.5); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.eow-home .lead:hover .ph::after{ transform:translate(-50%,-50%) scale(1.05); }
.eow-home .ph .pbrand{ position:absolute; left:15px; bottom:13px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(232,221,197,.6); z-index:2; }
.eow-home .lead h2{ font-weight:500; font-size:clamp(26px,2.6vw,36px); line-height:1.08; letter-spacing:-.015em; margin-bottom:12px; }
.eow-home .lead:hover h2{ color:var(--navy); }
.eow-home .lead .lc .kicker{ display:block; margin-bottom:10px; }
.eow-home .lead .lc p{ font-size:16px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; }
.eow-home .readmore{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-deep); }

.eow-home .fside{ display:flex; flex-direction:column; gap:22px; }
.eow-home .sstory{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
.eow-home .fside .sstory:last-child{ border-bottom:none; padding-bottom:0; }
.eow-home .sstory .sph{ width:96px; aspect-ratio:1; border-radius:3px; position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 32% 22%,#2a2519,#15130e 62%,#0c0a07); }
.eow-home .sstory .sph::after{ content:""; position:absolute; width:52%; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(232,221,197,.16); }
.eow-home .sstory .st h3{ font-weight:500; font-size:17px; line-height:1.16; letter-spacing:-.01em; transition:color .25s; }
.eow-home .sstory:hover .st h3{ color:var(--navy); }
.eow-home .sstory .st .kicker{ display:block; margin-bottom:5px; }
.eow-home .sstory .st .meta{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

/* latest list */
.eow-home .latest{ padding:18px 32px 0; }
.eow-home .sechead{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--ink); padding-top:16px; margin:42px 0 22px; }
.eow-home .sechead h3{ font-weight:500; font-size:24px; }
.eow-home .sechead a{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep); }
.eow-home .row{ display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); transition:padding-left .3s; }
.eow-home .row:hover{ padding-left:8px; }
.eow-home .row .thumb{ width:120px; aspect-ratio:4/3; border-radius:3px; position:relative; overflow:hidden; background:radial-gradient(120% 120% at 32% 22%,#2a2519,#15130e 62%,#0c0a07); }
.eow-home .row .thumb::after{ content:""; position:absolute; width:48%; aspect-ratio:1; right:14%; top:50%; transform:translateY(-50%); border-radius:50%; border:1px solid rgba(232,221,197,.16); }
.eow-home .row .rt .kicker{ display:block; margin-bottom:5px; }
.eow-home .row .rt h4{ font-weight:500; font-size:19px; line-height:1.2; transition:color .25s; }
.eow-home .row:hover .rt h4{ color:var(--navy); }
.eow-home .row .rmeta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }

/* brands */
.eow-home .brands{ margin:64px auto; padding:34px 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; max-width:var(--maxw); }
.eow-home .brands .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; }
.eow-home .brands .brow{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.eow-home .brands .brow a{ font-family:var(--serif); font-size:18px; padding:7px 18px; border:1px solid var(--line); border-radius:30px; transition:.25s; color:var(--ink-soft); }
.eow-home .brands .brow a:hover{ border-color:var(--navy); color:var(--navy); background:var(--paper-2); }

/* review (navy) */
.eow-home .review{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; background:var(--navy); color:var(--paper); border-radius:4px; overflow:hidden; margin:64px auto; max-width:var(--maxw); }
.eow-home .review .ph{ min-height:380px; height:100%; position:relative; background:radial-gradient(120% 120% at 35% 25%,#2a3a5e,#1b2c4f 60%,#101c33); }
.eow-home .review .ph::after{ content:""; position:absolute; width:52%; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(246,242,234,.18); box-shadow:0 0 0 14px rgba(246,242,234,.04), inset 0 0 60px rgba(0,0,0,.4); }
.eow-home .review .rc{ padding:54px 50px; }
.eow-home .review .kicker{ color:var(--brass); }
.eow-home .review h2{ font-weight:500; font-size:34px; line-height:1.08; margin:14px 0; color:var(--paper); }
.eow-home .review .rc p{ color:rgba(246,242,234,.72); font-size:16px; margin-bottom:26px; }
.eow-home .review .readmore{ color:var(--brass); }

/* newsletter */
.eow-home .news{ text-align:center; padding:74px 32px; border-top:1px solid var(--ink); max-width:var(--maxw); margin:0 auto; }
.eow-home .news .kicker{ display:inline-block; margin-bottom:16px; }
.eow-home .news h2{ font-weight:500; font-size:clamp(28px,3.4vw,42px); line-height:1.06; margin-bottom:14px; letter-spacing:-.01em; }
.eow-home .news p{ color:var(--ink-soft); max-width:48ch; margin:0 auto 28px; font-size:17px; }
.eow-home .news .nbtn{ display:inline-block; background:var(--navy); color:var(--paper); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:15px 30px; border-radius:3px; transition:.25s; }
.eow-home .news .nbtn:hover{ background:var(--brass-deep); }

/* home footer */
.eow-home .sitefoot{ background:var(--dark); color:rgba(246,242,234,.7); padding:54px 0 38px; margin-top:20px; }
.eow-home .sitefoot .foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.eow-home .sitefoot .fl{ font-family:var(--serif); font-size:21px; color:var(--paper); letter-spacing:.03em; }
.eow-home .sitefoot nav{ display:flex; gap:24px; flex-wrap:wrap; }
.eow-home .sitefoot nav a{ font-size:14px; color:rgba(246,242,234,.7); }
.eow-home .sitefoot nav a:hover{ color:var(--paper); }
.eow-home .sitefoot .cr{ width:100%; border-top:1px solid rgba(246,242,234,.14); margin-top:30px; padding-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(246,242,234,.45); }

/* responsive */
@media(max-width:900px){
  .eow-home nav.main ul{ gap:14px; }
  .eow-home .flead{ grid-template-columns:1fr; gap:30px; }
  .eow-home .review{ grid-template-columns:1fr; }
  .eow-home .review .ph{ min-height:260px; }
  .eow-home .review .rc{ padding:40px 30px; }
}
@media(max-width:560px){
  .wrap{ padding:0 20px; }
  .eow-home .row{ grid-template-columns:84px 1fr; }
  .eow-home .row .rmeta{ display:none; }
  .eow-home .brandmark .bm-full{ font-size:27px; }
}