/* Awake Surfboards — v8 */

:root{
  --black:#1f1f1d;
  --ink:#272727;
  --muted:#747474;
  --paper:#f7f7f5;
  --card:#eeeeec;
  --card-border:transparent;
  --line:#d7d7d2;
  --gold:#c5ad91;
  --shadow:none;
  --board-shadow:drop-shadow(0 10px 18px rgba(70,70,70,.12)) drop-shadow(0 2px 6px rgba(70,70,70,.06));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Avenir Next","Montserrat","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.site-header{
  position:relative;
  z-index:20;
  width:100%;
  min-height:92px;
  padding:24px clamp(24px,5vw,78px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--black);
  color:#f1eadc;
}

.brand img{width:clamp(142px,16vw,212px);height:auto}

.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(24px,4vw,58px);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.nav-item{position:relative}

.main-nav > a,
.nav-item > a{
  position:relative;
  display:inline-flex;
  padding-bottom:8px;
}

.main-nav > a::after,
.nav-item > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:currentColor;
  transition:width .25s ease;
}

.main-nav > a:hover::after,
.nav-item > a:hover::after,
.has-mega:hover > a::after{width:100%}

.mega-menu{
  position:absolute;
  top:100%;
  left:0;
  transform:translate(0,12px);
  width:min(720px,calc(100vw - 56px));
  padding-top:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:50;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(0,0);
}

.mega-menu__inner{
  background:rgba(6,6,6,.98);
  border:1px solid rgba(241,234,220,.10);
  padding:26px 32px 28px;
  display:grid;
  grid-template-columns:minmax(185px,.72fr) minmax(260px,1fr);
  gap:32px;
  min-height:276px;
}

.mega-groups{
  padding:0 28px 0 0;
  border-right:1px solid rgba(241,234,220,.35);
}

.mega-group{
  position:relative;
  display:block;
  padding:9px 0 10px;
  color:#f1eadc;
  font-size:14px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:none;
  opacity:.82;
}

.mega-group:hover,
.mega-group:focus,
.mega-group.is-active{opacity:1;color:#fff}

.mega-group.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(241,234,220,.65);
}

.mega-models{padding:0 0 0 4px}
.mega-models__panel{display:none}
.mega-models__panel.is-active{display:block}
.mega-models__panel h4{display:none}

.mega-models a{
  display:block;
  padding:8px 0;
  color:#f1eadc;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:none;
  opacity:.92;
}

.mega-models a:hover{opacity:1;color:#fff}

.menu-toggle{
  display:none;
  width:42px;
  height:36px;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
}

.menu-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:currentColor;
  margin:6px auto;
}

.hero{width:100%;overflow:hidden;background:var(--paper);padding:0}
.hero img{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center center;display:block}
.anchor-offset{height:1px}

.model-section,
.text-section{width:min(1180px,calc(100% - 48px));margin-inline:auto}

.model-section{padding:72px 0 76px;border-bottom:1px solid var(--line);scroll-margin-top:110px}

.model-section h2,
.text-section h2,
.detail-copy h1,
.sizes h2,
.simple-page h1,
.editorial-page h1{
  margin:0;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.08;
}

.model-section h2{color:var(--ink);font-size:clamp(29px,3.9vw,48px);margin-bottom:34px}

.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:28px}

.board-card{
  min-height:430px;
  border:0;
  border-radius:0;
  background:var(--card);
  box-shadow:none;
  padding:28px 18px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  transition:transform .25s ease;
}
.board-card:hover{transform:translateY(-3px)}
.board-card__image-wrap{width:100%;height:330px;display:flex;align-items:center;justify-content:center}
.board-card__image{width:auto;max-width:88%;max-height:100%;object-fit:contain;filter:var(--board-shadow)}
.board-card h3{margin:22px 0 0;font-size:15px;font-weight:600;letter-spacing:.04em;text-align:center}

.text-section{padding:74px 0;border-bottom:1px solid var(--line)}
.text-section h2{color:var(--ink);font-size:clamp(26px,3.4vw,42px)}

