/* AnKe Studio - placeholder page
 *
 * Standalone cut-down of the main site's site.css: just the hero, the
 * tagline and the shop pill. No header, so the hero sits flush at the top.
 */

/* Tokens --------------------------------------------------------------- */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-var-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --olive-mid: #848e12;   /* tagline, pill hover */
  --ink: #2a2b24;
  --brand: #919c16;       /* logo olive */
  --band: #ffffff;        /* white bands */
  --pill-bg: #919c16;

  --font: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --container: 72rem;
  --gutter: 1rem;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

@media (min-width: 40em) {
  :root {
    --gutter: 2rem;
  }
}

/* Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff; /* white either side of the print on very wide screens */
  background: var(--band);
  color: #2a2b24;
  color: var(--ink);
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

p {
  margin: 0 0 1.1em;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

::selection {
  background: var(--brand);
  color: #fff;
}

/* Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 72rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
  padding: 0 var(--gutter);
}

/* Page: the hero print is the backdrop for everything. It is shown whole,
   never cropped or scaled past its largest file, and the page is always at
   least as tall as the print. On very wide screens it sits centred with
   white either side. */
.page {
  position: relative;
  max-width: 2400px; /* width of the largest hero file */
  min-height: 133.33vw; /* print is 3:4 */
  margin: 0 auto;
  overflow: hidden;
  background: #3f4a1c; /* shows while the image loads */
}

@media (min-width: 2400px) {
  .page { min-height: 3200px; }
}

.page__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.page__backdrop img {
  width: 100%;
}

/* Hero: a third of the screen over the top of the print, logo centred. */
.hero {
  position: relative;
  z-index: 1;
  height: 33vh;
  height: 33svh;
  min-height: 16rem;
  /* soft shade so the white logo reads on light paper areas */
  background: radial-gradient(ellipse at center, rgba(20, 24, 8, .4) 0%, rgba(20, 24, 8, .1) 60%),
              linear-gradient(to bottom, rgba(20, 24, 8, .35) 0%, rgba(20, 24, 8, 0) 35%);
  color: #fff;
}

.hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero h1 {
  margin: 0;
}

.hero__logo {
  width: 8.75rem;
  width: clamp(6.25rem, 18.75vh, 12.5rem);
  margin: 0 auto .8rem;
  -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .3));
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .3));
}

.hero__tagline {
  margin: 0;
  font-size: 1.45rem;
  font-size: clamp(1.32rem, 1.12rem + .79vw, 1.85rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* Tagline and shop pill in a white band across the print. */
.intro {
  padding: 5.6rem 0;
  text-align: center;
}

.band {
  position: relative;
  z-index: 1;
  background: #fff;
  background: var(--band);
}

.tagline {
  color: #848e12;
  color: var(--olive-mid);
  font-size: 1.79rem;
  font-size: clamp(1.66rem, 1.22rem + 1.51vw, 2.46rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-wrap: balance;
}

.intro__text {
  margin: 0;
}

.intro__text span { /* break after the comma first; each half wraps inside itself if needed */
  display: inline-block;
}

/* Pill button */
.more {
  margin: 2.5rem 0 0;
  text-align: center;
}

.pill {
  display: inline-block;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  background: #919c16;
  background: var(--pill-bg);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  text-transform: uppercase;
  transition: background-color .25s var(--ease), -webkit-transform .25s var(--ease);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.pill:hover {
  background: #848e12;
  background: var(--olive-mid);
  color: #fff;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}