/* ============ FJORD — Scandinavian light-roast bar ============ */

:root{
  --paper:    #f4f4f1;
  --concrete: #e7e7e2;
  --graphite: #1c1c1a;
  --cobalt:   #1f3df0;
  --steel:    #8a8a85;
  --line:     #cfcfca;

  --gutter: clamp(16px, 4vw, 64px);
  --maxw: 1440px;
  --col-gap: clamp(12px, 1.6vw, 28px);

  --t-display: clamp(64px, 16vw, 220px);
  --t-h2:      clamp(40px, 6.5vw, 92px);

  --ease: cubic-bezier(.16,.84,.34,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

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

body{
  background:var(--paper);
  color:var(--graphite);
  font-family:"Familjen Grotesk", sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

.mono, .eyebrow, .section__index, .nav__links a, .cta, .nav__coord,
.table, .datarule, .find__k, .spec__k, .find__coord, .find__legal,
.signup__row button, figcaption{
  font-family:"Martian Mono", monospace;
}

/* ---- shared layout container ---- */
.nav__inner, .hero, .section, .room__head, .room__caption,
.find, .datarule{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ============ VISIBLE HAIRLINE GRID ============ */
.grid-overlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
}
.grid-overlay span{
  border-left:1px solid var(--line);
  opacity:.55;
}
.grid-overlay span:last-child{
  border-right:1px solid var(--line);
}
@media (max-width:760px){
  .grid-overlay span:nth-child(n+7){ display:none; }
  .grid-overlay{ grid-template-columns:repeat(6,1fr); }
}

main, .nav{ position:relative; z-index:1; }

/* ============ NAV ============ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  border-top:1px solid var(--graphite);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:64px;
}
.wordmark{
  font-weight:700;
  font-size:24px;
  letter-spacing:-.04em;
}
.nav__links{
  display:flex;
  gap:clamp(14px,2.4vw,40px);
  margin-left:auto;
}
.nav__links a{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--steel);
  position:relative;
  padding:6px 0;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--cobalt);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__links a:hover{ color:var(--graphite); }
.nav__links a:hover::after{ transform:scaleX(1); }

.cta{
  font-size:11px;
  letter-spacing:.1em;
  background:var(--cobalt);
  color:#fff;
  padding:10px 18px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.cta:hover{ background:var(--graphite); transform:translateY(-1px); }

.nav__coord{
  position:absolute;
  right:var(--gutter);
  top:calc(100% + 6px);
  font-size:9px;
  letter-spacing:.12em;
  color:var(--steel);
}

/* ============ HERO ============ */
.hero{
  padding-top:clamp(48px,9vw,120px);
  padding-bottom:clamp(40px,7vw,96px);
}
.hero__index{
  display:block;
  font-family:"Martian Mono", monospace;
  color:var(--cobalt);
  font-size:13px;
  letter-spacing:.18em;
}
.eyebrow{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--steel);
}
.hero__title{
  font-weight:700;
  font-size:var(--t-display);
  line-height:.82;
  letter-spacing:-.04em;
  margin-top:8px;
  overflow:hidden;
}
.hero__title span{ display:block; }

.hero__lower{
  margin-top:clamp(32px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  row-gap:40px;
  align-items:end;
}
.hero__promise{
  grid-column:1 / span 4;
  align-self:start;
}
.rule--cobalt{
  display:block;
  width:64px; height:2px;
  background:var(--cobalt);
  margin-bottom:24px;
  transform-origin:left;
}
.hero__promise > p:first-of-type{
  font-size:clamp(24px,2.6vw,36px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.05;
}
.hero__sub{
  margin-top:20px;
  max-width:34ch;
  color:var(--steel);
  font-size:15px;
}
.hero__media{
  grid-column:6 / span 7;
}
.hero__media img{
  width:100%;
  aspect-ratio:1800/1400;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
figcaption{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.12em;
  color:var(--steel);
}

/* ============ DATA RULE ============ */
.datarule{
  display:flex;
  align-items:center;
  gap:16px;
  padding-block:18px;
  border-top:1px solid var(--graphite);
  border-bottom:1px solid var(--line);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--graphite);
}
.datarule__line{
  flex:1;
  height:1px;
  background:var(--line);
}

/* ============ SECTION ============ */
.section, .room, .find, .hero{ scroll-margin-top:72px; }
.section{
  padding-block:clamp(72px,11vw,160px);
}
.section__head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  align-items:end;
  margin-bottom:clamp(40px,6vw,80px);
}
.section__index{
  grid-column:1 / span 3;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cobalt);
  padding-bottom:10px;
}
.section__title{
  grid-column:4 / span 8;
  font-weight:600;
  font-size:var(--t-h2);
  line-height:.92;
  letter-spacing:-.035em;
}
.section__lead{
  grid-column:4 / span 6;
  margin-top:22px;
  color:var(--steel);
  font-size:15px;
  max-width:44ch;
}

/* ---- ETHOS ---- */
.ethos__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  row-gap:48px;
}
.ethos__item{
  grid-column:span 4;
  border-top:1px solid var(--graphite);
  padding-top:20px;
}
.ethos__num{
  font-family:"Martian Mono", monospace;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--steel);
}
.ethos__item h3{
  font-weight:600;
  font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.02em;
  margin:14px 0 12px;
}
.ethos__item p{
  color:var(--steel);
  font-size:15px;
  max-width:38ch;
}

