/* Lokal + Co — Website #69
   West End Courtyard Café × Produce-Board Modernism
   HTML + CSS only
*/

:root{
  --chalk:#faf8f2;
  --paper:#fffdf8;
  --aubergine:#241a1d;
  --aubergine-2:#46393d;
  --citrus:#ed8d37;
  --cornflower:#9eb9df;
  --oat:#e8ddc8;
  --olivegrey:#b7b8a8;
  --tomato:#cf513e;
  --muted:#726b6c;
  --line:rgba(36,26,29,.16);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Aptos","Helvetica Neue",Arial,sans-serif;
  --condensed:"Arial Narrow","Aptos Narrow",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --max:1460px;
  --gutter:clamp(1.15rem,4vw,4.7rem);
}

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

html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--chalk);
  color:var(--aubergine);
  font-family:var(--sans);
  line-height:1.55;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-underline-offset:.22em}
a:focus-visible{outline:3px solid var(--citrus);outline-offset:4px}

.skip-link{
  position:fixed;z-index:999;top:1rem;left:1rem;
  transform:translateY(-180%);
  padding:.75rem 1rem;
  background:var(--citrus);
  color:var(--aubergine);
  font-weight:800;
  text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}

.masthead{
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  min-height:96px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(210px,.95fr) minmax(450px,2.1fr) minmax(180px,.85fr);
  gap:2rem;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.brand-lockup{display:grid;justify-items:start}
.brand{
  font-family:var(--condensed);
  font-size:1.55rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  text-decoration:none;
}
.brand-lockup span,
.location-ref span,
.section-ref,
.micro,
.food-copy>span,
.footer-address>span,
.legal-ref{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.brand-lockup span{margin-top:.35rem;color:var(--muted)}

.main-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.9rem,2vw,2.1rem);
}
.main-nav a,
.footer-nav a{
  position:relative;
  font-family:var(--condensed);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
}
.main-nav a::after,
.footer-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.35rem;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 180ms ease;
}
.main-nav a:hover::after,
.footer-nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
.location-ref{text-align:right;display:grid;gap:.18rem}
.location-ref span{color:var(--citrus)}
.location-ref strong{
  font-family:var(--condensed);
  font-size:.72rem;
  letter-spacing:.055em;
}

/* Hero */
.hero{
  position:relative;
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  min-height:min(800px,87vh);
  margin:0 auto;
  padding:clamp(3.8rem,7vw,7.1rem) 0 clamp(5rem,9vw,9rem);
  display:grid;
  grid-template-columns:1.08fr .74fr .34fr;
  grid-template-rows:auto 1fr;
  gap:2rem;
  overflow:hidden;
}
.hero-copy{grid-column:1/3;position:relative;z-index:3;max-width:930px}
.micro{
  margin:0 0 1.4rem;
  display:flex;
  align-items:center;
  gap:1rem;
  color:var(--muted);
}
.micro i{
  width:2.15rem;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid var(--tomato);
  border-radius:50%;
  background:var(--oat);
  color:var(--tomato);
  font-style:normal;
}
.hero h1,
.legal-hero h1{
  max-width:11ch;
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(4.15rem,8.25vw,8.75rem);
  line-height:.88;
  letter-spacing:-.062em;
}
.hero-lede{
  max-width:630px;
  margin:2rem 0 1.5rem;
  font-size:clamp(1.08rem,1.65vw,1.36rem);
  color:var(--aubergine-2);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.65rem 0;
  border-bottom:1px solid currentColor;
  font-family:var(--condensed);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
.text-link span{transition:transform 180ms ease}
.text-link:hover span{transform:translateX(5px)}

.hero-main,
.hero-detail,
.photo-espresso,
.photo-drinks,
.counter-photo,
.community-photo,
.location-photo{
  margin:0;
  position:relative;
  overflow:hidden;
  background-color:var(--olivegrey);
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.hero-main::after,
.hero-detail::after,
.photo-espresso::after,
.photo-drinks::after,
.counter-photo::after,
.community-photo::after,
.location-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(36,26,29,.02),rgba(36,26,29,.14)),
    linear-gradient(120deg,rgba(237,141,55,.09),transparent 46%);
  mix-blend-mode:multiply;
}

