@charset "utf-8";

/* ============================================================
   hoaloha — ハワイ・ローカル紹介コンシェルジュ
   palette : windward O‘ahu（コオラウの緑 / 湾の灰青 / ラナイの石）
   type    : Zen Old Mincho（見出し）/ Zen Kaku Gothic New（本文）/ DM Mono（数字）
   ============================================================ */

:root{
  --ink:        #1C2722;   /* コオラウの影 */
  --ink-2:      #26332C;
  --ink-soft:   rgba(28,39,34,.62);
  --paper:      #F1EDE4;   /* 日に焼けたラナイの石 */
  --paper-2:    #E8E3D7;
  --mist:       #C6CCC3;   /* 朝の靄 */
  --line:       rgba(28,39,34,.16);
  --line-ink:   rgba(241,237,228,.18);
  --kai:        #35616A;   /* 湾の水 */
  --kai-lt:     #8AA6A8;
  --cream:      #F4F1E8;

  --dawn:  #94A9B6;
  --noon:  #DCD3BC;
  --dusk:  #C98A4B;
  --night: #2C3A4A;

  --display: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --body:    "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mono:    "DM Mono", ui-monospace, monospace;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 56px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:2;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  line-break:strict;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 20px;
}
.skip:focus{ left:0; }

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

/* ── 共通パーツ ───────────────────────────────── */

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--narrow{ max-width:780px; }

.band{ padding-block:clamp(72px,11vw,136px); }
.band--tight{ padding-top:0; }
.band--paper{ background:var(--paper); }
.band--ink{ background:var(--ink); color:var(--cream); }
.band--day{ background:var(--paper-2); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px; font-weight:400;
  letter-spacing:.22em;
  color:var(--kai);
  margin:0 0 14px;
}
.band--ink .eyebrow{ color:var(--kai-lt); }

.eyebrow--v{ margin:0; }

/* 見出しだけ文節で折り返す（Chrome/Edge）。本文は通常の禁則のまま */
.h2,.hero__title,.flow__t,.day__t,.q summary,.fee__h,.deny,.done__h{
  word-break:auto-phrase;
}

.h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px,3.3vw,34px);
  line-height:1.75;
  letter-spacing:.04em;
  margin:0 0 clamp(24px,3.5vw,40px);
}
.h2--center{ text-align:center; }

.lead{
  font-size:15px;
  color:var(--ink-soft);
  margin:-16px 0 clamp(32px,5vw,56px);
}
.lead--ink{ color:rgba(244,241,232,.72); }

.prose p{ margin:0 0 1.5em; }
.prose p:last-child{ margin-bottom:0; }

.note{
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
  margin:clamp(28px,4vw,44px) 0 0;
}
.band--ink .note{ color:rgba(244,241,232,.66); }
.note--center{ text-align:center; }

.br-sp{ display:none; }

/* ── ヘッダー ─────────────────────────────────── */

