/*
Theme Name: Numeral
Theme URI: https://mahnooraftab.com
Author: Mahnoor Aftab
Author URI: https://mahnooraftab.com
Description: A minimalist, technical/blueprint-style WordPress theme for a precision watch brand. Line-art SVG dials, spec-sheet data rows, and a signature scroll-driven clock hand.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: numeral
*/

:root{
  --paper: #f3f1ec;
  --paper-line: #e7e3da;
  --ink: #14181c;
  --ink-dim: #5b646b;
  --steel: #2e4a5e;
  --steel-bright: #4a7290;
  --red: #c23b2e;
  --line: rgba(20,24,28,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--ink); color:var(--paper); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.display{ font-family:'Space Grotesk', sans-serif; }
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.03em; }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--steel); }

/* ---------- Registration / crosshair marks ---------- */
.crosshair{ position:fixed; width:14px; height:14px; z-index:5; pointer-events:none; opacity:0.5; }
.crosshair::before, .crosshair::after{ content:""; position:absolute; background:var(--ink); }
.crosshair::before{ width:100%; height:1px; top:50%; left:0; }
.crosshair::after{ height:100%; width:1px; left:50%; top:0; }
.ch-tl{ top:20px; left:20px; } .ch-tr{ top:20px; right:20px; }
.ch-bl{ bottom:20px; left:20px; } .ch-br{ bottom:20px; right:20px; }
@media (max-width:780px){ .crosshair{ display:none; } }

/* ---------- Signature: scroll dial ---------- */
.dial-wrap{
  position:fixed; top:24px; right:24px; z-index:60;
  width:52px; height:52px;
}
.dial-wrap svg{ width:100%; height:100%; display:block; }
.dial-hand{ transform-origin:50px 50px; transition:transform 0.08s linear; }
@media (max-width:780px){ .dial-wrap{ width:38px; height:38px; top:16px; right:16px; } }

/* ---------- Nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 7vw;
  background:rgba(243,241,236,0.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; letter-spacing:0.01em; }
.brand span{ color:var(--red); }
.nav-links{ display:flex; gap:34px; }
.nav-links a{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; opacity:0.75; transition:opacity 0.25s; }
.nav-links a:hover{ opacity:1; }
@media (max-width:780px){ .nav-links{ display:none; } }

section{ padding:min(12vh,110px) 7vw; position:relative; }

.fade-in{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.in{ opacity:1; transform:translateY(0); }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:5vw;
  padding-top:140px;
  border-bottom:1px solid var(--line);
}
.hero-copy .eyebrow{ margin-bottom:20px; }
.hero h1{
  font-size:clamp(38px,5.4vw,78px);
  font-weight:600; line-height:1.02;
  letter-spacing:-0.01em;
}
.hero h1 .accent{ color:var(--steel); }
.hero p{
  margin-top:24px; max-width:38ch;
  font-size:16px; line-height:1.7; color:var(--ink-dim);
}
.hero-cta{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.btn{
  padding:14px 26px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
  border:1px solid var(--ink);
  transition:background 0.25s, color 0.25s;
  display:inline-block;
}
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn.solid:hover{ background:var(--steel); border-color:var(--steel); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }

.hero-visual{ display:flex; align-items:center; justify-content:center; position:relative; }
.hero-visual svg{ width:min(100%,420px); height:auto; }
.annot{ position:absolute; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-dim); letter-spacing:0.04em; }
.annot.a1{ top:8%; left:2%; } .annot.a2{ bottom:10%; right:0%; } .annot.a3{ top:46%; right:-4%; }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } .annot{ display:none; } }

/* ---------- Spec strip ---------- */
.spec-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
  padding:0;
}
.spec-item{
  padding:34px 7vw 34px 7vw;
  border-right:1px solid var(--line);
}
.spec-item:last-child{ border-right:none; }
.spec-num{ font-family:'Space Grotesk',sans-serif; font-size:clamp(24px,2.6vw,34px); font-weight:600; }
.spec-label{ margin-top:6px; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; font-family:'JetBrains Mono',monospace; }
@media (max-width:780px){ .spec-strip{ grid-template-columns:1fr 1fr; } .spec-item{ padding:24px 5vw; border-bottom:1px solid var(--line); } }

/* ---------- Section heading ---------- */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:52px; flex-wrap:wrap; gap:14px; }
.sec-head h2{ font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,3.2vw,40px); font-weight:600; }
.sec-head .eyebrow{ margin-bottom:0; }

/* ---------- Collection grid ---------- */
.collection{ border-bottom:1px solid var(--line); }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.watch-card{ background:var(--paper); padding:40px 30px 32px; text-align:center; }
.watch-card svg{ width:150px; height:150px; }
.watch-card h3{ margin-top:22px; font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; }
.watch-card .wc-spec{ margin-top:10px; font-size:11px; color:var(--ink-dim); }
.watch-card .wc-price{ margin-top:16px; font-size:13px; font-family:'JetBrains Mono',monospace; color:var(--steel); }
@media (max-width:780px){ .grid3{ grid-template-columns:1fr; } }

/* ---------- Craft / mechanism ---------- */
.craft{
  display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center;
  border-bottom:1px solid var(--line);
}
.craft-visual{ display:flex; justify-content:center; }
.craft-visual svg{ width:min(100%,360px); height:auto; }
.craft-copy h2{ font-family:'Space Grotesk',sans-serif; font-size:clamp(28px,3.4vw,44px); font-weight:600; line-height:1.08; margin-bottom:20px; }
.craft-copy p{ font-size:16px; line-height:1.75; color:var(--ink-dim); max-width:46ch; margin-bottom:14px; }
@media (max-width:900px){ .craft{ grid-template-columns:1fr; } }

/* ---------- Full spec sheet ---------- */
.specsheet{ border-bottom:1px solid var(--line); }
.specsheet table{ width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:13px; }
.specsheet tr{ border-bottom:1px solid var(--line); }
.specsheet td{ padding:16px 6px; }
.specsheet td:first-child{ color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; font-size:11px; width:40%; }
.specsheet td:last-child{ text-align:right; }

/* ---------- Closing ---------- */
.closing{
  min-height:60svh; display:flex; flex-direction:column; justify-content:center;
  border-bottom:1px solid var(--line);
}
.closing h2{ font-family:'Space Grotesk',sans-serif; font-size:clamp(34px,5.6vw,72px); font-weight:600; line-height:1.02; max-width:16ch; }
.closing h2 .accent{ color:var(--red); }
.closing p{ margin-top:22px; max-width:44ch; color:var(--ink-dim); font-size:16px; line-height:1.7; }
.closing .hero-cta{ margin-top:36px; }

footer.site-footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding:26px 7vw; font-size:11px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace;
}