/* =========================================================
   ASHWORTH & CROWN — "No. 04" Editorial Showroom
   Aesthetic: Contemporary design-magazine crossover.
   Cream/ink/terracotta, oversized serif italics, mono captions.
   Asymmetric, grid-breaking, confident negative space.
   ========================================================= */

:root{
  --cream:    #f4efe4;
  --cream-2:  #ebe2d0;
  --ink:      #17130f;
  --ink-soft: rgba(23,19,15,.68);
  --ink-faint:rgba(23,19,15,.42);
  --terracotta: #b1502e;
  --terracotta-deep: #8a3c22;
  --wood:     #8a7457;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Newsreader', Georgia, serif;
  --font-mono:    'Space Mono', monospace;

  --container: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; cursor: default;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background: var(--terracotta); color: var(--cream); }

.mono{ font-family: var(--font-mono); }

.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- cursor tag ---------- */
.cursor-tag{
  position: fixed; top:0; left:0; z-index:999; pointer-events:none;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  background: var(--ink); color: var(--cream); padding: .5rem .9rem; border-radius: 50px;
  opacity:0; transform: translate(-50%,-50%) scale(.6); transition: opacity .25s ease, transform .25s ease;
}
.cursor-tag.active{ opacity:1; transform: translate(-50%,-50%) scale(1); }
@media (pointer:coarse){ .cursor-tag{ display:none; } }

.section{ max-width: var(--container); margin:0 auto; padding: 6.5rem 2rem; }
.section-label{
  display:flex; align-items:center; gap:.7rem; font-family: var(--font-mono); text-transform:uppercase;
  letter-spacing:.08em; font-size:.82rem; color: var(--ink-soft); margin-bottom: 2.4rem;
}
.section-label .mono{ background: var(--ink); color: var(--cream); padding: .2rem .5rem; border-radius: 2px; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-mono);
  text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; background: var(--ink); color: var(--cream);
  padding: 1rem 1.8rem; border-radius: 2px; transition: background .3s ease, transform .3s var(--ease);
}
.btn:hover{ background: var(--terracotta-deep); transform: translateX(4px); }
.text-link{ font-family: var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color: var(--terracotta-deep); display:inline-block; margin-top:.6rem; }
.text-link:hover{ text-decoration: underline; }

/* ---------- header ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:200; padding:1.4rem 0; transition: background .3s ease, padding .3s ease, box-shadow .3s ease; }
.site-header.scrolled{ padding: .9rem 0; background: rgba(244,239,228,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(23,19,15,.08); }
.header-inner{ max-width: var(--container); margin:0 auto; padding:0 2rem; display:flex; align-items:center; gap: 2rem; }
.brand{ font-family: var(--font-display); font-style:italic; font-size:1.4rem; }
.issue-tag{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.05em; color: var(--terracotta-deep); background: rgba(177,80,46,.1); padding:.3rem .6rem; border-radius:20px; }
.main-nav{ display:flex; gap: 1.8rem; margin-left:auto; }
.main-nav a{ font-family: var(--font-mono); font-size:.78rem; letter-spacing:.03em; color: var(--ink-soft); }
.main-nav a:hover{ color: var(--terracotta-deep); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; margin-left:auto; }
.nav-toggle span{ width:20px; height:2px; background: var(--ink); }

/* ---------- hero ---------- */
.hero{ position:relative; padding: 10rem 2rem 5rem; max-width: var(--container); margin:0 auto; overflow:hidden; }
.hero-block{
  position:absolute; top: 4rem; right: -4rem; width: 46%; height: 62%;
  background: linear-gradient(150deg, var(--wood), var(--terracotta-deep));
  border-radius: 2px; z-index:0; opacity:.9;
}
.hero-grid{ position:relative; z-index:1; max-width: 780px; }
.hero-tag{ font-family: var(--font-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color: var(--terracotta-deep); margin-bottom: 1.4rem; }
.hero-title{
  font-family: var(--font-display); font-weight:400; font-size: clamp(3.4rem, 8vw, 6.5rem);
  line-height: .96; margin: 0 0 1.6rem; letter-spacing:-.01em;
}
.hero-title em{ font-style:italic; color: var(--terracotta-deep); }
.hero-caption{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-faint); margin: 0 0 2rem; padding-left: 1rem; border-left: 2px solid var(--terracotta); }
.hero-sub{ font-size:1.2rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 2.4rem; }

/* ---------- ticker ---------- */
.ticker{ background: var(--ink); color: var(--cream); overflow:hidden; padding: .9rem 0; }
.ticker-track{ display:flex; gap: 1rem; white-space:nowrap; width:max-content; animation: ticker 26s linear infinite; font-family: var(--font-mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- bento collections ---------- */
.bento{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 1.4rem; }
.bento-item{
  position:relative; padding: 1.8rem; background: var(--cream-2); border-radius: 3px;
  display:flex; flex-direction:column; transition: transform .4s var(--ease), background .4s var(--ease);
}
.bento-item:hover{ transform: translateY(-5px); background: #e2d5bd; }
.bento-large{ grid-column: span 2; grid-row: span 2; }
.bento-wide{ grid-column: span 2; }
.bento-num{ position:absolute; top:1.4rem; right:1.6rem; font-family: var(--font-mono); color: var(--ink-faint); font-size:.85rem; }
.bento-item svg{ width:42px; height:42px; color: var(--terracotta-deep); margin-bottom:auto; margin-top: .3rem; }
.bento-item h3{ font-family: var(--font-display); font-size:1.5rem; font-weight:400; margin: 1rem 0 .3rem; }
.bento-item p{ color: var(--ink-soft); font-size:.94rem; margin:0 0 .3rem; max-width: 34ch; }

/* ---------- craft ---------- */
.craft-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items:start; margin-bottom: 3.5rem; }
.craft-lede{ font-size: 1.3rem; line-height:1.6; color: var(--ink); }
.dropcap{ font-family: var(--font-display); font-style:italic; font-size: 4rem; float:left; line-height:.75; margin: .05em .12em 0 0; color: var(--terracotta-deep); }
.craft-quote{
  font-family: var(--font-display); font-style:italic; font-size:1.6rem; line-height:1.4; color: var(--ink);
  border-left: 2px solid var(--terracotta); padding-left: 1.6rem; margin:0;
}
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; border-top: 1px solid rgba(23,19,15,.15); padding-top: 2.4rem; }
.stat-row > div{ display:flex; flex-direction:column; }
.stat-num{ font-family: var(--font-display); font-size: 2.6rem; color: var(--terracotta-deep); }
.stat-label{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-faint); margin-top:.3rem; }