.mast{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:18px var(--pad);
  color:var(--cream);
  transition:background .45s ease, color .45s ease, box-shadow .45s ease, padding .45s ease;
}
.mast.is-stuck{
  background:rgba(241,237,228,.94);
  backdrop-filter:blur(10px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
  padding-block:12px;
}

.mast__brand{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; flex:0 0 auto;
}
.mast__mark{
  width:9px; height:9px; border-radius:50%;
  background:var(--kai-lt);
  transform:translateY(-1px);
  flex:0 0 auto;
}
.mast.is-stuck .mast__mark{ background:var(--kai); }
.mast__name{
  font-family:var(--display);
  font-size:21px; letter-spacing:.14em;
}
.mast__kana{
  font-size:10px; letter-spacing:.2em;
  opacity:.72;
}

.mast__nav{
  display:flex; gap:clamp(12px,2vw,26px);
  margin-left:auto;
  font-size:12.5px; letter-spacing:.06em;
}
.mast__nav a{
  text-decoration:none; opacity:.86;
  padding-block:4px;
  border-bottom:1px solid transparent;
  transition:opacity .25s, border-color .25s;
}
.mast__nav a:hover{ opacity:1; border-bottom-color:currentColor; }

.mast__cta{
  flex:0 0 auto;
  font-size:12.5px; letter-spacing:.06em;
  text-decoration:none;
  padding:9px 20px;
  border:1px solid currentColor;
  border-radius:100px;
  transition:background .3s, color .3s;
}
.mast__cta:hover{ background:var(--cream); color:var(--ink); }
.mast.is-stuck .mast__cta:hover{ background:var(--ink); color:var(--cream); }

.mast__toggle{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  background:none; border:0; padding:0; cursor:pointer;
  color:inherit;
  position:relative;
}
.mast__toggle-bar,
.mast__toggle-bar::before,
.mast__toggle-bar::after{
  position:absolute; left:11px; width:22px; height:1px;
  background:currentColor; content:"";
  transition:transform .3s ease, opacity .2s;
}
.mast__toggle-bar{ top:21px; }
.mast__toggle-bar::before{ left:0; top:-7px; }
.mast__toggle-bar::after{ left:0; top:7px; }
.mast__toggle[aria-expanded="true"] .mast__toggle-bar{ background:transparent; }
.mast__toggle[aria-expanded="true"] .mast__toggle-bar::before{ transform:translateY(7px) rotate(45deg); }
.mast__toggle[aria-expanded="true"] .mast__toggle-bar::after{ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ink); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  gap:6px; padding:80px var(--pad) 40px;
  font-family:var(--display); font-size:19px; letter-spacing:.08em;
}
.drawer[hidden]{ display:none; }
.drawer a{
  text-decoration:none; padding:11px 0;
  border-bottom:1px solid var(--line-ink);
}
.drawer__cta{
  margin-top:22px; align-self:flex-start;
  color:var(--ink); background:var(--cream);
  border:0; border-radius:100px;
  padding:13px 34px; font-size:16px; letter-spacing:.12em;
}

/* ── ヒーロー ─────────────────────────────────── */

.hero{
  position:relative;
  height:100svh; min-height:600px;
  overflow:hidden;
  background:var(--ink);
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:50% 40%;
  transform:scale(1.07);
  animation:heroZoom 2.4s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to left, rgba(18,28,24,.72) 0%, rgba(18,28,24,.30) 34%, rgba(18,28,24,0) 62%),
    linear-gradient(to top, rgba(18,28,24,.78) 0%, rgba(18,28,24,.18) 34%, rgba(18,28,24,0) 62%);
}

