/* S30 Mt Eden guides site.
   Colours: aqua, white and near black only (brand/PLAYBOOK.md).
   Fonts: the supplied files only, copied unchanged from brand/fonts/.
   Helvetica Now is approved for body text but has not been supplied, so it is not used or imitated. */

@font-face{font-family:'TAN St. Canard';font-weight:850;font-style:normal;font-display:block;src:url('fonts/TAN-St-Canard.otf') format('opentype')}
@font-face{font-family:'Microgramma D OT';font-weight:700;font-style:normal;font-display:block;src:url('fonts/Microgramma-D-OT-Bold-Extended.ttf') format('truetype')}
@font-face{font-family:'Kapra Neue';font-weight:900;font-style:normal;font-display:block;src:url('fonts/KapraNeue-Black.otf') format('opentype')}

:root{
  --aqua:#77F7FF;
  --white:#FFFFFF;
  --black:#111111;
  --gutter:clamp(20px,5vw,48px);
  --logo-w:clamp(240px,24vw,260px);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Microgramma D OT',sans-serif;
  font-weight:700;
  font-size:1rem;
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
::selection{background:var(--aqua);color:var(--black)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 var(--gutter)}
main.wrap{flex:1}

.site-header{padding-top:clamp(24px,5vw,48px);padding-bottom:clamp(24px,5vw,48px)}
/* The supplied lockup PNGs carry transparent padding. The link crops to the visible mark so it lines up
   with the text margin. The image itself is never stretched, recoloured or edited. */
.logo{display:block;overflow:hidden;width:calc(var(--logo-w)*.468);aspect-ratio:379/265}
.logo img{width:var(--logo-w);max-width:none;margin:calc(var(--logo-w)*-.058) 0 0 calc(var(--logo-w)*-.2654)}
.logo:focus-visible,.back:focus-visible,.site-footer a:focus-visible{outline:3px solid var(--aqua);outline-offset:6px}

/* Headline, accent, support line */
.title,.page-title{
  font-family:'TAN St. Canard',sans-serif;
  font-weight:850;
  text-transform:uppercase;
  line-height:1.13;
  overflow-wrap:break-word;
}
.title{font-size:clamp(2.5rem,8vw,5.5rem);margin:clamp(28px,5vw,48px) 0 20px}
.page-title{font-size:clamp(2.75rem,9vw,6rem)}
.aq{color:var(--aqua)}
.support{
  font-family:'Kapra Neue',sans-serif;
  font-weight:900;
  font-size:clamp(1.125rem,2.6vw,1.5rem);
  line-height:1.4;
  margin-top:12px;
}
.desc{
  font-size:clamp(1rem,2.2vw,1.25rem);
  line-height:1.7;
  letter-spacing:.02em;
  max-width:46rem;
  margin-bottom:clamp(32px,5vw,48px);
}

/* Guide page */
.cover{width:100%;height:auto}
.cover.portrait{width:auto;max-width:100%;max-height:min(80vh,760px)}
.opening{margin:0 0 16px}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:560px;
  min-height:80px;
  padding:16px 40px;
  background:var(--aqua);
  color:var(--black);
  font-family:'Microgramma D OT',sans-serif;
  font-weight:700;
  font-size:clamp(1.25rem,3.4vw,1.75rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  margin-bottom:clamp(32px,5vw,48px);
}
.btn:hover{background:var(--white);color:var(--black)}
.btn:focus-visible{outline:3px solid var(--white);outline-offset:4px}
.note{
  font-family:'Kapra Neue',sans-serif;
  font-weight:900;
  font-size:1rem;
  margin:14px 0 clamp(32px,5vw,48px);
}
.back{
  font-family:'Kapra Neue',sans-serif;
  font-weight:900;
  font-size:1.125rem;
}
.back:hover{color:var(--aqua)}

/* Index page */
.intro{margin-bottom:clamp(32px,6vw,56px)}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(28px,4vw,44px) 32px;
  list-style:none;
}
.card{display:block;text-decoration:none;color:var(--white)}
.card:focus-visible{outline:3px solid var(--aqua);outline-offset:8px}
.card img{width:100%;height:auto}
.card h2{
  font-family:'TAN St. Canard',sans-serif;
  font-weight:850;
  font-size:clamp(1.75rem,4vw,2.25rem);
  text-transform:uppercase;
  line-height:1.13;
  overflow-wrap:break-word;
  margin:16px 0 8px;
}
.card p{font-size:1rem;line-height:1.6;letter-spacing:.02em}
.card:hover h2,.card:focus-visible h2{color:var(--aqua)}
.empty{font-size:1.125rem}

.site-footer{
  padding-top:clamp(40px,8vw,72px);
  padding-bottom:clamp(32px,6vw,56px);
  font-family:'Kapra Neue',sans-serif;
  font-weight:900;
  font-size:1rem;
}
.site-footer a:hover{color:var(--aqua)}