.site-footer{
  padding:56px 24px;
  text-align:center;
  color:#bfa78b;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Detail pages */
.detail-main{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:70px 0 90px}
.detail-intro{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(280px,.95fr);gap:clamp(32px,5vw,72px);align-items:center;margin-bottom:58px}
.detail-copy{max-width:620px}
.detail-copy .category{margin:0 0 12px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.detail-copy h1{font-size:clamp(42px,7vw,78px);margin-bottom:22px}
.detail-copy p{margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.detail-board{min-height:620px;border:0;border-radius:0;background:var(--card);box-shadow:none;padding:clamp(22px,4vw,42px);display:flex;align-items:center;justify-content:center}
.detail-board img{max-height:620px;width:auto;object-fit:contain;filter:var(--board-shadow)}
.sizes{margin-top:0;max-width:950px}
.sizes h2{color:var(--ink);font-size:clamp(22px,3vw,34px);margin-bottom:24px}
.table-wrap{overflow-x:auto;border:1px solid var(--card-border);border-radius:0;background:#f1f1ef}
table{width:100%;min-width:0;border-collapse:collapse}
th,td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top}
th{color:#4e4d4a;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
tr:last-child td{border-bottom:0}
.return-link{margin:32px 0 0;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.return-link a:hover{color:var(--ink)}

/* Simple pages */
.page-main{width:min(920px,calc(100% - 48px));margin:0 auto;padding:92px 0 110px;min-height:calc(100vh - 220px)}
.simple-page h1{font-size:clamp(38px,6vw,72px);margin-bottom:34px;color:var(--ink)}
.simple-page p{max-width:760px;margin:0 0 22px;color:#5f5e5a;font-size:19px;line-height:1.75}
.contact-text-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.contact-text-links a{border-bottom:1px solid currentColor;padding-bottom:4px}

/* Editorial pages */
.page-main--editorial{width:min(1220px,calc(100% - 48px));padding:76px 0 108px}
.editorial-page h1{font-size:clamp(38px,5vw,68px);margin-bottom:42px;color:var(--ink)}
.editorial-grid{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(320px,.85fr);gap:clamp(34px,6vw,78px);align-items:center}
.editorial-image{margin:0;background:var(--card);overflow:hidden}
.editorial-image img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:center center}
.editorial-page--sobre .editorial-image img{object-position:center center}
.editorial-page--quilhas .editorial-image img{object-position:center center;filter:contrast(1.02)}
.editorial-page--quilhas .editorial-grid{align-items:center}
.editorial-page--quilhas .editorial-copy h1{margin-bottom:38px}
.editorial-copy{max-width:620px}
.editorial-copy p{margin:0 0 23px;color:#5f5e5a;font-size:19px;line-height:1.75}
.editorial-copy p:last-child{margin-bottom:0}

@media (max-width:920px){
  html{scroll-padding-top:96px}
  .site-header{min-height:78px;padding:20px 22px}
  .menu-toggle{display:block;z-index:22}
  .main-nav{
    position:absolute;
    top:78px;
    right:18px;
    display:none;
    min-width:260px;
    max-width:calc(100vw - 36px);
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    border-radius:0;
    background:rgba(31,31,29,.98);
    color:#f1eadc;
    box-shadow:var(--shadow);
  }
  body.nav-open .main-nav{display:flex}
  .nav-item{width:100%}
  .mega-menu{
    position:static;
    min-width:0;
    width:100%;
    padding-top:16px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .mega-menu__inner{border:0;border-top:1px solid rgba(241,234,220,.14);padding:16px 0 0;display:block;background:transparent;min-height:0}
  .mega-groups{border-right:0;border-bottom:1px solid rgba(241,234,220,.14);padding:0 0 12px;margin-bottom:12px}
  .mega-group{font-size:12px;padding:6px 0;text-transform:uppercase;letter-spacing:.12em}
  .mega-group.is-active::after{display:none}
  .mega-models{padding:0}
  .mega-models__panel{display:block;margin:0 0 12px}
  .mega-models__panel h4{display:block;margin:0 0 6px;color:#c5ad91;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
  .mega-models a{font-size:12px;padding:5px 0}
  .board-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .board-card{min-height:350px;padding:20px 12px 18px}
  .board-card__image-wrap{height:260px}
  .detail-intro{grid-template-columns:1fr}
  .detail-board{min-height:auto}
  .detail-board img{max-height:560px}
  .editorial-grid{grid-template-columns:1fr;gap:28px}
  .editorial-page h1{margin-bottom:30px}
  .editorial-copy{max-width:none}
}

@media (max-width:540px){
  .model-section,.text-section,.detail-main,.page-main{width:min(100% - 28px,1180px)}
  .brand img{width:138px}
  .board-grid{grid-template-columns:1fr}
  .board-card{min-height:392px}
  .board-card__image-wrap{height:304px}
  .main-nav{left:14px;right:14px}
  th,td{padding:13px 9px;font-size:12px}
  th{font-size:10px;letter-spacing:.08em}
  .simple-page p,.editorial-copy p{font-size:17px;line-height:1.68}
  .editorial-image img{aspect-ratio:4/5}
}