/* Little Ko — landing page (v1, draft).
   Tokens are copied verbatim from the Little Ko Design System. Everything below is
   page-level layout only; no new colours, radii, shadows or type sizes are invented here.
   Mobile-first: 85%+ of traffic is Instagram-referred mobile. */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* ---------------------------------------------------------------- primitives */

.lk-shell{
  max-width:var(--max-width);
  margin:0 auto;
  padding-inline:var(--gutter-mobile);
}

.lk-section{
  padding-block:var(--section-y-mobile);
}

.lk-rule{
  border:0;
  border-top:1px solid var(--border-subtle);
  margin:0;
}

.lk-wordmark-block{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  border-bottom:0;
}
.lk-wordmark-block:hover{color:inherit}
.lk-wordmark-lockup{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
/* The sleeping koala mark. Tonal clay, so it reads the same on warm white and on ink —
   only the wordmark text changes colour between the two. */
.lk-koala{
  display:block;
  flex:none;
  height:23px;
  width:27.6px;
}
.lk-wordmark-name{
  font-family:var(--font-serif);
  font-weight:var(--weight-regular);
  font-size:22px;
  line-height:1;
  letter-spacing:0.02em;
  color:var(--ink-900);
}
.lk-wordmark-rule{
  font-family:var(--font-sans);
  font-size:9px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.lk-wordmark--reversed .lk-wordmark-name{color:var(--warm-white)}
.lk-wordmark--reversed .lk-wordmark-rule{color:var(--sand-200)}

/* Icons: Lucide (line, 1.5px, rounded caps) rendered as a CSS mask so they inherit
   currentColor. Decorative only — every icon here sits beside its own label. */
.lk-icon{
  display:inline-block;
  flex:none;
  width:16px;
  height:16px;
  background-color:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}

.lk-link-quiet{
  border-bottom:0;
  transition:color var(--duration-base) var(--ease-standard);
}
.lk-link-quiet:hover{color:var(--text-link-hover)}

/* ---------------------------------------------------------------- header */

.lk-header{
  padding-block:var(--space-5);
  border-bottom:1px solid var(--border-subtle);
  background:var(--surface-page);
}
.lk-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
}
.lk-header__status{
  font-family:var(--font-sans);
  font-size:var(--text-eyebrow-size);
  letter-spacing:var(--text-eyebrow-ls);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------------------------------------------------------------- hero */

.lk-hero{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  padding-block:var(--space-8) var(--section-y-mobile);
}
.lk-hero__copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  max-width:520px;
}
.lk-hero__title{
  font-size:clamp(38px,10vw,var(--text-display-1-size));
  line-height:var(--text-display-1-lh);
  letter-spacing:var(--text-display-1-ls);
  margin:0;
}
.lk-hero__title em{
  font-style:italic;
  letter-spacing:0;
}
.lk-hero__promise{
  font-weight:var(--weight-light);
  font-size:var(--text-body-lg-size);
  line-height:var(--text-body-lg-lh);
  color:var(--text-muted);
  max-width:var(--measure-narrow);
}
.lk-hero__gift{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--text-muted);
}
.lk-hero__gift .lk-icon{margin-top:3px}

/* Photography plate. No approved imagery exists yet — this renders a warm neutral
   plate carrying the shot brief, exactly as PhotoFrame does in the design system.
   Drop a real photograph in as an <img> inside .lk-plate and delete .lk-plate__note. */
.lk-plate{
  position:relative;
  aspect-ratio:4 / 5;
  background:var(--sand-200);
  border-radius:var(--radius-image);
  overflow:hidden;
}
.lk-plate img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* Subject sits low in the frame; a centred crop would cut it. */
.lk-plate--low img{object-position:center 68%}
/* Crops a stray red size tag out of the top of the frame. Placeholder-only workaround —
   drop this class when the real flat-lay replaces the stand-in. */
.lk-plate--bottom img{object-position:center bottom}
.lk-plate__note{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:var(--space-4);
  font-family:var(--font-sans);
  font-size:var(--text-caption-size);
  line-height:var(--text-caption-lh);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-500);
}

/* ---------------------------------------------------------------- email capture */