.photo-courtyard{
  background-image:
    linear-gradient(0deg,rgba(36,26,29,.04),rgba(36,26,29,.01)),
    url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?auto=format&fit=crop&w=1600&q=85");
}
.photo-coffee-detail{
  background-image:
    linear-gradient(0deg,rgba(36,26,29,.04),rgba(36,26,29,.01)),
    url("https://images.unsplash.com/photo-1498804103079-a6351b050096?auto=format&fit=crop&w=1000&q=85");
}
.photo-espresso{
  background-image:
    linear-gradient(0deg,rgba(36,26,29,.18),rgba(36,26,29,.03)),
    url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=85");
}
.photo-drinks{
  background-image:url("https://images.unsplash.com/photo-1546171753-97d7676e4602?auto=format&fit=crop&w=1400&q=85");
}
.photo-plating{
  background-image:url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&q=85");
}
.photo-table{
  background-image:url("https://images.unsplash.com/photo-1528605248644-14dd04022da1?auto=format&fit=crop&w=1600&q=85");
}
.photo-westend{
  background-image:
    linear-gradient(0deg,rgba(36,26,29,.18),rgba(36,26,29,.03)),
    url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1600&q=85");
}

.hero-main{
  grid-column:2/4;
  grid-row:2;
  min-height:400px;
  align-self:end;
}
.hero-detail{
  grid-column:1;
  grid-row:2;
  width:min(76%,320px);
  min-height:225px;
  align-self:end;
  transform:translateY(1.3rem);
}
.hero-main figcaption,
.hero-detail figcaption,
.photo-espresso figcaption,
.photo-drinks figcaption,
.counter-photo figcaption,
.community-photo figcaption,
.location-photo figcaption{
  position:absolute;
  left:1rem;
  bottom:1rem;
  max-width:calc(100% - 2rem);
  padding:.46rem .62rem;
  background:rgba(250,248,242,.94);
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.produce-board{
  position:absolute;
  right:0;
  top:5.2rem;
  width:132px;
  display:grid;
}
.produce-board span{
  padding:.44rem .58rem;
  border:1px solid var(--line);
  border-bottom:0;
  background:var(--paper);
  font-family:var(--mono);
  font-size:.57rem;
  letter-spacing:.07em;
}
.produce-board span:nth-child(1){background:var(--oat)}
.produce-board span:nth-child(2){background:var(--cornflower)}
.produce-board span:nth-child(3){background:#f7c6ae}
.produce-board span:last-child{border-bottom:1px solid var(--line);background:#e2ddcc}
.table-circle{
  position:absolute;
  right:27%;
  bottom:2.7rem;
  width:82px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid var(--tomato);
  border-radius:50%;
  background:var(--chalk);
  z-index:4;
}
.table-circle small{
  font-family:var(--mono);
  font-size:.53rem;
}
.table-circle b{
  font-family:var(--condensed);
  font-size:2rem;
  line-height:1;
  color:var(--tomato);
}

/* Shared */
.section-shell{
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(150px,.55fr) minmax(0,2.45fr);
  gap:clamp(2rem,6vw,7rem);
}
.section-ref{margin:0;color:var(--citrus)}
.section-side{position:relative}
.side-note{
  max-width:14rem;
  margin:7rem 0 0;
  color:var(--muted);
  font-family:var(--serif);
  font-style:italic;
}
.kicker{
  margin:0 0 1rem;
  color:var(--tomato);
  font-family:var(--condensed);
  font-size:.83rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.section-main h2,
.food-head h2,
.community h2{
  max-width:13ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.05rem,5.8vw,6.6rem);
  font-weight:600;
  line-height:.94;
  letter-spacing:-.05em;
}

.intro{
  padding:clamp(5.5rem,10vw,9.5rem) 0;
  border-top:1px solid var(--line);
}
.intro-copy{
  max-width:1030px;
  margin-top:3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);
}
.intro-copy p{margin:0;color:var(--aubergine-2);font-size:1.03rem}

/* Food */
.food-section{
  padding:clamp(5rem,9vw,9rem) 0 0;
  background:var(--oat);
  border-top:1px solid var(--line);
}
.food-head{padding-bottom:clamp(3rem,6vw,6rem)}
.food-grid{
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .9fr 1.05fr;
  gap:1px;
  padding-bottom:clamp(5rem,9vw,9rem);
}
.coffee-panel,
.brunch-panel,
.drinks-panel{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border:1px solid var(--line);
}
.coffee-panel{background:var(--aubergine);color:var(--chalk)}
.brunch-panel{background:var(--citrus)}
.drinks-panel{background:var(--cornflower)}
.photo-espresso,
.photo-drinks{
  position:absolute;
  inset:0 0 37% 0;
}
.food-copy{
  position:absolute;
  left:clamp(1.4rem,3vw,2.8rem);
  right:clamp(1.4rem,3vw,2.8rem);
  bottom:clamp(1.4rem,3vw,2.8rem);
  z-index:3;
}
.food-copy>span{opacity:.78}
.food-copy h3{
  margin:.8rem 0 .65rem;
  font-family:var(--serif);
  font-size:clamp(2.8rem,4.5vw,5rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.05em;
}
.food-copy p{max-width:28rem;margin:0}
.light-copy{color:var(--chalk)}
.ingredient-lines{
  position:absolute;
  inset:9% 11% 46%;
  display:grid;
  align-content:center;
  gap:1rem;
}
.ingredient-lines i{
  height:1px;
  background:rgba(36,26,29,.26);
  position:relative;
}
.ingredient-lines i::before{
  content:"";
  position:absolute;
  left:0;
  top:-4px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--tomato);
}

/* Counter */
.counter{
  padding:clamp(6rem,10vw,10rem) 0;
  border-top:1px solid var(--line);
}
.counter-rail{
  width:1px;
  height:520px;
  margin:2rem 0 0 1rem;
  background:repeating-linear-gradient(to bottom,var(--citrus) 0 1px,transparent 1px 15px);
}
.counter-layout{
  margin-top:3.4rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
}
.service-sequence{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.service-sequence li{
  display:grid;
  grid-template-columns:55px minmax(100px,.7fr) 1.7fr;
  gap:1rem;
  align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px solid var(--line);
}
.service-sequence span{font-family:var(--mono);font-size:.64rem;color:var(--citrus)}
.service-sequence strong{font-family:var(--condensed);letter-spacing:.05em}
.service-sequence p{margin:0;color:var(--muted)}
.counter-photo{min-height:430px}
.receipt-note{
  margin-top:2.2rem;
  max-width:780px;
  padding:1.2rem 1.25rem;
  border:1px solid var(--line);
  background:#d9e3f2;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:1rem;
}
.receipt-note span{
  font-family:var(--mono);
  font-size:.63rem;
  color:var(--tomato);
}
.receipt-note p{margin:0}

/* Community */
.community{
  position:relative;
  padding:clamp(6rem,10vw,10rem) var(--gutter);
  background:#d6d4c5;
  overflow:hidden;
}
.community-inner{
  width:min(100%,var(--max));
  margin:0 auto;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(3rem,8vw,9rem);
  align-items:center;
}
.community-copy>p:last-child{
  max-width:590px;
  margin-top:2rem;
  color:var(--aubergine-2);
}
.community-photo{min-height:500px}
.produce-tag{
  position:absolute;
  right:5%;
  top:2.8rem;
  width:110px;
  padding:.8rem;
  background:var(--oat);
  border:1px solid var(--line);
}
.produce-tag span{
  display:block;
  font-family:var(--mono);
  font-size:.53rem;
}
.produce-tag b{
  display:block;
  margin-top:.5rem;
  font-family:var(--condensed);
  font-size:2.4rem;
  line-height:1;
  color:var(--tomato);
}

/* Location */
.location{
  position:relative;
  min-height:740px;
  padding:clamp(5rem,9vw,8.5rem) var(--gutter);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(3rem,8vw,9rem);
  background:var(--aubergine);
  color:var(--chalk);
}
.location-copy,
.location-photo{width:100%;max-width:730px}
.location-copy{
  position:relative;
  z-index:2;
  justify-self:end;
  align-self:center;
}
.location-label{
  margin:1rem 0 0;
  font-family:var(--condensed);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.location-copy h2{
  margin:1rem 0 0;
  font-family:var(--serif);
  font-size:clamp(4rem,8vw,8.35rem);
  font-weight:600;
  line-height:.85;
  letter-spacing:-.06em;
}
.location-copy h2 span{
  display:block;
  color:var(--citrus);
  font-family:var(--condensed);
  font-weight:900;
  letter-spacing:-.04em;
}
.city-ref{
  margin:1.4rem 0 3rem;
  color:#b5c8ee;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.09em;
}
.location-copy address,
.footer-address address{font-style:normal}
.location-copy address{margin:0 0 3rem;font-size:1.03rem}
.citrus-ref{color:var(--citrus)}
.light-link{color:var(--chalk)}
.location-photo{min-height:550px;align-self:center}
.street-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(237,141,55,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,141,55,.28) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(90deg,transparent,black 38%,black);
}
.courtyard-ring{
  position:absolute;
  width:190px;
  height:190px;
  left:43%;
  bottom:-90px;
  border:1px solid rgba(237,141,55,.78);
  border-radius:50%;
}
.courtyard-ring span{
  position:absolute;
  top:18%;
  left:12%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--tomato);
}

/* Footer */
.footer{
  padding:clamp(3rem,6vw,5rem) var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:3rem;
  align-items:end;
  background:var(--aubergine);
  color:var(--chalk);
  border-top:1px solid rgba(250,248,242,.15);
}
.footer-brand{display:grid}
.footer-brand strong{
  font-family:var(--condensed);
  font-size:clamp(2.8rem,5.6vw,5.8rem);
  line-height:.8;
  letter-spacing:-.055em;
}
.footer-brand span{
  margin-top:.8rem;
  color:var(--citrus);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.08em;
}
.footer-address{display:grid;gap:1rem}
.footer-address>span{color:#b5c8ee}
.footer-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem 2rem;
  justify-items:start;
}

/* Legal */
.legal-shell{
  width:min(calc(100% - 2 * var(--gutter)),1180px);
  margin:0 auto;
  padding-bottom:clamp(5rem,9vw,9rem);
}
.legal-hero{
  padding:clamp(4rem,9vw,9rem) 0 clamp(4rem,7vw,7rem);
  border-bottom:1px solid var(--line);
}
.legal-hero h1{
  max-width:10ch;
  font-size:clamp(3.5rem,7.4vw,7.7rem);
}
.legal-hero>p:last-child{
  max-width:620px;
  margin:2rem 0 0;
  color:var(--muted);
  font-size:1.06rem;
}
.legal-section{
  display:grid;
  grid-template-columns:150px minmax(0,780px);
  gap:clamp(2rem,8vw,8rem);
  padding:clamp(4rem,7vw,7rem) 0;
  border-bottom:1px solid var(--line);
}
.legal-ref{padding-top:.6rem;color:var(--citrus)}
.legal-copy h2{
  margin:0 0 3rem;
  font-family:var(--serif);
  font-size:clamp(3rem,5vw,5.2rem);
  font-weight:600;
  line-height:.96;
  letter-spacing:-.045em;
}
.legal-copy h3{
  margin:2.5rem 0 .6rem;
  font-family:var(--condensed);
  font-size:.93rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.legal-copy p{margin:0;color:var(--aubergine-2)}
.legal-return{padding-top:3rem}

/* Tablet */
@media (max-width:1100px){
  .masthead{
    grid-template-columns:1fr 1.4fr;
    padding:1.2rem 0;
  }
  .main-nav{
    grid-column:1/-1;
    grid-row:2;
    justify-content:flex-start;
    padding-top:.9rem;
    border-top:1px solid var(--line);
  }
  .location-ref{grid-column:2;grid-row:1}
  .hero{
    grid-template-columns:1.1fr .9fr;
    grid-template-rows:auto auto;
  }
  .hero-copy{grid-column:1/-1}
  .hero-main{grid-column:1/-1;min-height:420px}
  .hero-detail{display:none}
  .table-circle{right:4%}
  .food-grid{grid-template-columns:1fr 1fr}
  .drinks-panel{grid-column:1/-1;min-height:430px}
  .community-inner{grid-template-columns:1fr 1fr}
  .footer{grid-template-columns:1fr 1fr}
  .footer-nav{
    grid-column:1/-1;
    grid-template-columns:repeat(4,minmax(0,1fr));
    padding-top:1.5rem;
    border-top:1px solid rgba(250,248,242,.15);
  }
}

/* Mobile */
@media (max-width:760px){
  :root{--gutter:1.15rem}
  html{scroll-padding-top:1rem}

  .masthead{
    min-height:auto;
    grid-template-columns:1fr auto;
    gap:1rem;
  }
  .brand{font-size:1.3rem}
  .location-ref strong{display:none}
  .location-ref span{font-size:.56rem}
  .main-nav{gap:.55rem 1rem;padding-bottom:.2rem}
  .main-nav a{font-size:.68rem}

  .hero{
    min-height:auto;
    display:block;
    padding:4rem 0 5rem;
  }
  .hero h1{font-size:clamp(3.6rem,18vw,6rem);max-width:9ch}
  .hero-lede{margin-top:1.5rem}
  .hero-main{min-height:340px;margin-top:3rem}
  .produce-board,
  .table-circle{display:none}

  .section-shell{grid-template-columns:1fr}
  .intro,
  .counter{padding-block:5rem}
  .side-note{margin:1rem 0 2.5rem}
  .section-main h2,
  .food-head h2,
  .community h2{
    font-size:clamp(2.8rem,14vw,4.8rem);
  }
  .intro-copy{grid-template-columns:1fr;gap:1.2rem}

  .food-section{padding-top:5rem}
  .food-grid{grid-template-columns:1fr}
  .coffee-panel,
  .brunch-panel,
  .drinks-panel{
    grid-column:auto;
    min-height:430px;
  }

  .counter-rail{display:none}
  .counter-layout{grid-template-columns:1fr}
  .service-sequence li{grid-template-columns:42px 1fr}
  .service-sequence p{grid-column:2}
  .counter-photo{min-height:340px}
  .receipt-note{grid-template-columns:1fr}

  .community{padding-block:5rem}
  .community-inner{grid-template-columns:1fr;gap:2rem}
  .community-photo{min-height:360px}
  .produce-tag{display:none}

  .location{
    min-height:auto;
    grid-template-columns:1fr;
    padding-block:5rem;
  }
  .location-copy{justify-self:start}
  .location-copy h2{font-size:clamp(4rem,18vw,6.6rem)}
  .location-photo{min-height:370px}

  .footer{grid-template-columns:1fr;padding-block:3rem}
  .footer-nav{grid-column:auto;grid-template-columns:1fr 1fr}

  .legal-section{grid-template-columns:1fr;gap:1.2rem}
  .legal-hero h1{font-size:clamp(3.4rem,17vw,6.3rem)}
}

@media (max-width:390px){
  .main-nav{display:grid;grid-template-columns:repeat(3,1fr)}
  .location-ref{max-width:108px}
  .hero h1{font-size:3.45rem}
  .footer-nav{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{transition-duration:.01ms!important}
}