.hero__type{
  position:absolute;
  top:clamp(96px,15vh,150px);
  right:clamp(20px,5.5vw,84px);
}
.hero__title{
  writing-mode:vertical-rl;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(25px,4.4vw,50px);
  line-height:1.85;
  letter-spacing:.12em;
  color:var(--cream);
  margin:0;
  text-shadow:0 2px 26px rgba(10,18,15,.5);
  animation:riseV 1.5s .35s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes riseV{
  from{ opacity:0; transform:translateY(-26px); }
  to  { opacity:1; transform:none; }
}

.hero__foot{
  position:absolute;
  left:clamp(20px,5.5vw,84px);
  bottom:clamp(30px,7vh,76px);
  max-width:min(30em,72vw);
  color:var(--cream);
  animation:rise 1.4s .85s cubic-bezier(.2,.7,.3,1) both;
}
.hero__sub{
  font-size:clamp(13px,1.5vw,15.5px);
  line-height:2.2;
  margin:0 0 14px;
  text-shadow:0 1px 16px rgba(10,18,15,.55);
}
.hero__where{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.2em;
  color:rgba(244,241,232,.66);
  margin:0;
  padding-top:12px;
  border-top:1px solid rgba(244,241,232,.24);
  display:inline-block;
}
.hero__where span{ color:var(--cream); }

@keyframes rise{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

/* ── はじめに / ご紹介する方（2カラム） ──────────── */

.wrap--split{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.wrap--split .eyebrow--v{
  writing-mode:vertical-rl;
  font-size:11px; letter-spacing:.32em;
  justify-self:start;
  padding-top:6px;
  border-right:1px solid var(--line);
  padding-right:14px;
}
.band--ink .wrap--split .eyebrow--v{ border-right-color:var(--line-ink); }

.wrap--split .h2{ font-size:clamp(21px,2.9vw,31px); }

.facts{ margin:0; padding-top:8px; }
.fact{
  padding:18px 0;
  border-top:1px solid var(--line);
}
.fact:last-child{ border-bottom:1px solid var(--line); }
.facts--ink .fact{ border-top-color:var(--line-ink); }
.facts--ink .fact:last-child{ border-bottom-color:var(--line-ink); }
.fact dt{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em;
  color:var(--kai);
  margin-bottom:4px;
}
.facts--ink .fact dt{ color:var(--kai-lt); }
.fact dd{
  margin:0;
  font-size:14px; line-height:1.95;
}

/* ── 民泊ではありません ───────────────────────── */

.denies{
  max-width:640px; margin-inline:auto;
  display:flex; flex-direction:column; gap:2px;
}
.deny{
  display:flex; align-items:flex-start; gap:16px;
  margin:0; padding:16px 0;
  border-bottom:1px solid var(--line-ink);
  font-size:clamp(15px,1.9vw,18px);
  font-family:var(--display);
  letter-spacing:.06em;
  color:rgba(244,241,232,.6);
}
.deny--yes{ color:var(--cream); border-bottom:0; }

.deny__x,.deny__o{
  flex:0 0 auto;
  width:18px; height:18px;
  margin-top:.55em;
  position:relative;
}
.deny__x::before,.deny__x::after{
  content:""; position:absolute; top:8px; left:0;
  width:18px; height:1px; background:rgba(244,241,232,.42);
}
.deny__x::before{ transform:rotate(45deg); }
.deny__x::after{ transform:rotate(-45deg); }
.deny__o{
  border:1px solid var(--kai-lt); border-radius:50%;
}

/* ── ご紹介の流れ ─────────────────────────────── */

.flow{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.6vw,34px);
}
.flow__step{
  position:relative;
  padding-top:46px;
  border-top:1px solid var(--line);
}
.flow__step::before{
  content:""; position:absolute; top:-3.5px; left:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--kai);
}
.flow__step--last::before{ background:var(--dusk); }

.flow__n{
  position:absolute; top:22px; left:0;
  font-family:var(--display);
  font-size:15px; letter-spacing:.2em;
  color:var(--kai);
  margin:0;
}
.flow__step--last .flow__n{ color:var(--dusk); }

.flow__t{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(16px,1.9vw,19px);
  letter-spacing:.06em;
  line-height:1.7;
  margin:0 0 10px;
}
.flow__d{
  margin:0 0 16px;
  font-size:13.5px; line-height:2.05;
  color:var(--ink-soft);
}
.flow__tag{
  display:inline-block; margin:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--kai);
  border:1px solid var(--line);
  border-radius:100px;
  padding:3px 11px;
}
.flow__tag--paid{ color:var(--dusk); border-color:rgba(201,138,75,.45); }

/* ── ある一日（シグネチャー） ──────────────────── */

.day{ position:relative; }
.day__rail{
  position:absolute;
  top:.7em; bottom:2.6em;
  left:clamp(3.4rem,7vw,5.4rem);
  width:2px;
  background:linear-gradient(to bottom,
    var(--dawn) 0%, var(--dawn) 12%,
    var(--noon) 42%,
    var(--dusk) 76%,
    var(--night) 100%);
  border-radius:2px;
}
.day__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  gap:clamp(26px,4vw,42px);
}
.day__item{
  display:grid;
  grid-template-columns:clamp(3.4rem,7vw,5.4rem) 1fr;
  column-gap:clamp(22px,3.5vw,42px);
  align-items:start;
}
.day__time{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.06em;
  color:var(--ink-soft);
  margin:0; padding-top:.35em;
  text-align:right; padding-right:14px;
}
.day__body{ position:relative; padding-left:2px; }
.day__body::before{
  content:"";
  position:absolute; left:calc(-1 * clamp(22px,3.5vw,42px) - 5px);
  top:.72em;
  width:9px; height:9px; border-radius:50%;
  background:var(--paper-2);
  border:2px solid var(--ink);
}
.day__t{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(16px,2.1vw,20px);
  letter-spacing:.06em;
  line-height:1.7;
  margin:0 0 6px;
}
.day__d{
  margin:0;
  font-size:14px; line-height:2.05;
  color:var(--ink-soft);
  max-width:46em;
}

/* ── 写真帯 ───────────────────────────────────── */

.plate{ margin:0; background:var(--ink); }
.plate img{
  width:100%; height:clamp(320px,56vh,600px);
  object-fit:cover;
}
.plate__cap{
  max-width:var(--wrap); margin-inline:auto;
  padding:14px var(--pad) 22px;
  font-size:12px; letter-spacing:.06em;
  color:rgba(244,241,232,.6);
  text-align:right;
}

/* ── できること ───────────────────────────────── */