/* ---------- gallery ---------- */
.editorial-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.ed-card{
  position:relative; margin:0; background: var(--cream-2); border-radius: 3px; padding: 1.8rem;
  display:flex; flex-direction:column; overflow:hidden; transition: transform .4s var(--ease);
}
.ed-card:hover{ transform: translateY(-6px); }
.ed-tall{ grid-row: span 2; }
.ed-offset{ margin-top: 2.5rem; }
.ghost-num{ position:absolute; top:-0.3em; right:.1em; font-family: var(--font-display); font-size: 5.5rem; color: rgba(23,19,15,.06); font-style:italic; line-height:1; pointer-events:none; }
.ed-card svg{ width: 62%; margin: 1rem auto; color: var(--terracotta-deep); position:relative; z-index:1; transition: transform .5s var(--ease); }
.ed-card:hover svg{ transform: scale(1.05) rotate(-1.5deg); }
.ed-card figcaption{ position:relative; z-index:1; margin-top:auto; }
.ed-card figcaption strong{ display:block; font-family: var(--font-display); font-size:1.2rem; font-weight:400; margin-bottom:.25rem; }
.ed-card figcaption span{ font-family: var(--font-mono); font-size:.76rem; color: var(--ink-faint); }

/* ---------- testimonial ---------- */
.testimonial{ max-width: 760px; margin: 0 auto; padding: 7rem 2rem; text-align:center; position:relative; }
.big-quote{ font-family: var(--font-display); font-style:italic; font-size: 8rem; color: rgba(177,80,46,.18); line-height:0; display:block; margin-bottom: 1.5rem; }
.testimonial-text{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.4rem,2.6vw,2rem); line-height:1.5; margin: 0 0 1.6rem; }
.testimonial-attr{ font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-faint); }

/* ---------- cta ---------- */
.cta-band{ text-align:left; border-top: 1px solid rgba(23,19,15,.15); }
.cta-title{ font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight:400; margin: 0 0 2.2rem; max-width: 640px; }
.cta-title em{ font-style:italic; color: var(--terracotta-deep); }
.cta-form{ display:flex; gap: 1rem; max-width: 520px; flex-wrap:wrap; }
.cta-form input{ flex:1; min-width:220px; background: var(--cream-2); border:1px solid rgba(23,19,15,.15); padding: 1rem 1.2rem; font-family: var(--font-body); font-size:1rem; border-radius:2px; }
.cta-form input:focus{ outline:none; border-color: var(--terracotta); }
.cta-form button{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; background: var(--ink); color: var(--cream); border:none; padding: 1rem 1.6rem; border-radius:2px; transition: background .3s ease; }
.cta-form button:hover{ background: var(--terracotta-deep); }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--cream-2); padding: 5rem 2rem 2rem; }
.footer-grid{ max-width: var(--container); margin: 0 auto 3rem; display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
.footer-brand{ font-family: var(--font-display); font-style:italic; font-size:1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.footer-brand span{ font-family: var(--font-mono); font-style:normal; font-size:.78rem; color: rgba(244,239,228,.5); }
.footer-col h4{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--terracotta); margin:0 0 1rem; }
.footer-col a{ display:block; font-size:.92rem; color: rgba(244,239,228,.75); margin-bottom:.6rem; }
.footer-col a:hover{ color: var(--cream); }
.footer-bottom{ max-width: var(--container); margin:0 auto; display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.04em; color: rgba(244,239,228,.5); flex-wrap:wrap; gap:.5rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .bento{ grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .bento-large{ grid-column: span 2; grid-row: span 1; }
  .editorial-grid{ grid-template-columns: 1fr 1fr; }
  .ed-tall{ grid-row: span 1; }
  .ed-offset{ margin-top:0; }
  .craft-grid{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero-block{ display:none; }
}
@media (max-width: 620px){
  .main-nav{
    display:flex; flex-direction:column; align-items:flex-start; gap: 1.2rem;
    position:fixed; top:0; right:0; height:100vh; width: min(75vw, 300px);
    background: var(--cream); padding: 6rem 2rem 2rem; box-shadow: -8px 0 24px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .4s var(--ease); z-index:150; margin-left:0;
  }
  .main-nav.open{ transform:none; }
  .main-nav a{ font-size:1rem; }
  .nav-toggle{ display:flex; position:relative; z-index:160; }
  .issue-tag{ display:none; }
  .bento{ grid-template-columns: 1fr; }
  .bento-large, .bento-wide{ grid-column: span 1; }
  .editorial-grid{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
}