.lk-capture{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  max-width:460px;
}
.lk-capture__row{
  display:flex;
  align-items:stretch;
  gap:0;
  border-bottom:1px solid var(--border-strong);
}
.lk-capture__input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  outline:none;
  font-family:var(--font-sans);
  font-size:var(--text-body-size);
  color:var(--text-strong);
  padding:10px 2px;
}
.lk-capture__input::placeholder{color:var(--text-faint)}
.lk-capture__submit{
  align-self:center;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-strong);
  padding:0 0 1px;
  margin-left:var(--space-4);
  cursor:pointer;
  font-family:var(--font-sans);
  font-weight:var(--weight-medium);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-900);
  transition:color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);
}
.lk-capture__submit:hover{color:var(--text-link-hover);border-color:var(--text-link-hover)}
.lk-capture__submit:active{opacity:0.82}
.lk-capture__submit[disabled]{opacity:0.4;cursor:not-allowed}
.lk-capture__note{
  font-family:var(--font-sans);
  font-size:var(--text-caption-size);
  line-height:var(--text-caption-lh);
  color:var(--text-faint);
}
.lk-capture__message{
  font-family:var(--font-serif);
  font-size:var(--text-heading-3-size);
  line-height:var(--text-heading-3-lh);
  color:var(--text-strong);
}
.lk-capture__error{
  font-family:var(--font-sans);
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--terracotta-600);
}
[hidden]{display:none !important}

/* Reversed capture, for the ink band. */
.lk-capture--dark .lk-capture__row{border-bottom-color:var(--sand-300)}
.lk-capture--dark .lk-capture__input{color:var(--warm-white)}
.lk-capture--dark .lk-capture__input::placeholder{color:var(--ink-300)}
.lk-capture--dark .lk-capture__submit{color:var(--warm-white);border-bottom-color:var(--sand-300)}
.lk-capture--dark .lk-capture__submit:hover{color:var(--clay-300);border-bottom-color:var(--clay-300)}
.lk-capture--dark .lk-capture__note{color:var(--sand-300)}
.lk-capture--dark .lk-capture__message{color:var(--warm-white)}
.lk-capture--dark .lk-capture__error{color:var(--clay-300)}

/* ---------------------------------------------------------------- promise columns */

.lk-columns{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-7);
}
.lk-column{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
}
.lk-column__label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-sans);
  font-size:var(--text-eyebrow-size);
  letter-spacing:var(--text-eyebrow-ls);
  text-transform:uppercase;
  color:var(--text-muted);
}
.lk-column__title{
  font-size:var(--text-heading-3-size);
  line-height:var(--text-heading-3-lh);
}
.lk-column__body{
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-lh);
  color:var(--text-muted);
}

/* ---------------------------------------------------------------- the window */

.lk-window__head{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:var(--measure-prose);
  margin-bottom:var(--space-8);
}
.lk-window__title{
  font-size:clamp(28px,7vw,var(--text-heading-1-size));
  line-height:var(--text-heading-1-lh);
  letter-spacing:var(--text-heading-1-ls);
}
.lk-window__intro{
  color:var(--text-muted);
  max-width:var(--measure-narrow);
}
.lk-window__foot{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-family:var(--font-sans);
  font-size:var(--text-body-sm-size);
  color:var(--text-faint);
}

/* Two-up on mobile. A window should show the range at a glance — six full-width
   plates is a 4,000px scroll and stops reading like a shop. */
.lk-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-7) var(--space-4);
}

.lk-product{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.lk-plate--product{
  aspect-ratio:3 / 4;
  transition:opacity var(--duration-base) var(--ease-standard);
}
.lk-product:hover .lk-plate--product{opacity:0.92}
.lk-product__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  /* Names wrap to different line counts; the call to action still lines up across a row. */
  flex:1;
}
.lk-product__name{
  font-size:17px;
  line-height:1.3;
}
.lk-product__colour{
  font-family:var(--font-sans);
  font-size:var(--text-caption-size);
  line-height:var(--text-caption-lh);
  color:var(--text-muted);
}
/* The shot brief only fits at wider plate sizes; the placeholder stays a plain
   colour plate on small screens rather than clipping mid-word. */
.lk-plate--product .lk-plate__note{display:none}
.lk-product__notify{
  margin-top:auto;
  padding-top:var(--space-3);
  padding:0 0 1px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-strong);
  cursor:pointer;
  font-family:var(--font-sans);
  font-weight:var(--weight-medium);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-900);
  transition:color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);
}
.lk-product__notify:hover{color:var(--text-link-hover);border-color:var(--text-link-hover)}
.lk-product__notify:active{opacity:0.82}
.lk-product__notify.is-noted{color:var(--text-faint);border-color:var(--border-subtle)}

.lk-capture__interest{
  font-family:var(--font-sans);
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--text-muted);
}
.lk-capture--dark .lk-capture__interest{color:var(--sand-200)}

/* ---------------------------------------------------------------- gift band */

.lk-gift{
  background:var(--surface-tint);
}
.lk-gift__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-7);
  align-items:center;
}
.lk-gift__copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:var(--measure-narrow);
}
.lk-gift__title{
  font-size:clamp(28px,7vw,var(--text-heading-1-size));
  line-height:var(--text-heading-1-lh);
  letter-spacing:var(--text-heading-1-ls);
}
.lk-gift__body{color:var(--text-body)}
.lk-gift__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.lk-gift__list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--text-muted);
}
.lk-gift__list .lk-icon{width:15px;height:15px;margin-top:3px}