.doing{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,40px);
}
.doing__g{ border-top:1px solid var(--ink); padding-top:16px; }
.doing__h{
  font-family:var(--display);
  font-weight:500; font-size:19px; letter-spacing:.2em;
  margin:0 0 10px;
}
.doing__l{ list-style:none; margin:0; padding:0; }
.doing__l li{
  font-size:14px; line-height:1.9;
  padding:7px 0;
  border-bottom:1px solid var(--line);
  color:rgba(28,39,34,.8);
}

/* ── 料金 ─────────────────────────────────────── */

.fee{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.fee__free{
  background:var(--paper-2);
  padding:clamp(24px,3.5vw,40px);
  border-top:2px solid var(--kai);
}
.fee__paid{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(24px,3.5vw,40px);
  border-top:2px solid var(--dusk);
}
.fee__amount{
  font-family:var(--display);
  font-size:clamp(30px,4.4vw,44px);
  letter-spacing:.06em;
  line-height:1.4;
  margin:0 0 10px;
}
.fee__amount--sm{
  font-size:clamp(17px,2.2vw,22px);
  line-height:1.9;
  color:var(--cream);
}
.fee__for{
  font-size:14px; line-height:2; margin:0 0 12px;
}
.fee__note{
  font-size:13px; line-height:2; color:var(--ink-soft); margin:0;
}
.fee__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--dusk); margin:0 0 8px;
}
.fee__h{
  font-family:var(--display); font-weight:500;
  font-size:18px; letter-spacing:.1em; margin:0 0 6px;
}
.fee__cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.5vw,32px);
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line-ink);
}
.fee__sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--kai-lt); font-weight:400;
  margin:0 0 10px;
}
.fee__list{ list-style:none; margin:0; padding:0; }
.fee__list li{
  font-size:13.5px; line-height:1.8;
  padding-left:16px; position:relative;
  margin-bottom:8px;
}
.fee__list li::before{
  content:""; position:absolute; left:0; top:.8em;
  width:6px; height:1px; background:var(--kai-lt);
}
.fee__list--muted li{ color:rgba(244,241,232,.55); }
.fee__list--muted li::before{ background:rgba(244,241,232,.38); }

/* ── よくあるご質問 ───────────────────────────── */

.faq{ border-top:1px solid var(--line); }
.q{ border-bottom:1px solid var(--line); }
.q summary{
  list-style:none; cursor:pointer;
  padding:20px 44px 20px 0;
  position:relative;
  font-family:var(--display);
  font-size:clamp(15px,1.8vw,17px);
  letter-spacing:.05em;
  line-height:1.8;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary::before,
.q summary::after{
  content:""; position:absolute; right:6px; top:calc(50% - .5px);
  width:14px; height:1px; background:var(--kai);
  transition:transform .3s ease;
}
.q summary::after{ transform:rotate(90deg); }
.q[open] summary::after{ transform:rotate(0); }
.q__a{
  padding:0 44px 24px 0;
  animation:fadeIn .4s ease both;
}
.q__a p{
  margin:0; font-size:14px; line-height:2.1; color:var(--ink-soft);
}
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }

/* ── フォーム ─────────────────────────────────── */

.form{
  display:grid; grid-template-columns:1fr 1fr;
  gap:22px clamp(18px,3vw,32px);
  margin-top:8px;
}
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; border:0; padding:0; margin:0; }
.field--wide{ grid-column:1 / -1; }
.field label,
.field legend{
  font-size:12.5px; letter-spacing:.1em;
  color:rgba(244,241,232,.78);
  padding:0;
}
.req{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--dusk); margin-left:8px;
}
.field input,
.field textarea{
  width:100%;
  font:inherit; font-size:15px;
  color:var(--cream);
  background:rgba(244,241,232,.06);
  border:0; border-bottom:1px solid var(--line-ink);
  border-radius:0;
  padding:12px 12px;
  transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; line-height:1.9; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(244,241,232,.34); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--kai-lt);
  background:rgba(244,241,232,.1);
}
.field input:user-invalid{ border-bottom-color:var(--dusk); }

.checks{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:4px;
}
.check{
  display:inline-flex; align-items:center; gap:8px;
  flex:0 0 auto; white-space:nowrap;
  font-size:13.5px; letter-spacing:.04em;
  padding:8px 16px;
  border:1px solid var(--line-ink);
  border-radius:100px;
  cursor:pointer;
  transition:border-color .25s, background .25s;
  color:rgba(244,241,232,.85);
}
.check:hover{ border-color:var(--kai-lt); }
.check input{ accent-color:var(--kai-lt); margin:0; }
.check:has(input:checked){ background:rgba(138,166,168,.18); border-color:var(--kai-lt); }