/* ============ COFFEE TABLE ============ */
.table{
  font-size:13px;
  letter-spacing:.02em;
}
.table__head{
  display:grid;
  grid-template-columns:1.25fr 1fr .85fr 2fr .75fr;
  column-gap:var(--col-gap);
  padding-bottom:14px;
  border-bottom:1px solid var(--graphite);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--steel);
}
.table__row{
  display:grid;
  grid-template-columns:1.25fr 1fr .85fr 2fr .75fr;
  column-gap:var(--col-gap);
  padding:22px 14px;
  margin-inline:-14px;
  border-bottom:1px solid var(--line);
  align-items:baseline;
  transition:background .22s var(--ease), color .22s var(--ease), transform .26s var(--ease);
}
.table__row > span:first-child{
  font-weight:500;
  letter-spacing:.04em;
}
.table__row span[data-l="NOTES"]{ color:var(--steel); }
.table__row span[data-l="PRICE"]{ color:var(--graphite); }
.ta-r{ text-align:right; }

.table__row:hover{
  background:var(--cobalt);
  color:#fff;
  transform:translateX(6px);
}
.table__row:hover span{ color:#fff !important; }

.coffee__foot{
  margin-top:32px;
  color:var(--steel);
  font-size:14px;
}

/* ============ ROOM (dark) ============ */
.room{
  background:var(--graphite);
  color:var(--paper);
  padding-block:clamp(72px,11vw,160px);
  position:relative;
  z-index:1;
}
.room__head{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  align-items:end;
  margin-bottom:clamp(40px,6vw,72px);
}
.section__index--dark{ color:var(--cobalt); }
.section__title--dark{ color:var(--paper); }
.room__media{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.room__media img{
  width:100%;
  aspect-ratio:2000/1200;
  object-fit:cover;
  filter:saturate(.9) brightness(1.02);
}
.room__media figcaption{ color:var(--steel); }
.room__caption{
  margin-top:clamp(32px,5vw,56px);
  font-size:clamp(18px,1.9vw,24px);
  font-weight:400;
  line-height:1.4;
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}

/* ============ WATER / SPECS ============ */
.specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:var(--col-gap);
  row-gap:40px;
}
.spec{
  border-top:1px solid var(--graphite);
  padding-top:18px;
  display:flex;
  flex-direction:column;
}
.spec__k{
  font-family:"Martian Mono", monospace;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--cobalt);
}
.spec__v{
  font-weight:700;
  font-size:clamp(44px,5vw,72px);
  letter-spacing:-.04em;
  line-height:1;
  margin:18px 0 16px;
}
.spec__v small{
  font-weight:400;
  font-size:.28em;
  letter-spacing:0;
  color:var(--steel);
  margin-left:3px;
  vertical-align:super;
}
.spec__d{
  color:var(--steel);
  font-size:14px;
  max-width:24ch;
}

/* ============ FIND US / FOOTER ============ */
.find{
  padding-top:clamp(72px,11vw,160px);
  padding-bottom:clamp(40px,6vw,72px);
}
.find__head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  align-items:end;
  margin-bottom:clamp(40px,6vw,72px);
}
.find__head .section__index{ grid-column:1 / span 3; }
.find__head .section__title{ grid-column:4 / span 8; }