/* The gift card: hairline border on white, no shadow — per the design system. */
.lk-notecard{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-2);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:420px;
}
.lk-notecard__eyebrow{
  font-family:var(--font-sans);
  font-size:var(--text-eyebrow-size);
  letter-spacing:var(--text-eyebrow-ls);
  text-transform:uppercase;
  color:var(--text-faint);
}
.lk-notecard__body{
  font-family:var(--font-serif);
  font-size:var(--text-heading-3-size);
  line-height:1.5;
  color:var(--text-strong);
}
.lk-notecard__sign{
  font-family:var(--font-sans);
  font-size:var(--text-body-sm-size);
  color:var(--text-muted);
}

/* ---------------------------------------------------------------- who we are */

.lk-about__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-7);
}
.lk-about__copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:var(--measure-prose);
}
.lk-about__title{
  font-size:clamp(26px,6.5vw,var(--text-heading-1-size));
  line-height:var(--text-heading-1-lh);
  letter-spacing:var(--text-heading-1-ls);
}

.lk-details{
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
}
.lk-details__row{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
}
.lk-details dt{
  font-family:var(--font-sans);
  font-size:var(--text-eyebrow-size);
  letter-spacing:var(--text-eyebrow-ls);
  text-transform:uppercase;
  color:var(--text-faint);
}
.lk-details dd{
  margin:0;
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--text-body);
}

/* ---------------------------------------------------------------- footer */

.lk-footer{
  background:var(--surface-ink);
  color:var(--warm-white);
  padding-block:var(--section-y-mobile);
}
.lk-footer a{color:var(--warm-white);border-bottom-color:var(--ink-500)}
.lk-footer a:hover{color:var(--clay-300);border-bottom-color:var(--clay-300)}
.lk-footer__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
}
.lk-footer__capture{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:460px;
}
.lk-footer__prompt{
  font-family:var(--font-serif);
  font-size:var(--text-heading-2-size);
  line-height:var(--text-heading-2-lh);
  letter-spacing:var(--text-heading-2-ls);
  color:var(--warm-white);
}
.lk-footer__meta{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
}
.lk-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-5);
  font-family:var(--font-sans);
  font-size:var(--text-body-sm-size);
}
.lk-footer__links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:0;
  color:var(--sand-200);
}
.lk-footer__links a:hover{color:var(--clay-300)}
.lk-footer__fine{
  font-family:var(--font-sans);
  font-size:var(--text-caption-size);
  line-height:1.8;
  color:var(--ink-300);
}
.lk-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-5);
  justify-content:space-between;
  padding-top:var(--space-5);
  border-top:1px solid var(--ink-700);
  font-family:var(--font-sans);
  font-size:var(--text-caption-size);
  color:var(--ink-300);
}

/* ---------------------------------------------------------------- reveal */

.lk-reveal{
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--duration-reveal) var(--ease-standard),transform var(--duration-reveal) var(--ease-standard);
}
.lk-reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .lk-reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- ≥ 720px */

@media (min-width:720px){
  .lk-columns{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
  .lk-grid{gap:var(--space-8) var(--space-6)}
  .lk-product__name{font-size:var(--text-heading-3-size);line-height:var(--text-heading-3-lh)}
  .lk-product__colour{font-size:var(--text-body-sm-size)}
  .lk-plate--product .lk-plate__note{display:flex}
  .lk-details{grid-template-columns:repeat(3,1fr)}
  .lk-footer__inner{grid-template-columns:1.1fr 1fr;gap:var(--space-9)}
  .lk-footer__meta{align-items:flex-start}
}

/* ---------------------------------------------------------------- ≥ 1000px */

@media (min-width:1000px){
  .lk-shell{padding-inline:var(--gutter-desktop)}
  .lk-section{padding-block:var(--section-y-desktop)}
  .lk-header{padding-block:var(--space-6)}
  .lk-wordmark-name{font-size:26px}
  .lk-wordmark-lockup{gap:10px}
  .lk-koala{height:27px;width:32.4px}

  .lk-hero{
    grid-template-columns:1.05fr 1fr;
    gap:var(--space-9);
    align-items:center;
    padding-block:var(--space-9) var(--section-y-desktop);
  }
  /* Height is set, so the 4:5 ratio derives the width: the hero fits a laptop
     viewport instead of running a 780px plate off the fold. */
  .lk-hero .lk-plate{
    height:min(76vh,700px);
    width:auto;
    max-width:100%;
    justify-self:end;
  }

  .lk-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-9) var(--space-6)}
  .lk-gift__inner{grid-template-columns:1fr 1fr;gap:var(--space-9)}
  .lk-about__inner{grid-template-columns:1fr;gap:var(--space-8)}
  .lk-footer{padding-block:var(--section-y-desktop)}
}