.honeypot{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.form__privacy{
  grid-column:1 / -1;
  margin:0; font-size:12px; color:rgba(244,241,232,.5);
}
.submit{
  grid-column:1 / -1;
  justify-self:start;
  font:inherit; font-size:14.5px; letter-spacing:.14em;
  font-family:var(--display);
  background:var(--cream); color:var(--ink);
  border:0; border-radius:100px;
  padding:15px 44px;
  cursor:pointer;
  transition:transform .25s ease, background .25s;
}
.submit:hover{ background:#fff; transform:translateY(-2px); }

/* ── フッター ─────────────────────────────────── */

.foot{
  background:var(--ink); color:var(--cream);
  border-top:1px solid var(--line-ink);
  padding-block:clamp(40px,6vw,64px);
}
.wrap--foot{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px clamp(24px,5vw,60px);
  align-items:start;
}
.foot__brand{ display:flex; flex-direction:column; gap:4px; }
.foot__name{
  font-family:var(--display); font-size:22px; letter-spacing:.16em; margin:0;
}
.foot__tag{ font-size:12px; letter-spacing:.1em; color:rgba(244,241,232,.6); margin:0; }
.foot__meta{
  font-size:12.5px; line-height:2; color:rgba(244,241,232,.66);
  text-align:right;
}
.foot__meta p{ margin:0; }
.foot__mail{ font-family:var(--mono); letter-spacing:.08em; }
.foot__copy{
  grid-column:1 / -1;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:rgba(244,241,232,.38);
  margin:0; padding-top:20px;
  border-top:1px solid var(--line-ink);
}

/* ── スクロール演出 ───────────────────────────── */

[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hero__img, .hero__title, .hero__foot, .q__a{ animation:none !important; }
  .hero__img{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ── レスポンシブ ─────────────────────────────── */

@media (max-width: 1000px){
  .mast__nav{ display:none; }
  .mast__cta{ display:none; }
  .mast__toggle{ display:block; }

  .wrap--split{ grid-template-columns:2.6rem minmax(0,1fr); }
  .facts{ grid-column:2; padding-top:0; }

  .flow{ grid-template-columns:1fr 1fr; gap:34px clamp(20px,4vw,40px); }
  .doing{ grid-template-columns:1fr 1fr; }
  .fee{ grid-template-columns:1fr; }
}

@media (max-width: 700px){
  body{ font-size:15px; }
  .br-sp{ display:inline; }

  .hero{ height:92svh; min-height:540px; }
  .hero__img{ object-position:62% 42%; }
  .hero__veil{
    background:
      linear-gradient(to left, rgba(18,28,24,.66) 0%, rgba(18,28,24,.24) 40%, rgba(18,28,24,0) 70%),
      linear-gradient(to top, rgba(18,28,24,.90) 0%, rgba(18,28,24,.42) 26%, rgba(18,28,24,0) 56%);
  }
  .hero__where{ letter-spacing:.1em; }
  .hero__type{ top:clamp(88px,13vh,120px); }
  .hero__title{ font-size:clamp(23px,6.6vw,32px); letter-spacing:.1em; }
  .hero__foot{ max-width:none; right:clamp(20px,5.5vw,84px); }
  .hero__sub{ font-size:13px; }

  .wrap--split{ grid-template-columns:1fr; gap:22px; }
  .wrap--split .eyebrow--v{
    writing-mode:horizontal-tb;
    border-right:0; padding-right:0;
    border-left:1px solid var(--line);
    padding-left:12px;
  }
  .band--ink .wrap--split .eyebrow--v{ border-left-color:var(--line-ink); }
  .facts{ grid-column:1; }

  .flow{ grid-template-columns:1fr; gap:30px; }
  .doing{ grid-template-columns:1fr; gap:26px; }
  .fee__cols{ grid-template-columns:1fr; gap:22px; }

  .day__time{ font-size:11px; padding-right:10px; }

  .form{ grid-template-columns:1fr; }
  .submit{ justify-self:stretch; text-align:center; }

  .wrap--foot{ grid-template-columns:1fr; }
  .foot__meta{ text-align:left; }

  .plate__cap{ text-align:left; }
}