.find__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:var(--col-gap);
  row-gap:48px;
  border-top:1px solid var(--graphite);
  padding-top:40px;
}
.find__block, .find__signup{ display:flex; flex-direction:column; }
.find__k{
  font-size:10px;
  letter-spacing:.16em;
  color:var(--cobalt);
  margin-bottom:18px;
}
.find__block p, .find__signup p{
  font-size:16px;
  line-height:1.6;
}
.find__block a{
  transition:color .2s var(--ease);
  border-bottom:1px solid transparent;
}
.find__block a:hover{ color:var(--cobalt); border-bottom-color:var(--cobalt); }
.find__coord{
  margin-top:14px;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--steel);
}
.signup__row{
  margin-top:18px;
  display:flex;
  border-bottom:1px solid var(--graphite);
}
.signup__row input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  font-family:"Familjen Grotesk", sans-serif;
  font-size:15px;
  color:var(--graphite);
  padding:8px 0;
}
.signup__row input::placeholder{ color:var(--steel); }
.signup__row input:focus{ outline:none; }
.signup__row button{
  border:0;
  background:transparent;
  color:var(--cobalt);
  font-size:10px;
  letter-spacing:.12em;
  cursor:pointer;
  padding:8px 0 8px 14px;
  white-space:nowrap;
  transition:opacity .2s var(--ease);
}
.signup__row button:hover{ opacity:.6; }

.find__foot{
  margin-top:clamp(64px,10vw,140px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--graphite);
  padding-top:24px;
}
.wordmark--foot{
  font-size:clamp(40px,8vw,96px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:.8;
}
.find__legal{
  font-size:9px;
  letter-spacing:.1em;
  color:var(--steel);
  max-width:30ch;
  text-align:right;
}

/* ============ MOTION ============ */
.reveal{
  opacity:0;
  transform:translateY(14px);
}
.rule--cobalt{ transform:scaleX(0); }
.is-in .reveal,
body.loaded .hero .reveal{
  animation:reveal .7s var(--ease) forwards;
  animation-delay:calc(var(--d,0) * 90ms);
}
.hero .reveal{ --d:0; }
.hero .reveal[data-d="1"]{ --d:1; }
.hero .reveal[data-d="2"]{ --d:2; }
.hero .reveal[data-d="3"]{ --d:3; }
.hero .reveal[data-d="4"]{ --d:4; }

@keyframes reveal{
  to{ opacity:1; transform:translateY(0); }
}
body.loaded .rule--cobalt{
  animation:drawX .6s var(--ease) .5s forwards;
}
@keyframes drawX{ to{ transform:scaleX(1); } }

/* scroll reveal for sections */
.section, .room, .datarule{
  --rev-y:18px;
}
[data-rev]{
  opacity:0;
  transform:translateY(var(--rev-y,18px));
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
[data-rev].is-in{
  opacity:1;
  transform:none;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .find__grid, .specs{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .hero__lower{ grid-template-columns:repeat(6,1fr); }
  .hero__promise{ grid-column:1 / -1; }
  .hero__media{ grid-column:1 / -1; }

  .section__head, .find__head{ grid-template-columns:repeat(6,1fr); display:block; }
  .section__index{ display:block; padding-bottom:14px; }
  .section__title{ display:block; }
  .section__lead{ max-width:none; }

  .ethos__item{ grid-column:1 / -1; }

  /* mono table → stacked cards, NO horizontal scroll */
  .table__head{ display:none; }
  .table__row{
    grid-template-columns:1fr;
    row-gap:9px;
    padding:22px 0;
    margin-inline:0;
  }
  .table__row:hover{ transform:none; }
  .table__row span{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:12px;
    align-items:baseline;
    font-size:11px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .table__row span::before{
    content:attr(data-l);
    color:var(--steel);
    font-size:9px;
    letter-spacing:.12em;
  }
  .table__row:hover span::before{ color:rgba(255,255,255,.6) !important; }
  .table__row span[data-l="NAME"]{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-size:19px;
    letter-spacing:.02em;
    border-bottom:1px solid currentColor;
    padding-bottom:10px;
    margin-bottom:4px;
  }
  .table__row span[data-l="NAME"]::before{ display:none; }
  /* price moves up next to the name for a clean card header */
  .table__row span[data-l="PRICE"]{ grid-template-columns:84px 1fr; }
  .ta-r{ text-align:left; }

  .room__head{ display:block; }

  .find__foot{ flex-direction:column; align-items:flex-start; gap:28px; }
  .find__legal{ text-align:left; max-width:none; }
}

@media (max-width:560px){
  .find__grid, .specs{ grid-template-columns:1fr; }
  /* nav links would overflow the 64px row beside the CTA — drop them, keep wordmark + ORDER */
  .nav__links{ display:none; }
  .nav__inner{ gap:16px; }
  .cta{ margin-left:auto; padding:9px 16px; }
  .nav__coord{ display:none; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal, [data-rev], .rule--cobalt{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
  .table__row, .cta, .nav__links a::after{ transition:none; }
}