/* Kihana — kihanamaui.com
   Hand-built, no framework. Mobile-first; breakpoints at 48em and 72em. */

@font-face{font-family:Archivo;font-style:normal;font-weight:400 900;font-stretch:62% 100%;font-display:swap;src:url(../fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plexmono-regular.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plexmono-medium.woff2) format("woff2")}

:root{
  --coal:#151714; --coal-2:#22251f; --coal-line:rgba(239,236,228,.22);
  --bone:#efece4; --bone-2:#d9d5c9; --paper:#f7f5ef;
  --oxide:#c4512a; --oxide-dark:#a8421f; --moss:#5d7343; --mute:#8b8d84; --text-2:#4a4c45;
  --sans:Archivo,"Arial Narrow",system-ui,sans-serif; --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:80rem; --gutter:1rem;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{background:var(--bone);color:var(--coal);font:400 1rem/1.55 var(--sans);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--oxide);outline-offset:2px}
.wrap{width:min(100% - 2*var(--gutter), var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--oxide);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem}
.mono,.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;font-weight:400}
.label{text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- type ---------- */
.display,h1{font:850 clamp(3rem,12vw,8.5rem)/.86 var(--sans);font-stretch:68%;text-transform:uppercase;letter-spacing:-.01em}
h2,.h2{font:850 clamp(2.1rem,6vw,3.9rem)/.9 var(--sans);font-stretch:70%;text-transform:uppercase}
h3,.h3{font:800 1.45rem/1.05 var(--sans);font-stretch:75%;text-transform:uppercase}
.lede{font-size:1.12rem;line-height:1.5;max-width:38ch}
.prose p+p{margin-top:1em}
.prose{max-width:62ch}

/* ---------- status bar ---------- */
.status{background:var(--coal);color:var(--bone-2);font:400 .76rem/1 var(--mono)}
.status-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.55rem}
.status-links{display:flex;gap:1.25rem}
.status a{text-decoration:none}
.status a:hover{color:#fff}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--mute);margin-right:.5rem;vertical-align:.02em}
.is-open .dot{background:#7bd26a;box-shadow:0 0 0 3px rgba(123,210,106,.22)}
.hide-sm{display:none}

/* ---------- header ---------- */
.site-header{background:var(--coal);color:var(--bone)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding-block:.9rem .7rem}
.mark{font:800 1.65rem/1 var(--sans);font-stretch:75%;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none;color:inherit}
.mark i{font-style:normal;color:var(--oxide)}
.nav{display:flex;gap:1.25rem;width:100%;overflow-x:auto;font:600 .8rem/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;padding-block:.5rem .25rem;scrollbar-width:none}
.nav a{text-decoration:none;white-space:nowrap;opacity:.85;padding-bottom:.3rem;border-bottom:2px solid transparent}
.nav a:hover{opacity:1}
.nav a[aria-current]{opacity:1;border-color:var(--oxide)}

/* Home: status + header float over the hero photo */
.home .site-header{position:absolute;inset-inline:0;z-index:3;background:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 .92rem/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;padding:1rem 1.25rem;text-decoration:none;border:2px solid currentColor;background:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn.solid{background:var(--coal);border-color:var(--coal);color:var(--bone)}
.on-dark .btn.solid,.btn.light{background:var(--bone);border-color:var(--bone);color:var(--coal)}
.btn:hover,.btn.solid:hover,.btn.light:hover{background:var(--oxide);border-color:var(--oxide);color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.tag{display:inline-block;background:var(--oxide);color:#fff;padding:.3rem .55rem;font:400 .76rem/1.2 var(--mono)}
.link{font-weight:700;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--oxide);padding-bottom:.15rem}
.link:hover{color:var(--oxide)}

/* ---------- home hero ---------- */
.hero{position:relative;color:var(--bone);background:var(--coal);isolation:isolate;overflow:hidden}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,23,20,.7) 0%,rgba(21,23,20,.2) 30%,rgba(21,23,20,.45) 60%,rgba(21,23,20,.94) 100%)}
.hero-body{padding-block:clamp(10rem,26vh,13rem) 2rem}
.hero h1{margin-top:1rem;font-size:clamp(3rem,10.5vw,7.25rem)}
.hero .lede{color:var(--bone-2);margin-top:1.25rem}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--coal-line);margin-top:3rem;list-style:none;padding:0}
.facts li{padding:1rem 1rem 1.1rem 0;border-bottom:1px solid var(--coal-line)}
.facts b{display:block;font:800 1.5rem/1 var(--sans);font-stretch:75%;text-transform:uppercase;margin-bottom:.35rem}
.facts span{font:400 .76rem/1.3 var(--mono);color:var(--bone-2)}

/* ---------- inner page hero ---------- */
.page-hero{background:var(--coal);color:var(--bone);padding-block:2.5rem 0;overflow:hidden}
.page-hero-grid{display:grid;gap:2rem}
.page-hero h1{font-size:clamp(2.9rem,11vw,7rem);margin-top:.9rem}
.page-hero .lede{color:var(--bone-2);margin-top:1.1rem}
.page-hero figure{margin-inline:calc(-1*var(--gutter))}
.page-hero figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.page-hero .cta{margin-bottom:.5rem}

/* ---------- sections ---------- */
.section{padding-block:3.5rem}
.section.tight{padding-top:0}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;border-bottom:3px solid var(--coal);padding-bottom:1rem;margin-bottom:1.75rem}
.section-head p{max-width:42ch;color:var(--text-2)}
.section-head .mono{color:var(--text-2)}
.dark{background:var(--coal);color:var(--bone)}
.dark .section-head{border-color:var(--bone)}
.dark .section-head p,.dark .section-head .mono{color:var(--bone-2)}
.paper{background:var(--paper)}

/* department grid */
.grid4{display:grid;gap:1px;background:var(--coal);border:1px solid var(--coal)}
.dept{background:var(--bone);display:grid;grid-template-columns:7rem 1fr;text-decoration:none;transition:background-color .15s}
.dept picture img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.dept-body{padding:1rem 1.1rem}
.dept .code{color:var(--oxide)}
.dept h3{margin:.35rem 0 .5rem}
.dashes{list-style:none;padding:0;color:var(--text-2);font-size:.92rem}
.dashes li::before{content:"— ";color:var(--mute)}
.dept:hover{background:#fff}
.dept:hover h3{color:var(--oxide)}

/* split: copy + image */
.split{display:grid;gap:2rem;align-items:center}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split h2{margin-bottom:1.1rem}

/* numbered list (pro pitch, steps) */
.numbered{list-style:none;padding:0;counter-reset:n;display:grid;gap:0}
.numbered li{counter-increment:n;display:grid;grid-template-columns:3rem 1fr;gap:.25rem 1rem;padding:1.1rem 0;border-top:1px solid var(--coal-line)}
.numbered li::before{content:counter(n,decimal-leading-zero);font:400 .8rem/1.9 var(--mono);color:var(--oxide)}
.numbered b{display:block;font:800 1.3rem/1.1 var(--sans);font-stretch:75%;text-transform:uppercase;margin-bottom:.25rem}
.numbered p{color:var(--bone-2);grid-column:2}
.light-list li{border-color:rgba(21,23,20,.18)}
.light-list p{color:var(--text-2)}

/* conditions trio (homeowner help) */
.trio{display:grid;gap:1px;background:rgba(21,23,20,.18);border-block:1px solid rgba(21,23,20,.18)}
.trio > div{background:var(--paper);padding:1.25rem 0}
.trio .h3{display:block;margin:.4rem 0 .5rem}
.trio p{color:var(--text-2);max-width:40ch}

/* plant picks table */
.picks{width:100%;border-collapse:collapse;font-size:.95rem}
.picks caption{text-align:left;margin-bottom:1rem;color:var(--text-2)}
.picks th,.picks td{text-align:left;padding:.85rem .75rem .85rem 0;border-bottom:1px solid rgba(21,23,20,.15);vertical-align:top}
.picks thead th{font:400 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);border-bottom:2px solid var(--coal)}
.picks tbody th{font-weight:700}
.picks tbody th small{display:block;font:400 .75rem/1.3 var(--mono);color:var(--mute);margin-top:.15rem}
.chip{display:inline-block;font:400 .7rem/1 var(--mono);padding:.3rem .45rem;border:1px solid currentColor;margin:0 .25rem .25rem 0;white-space:nowrap}
.chip.yes{background:var(--moss);border-color:var(--moss);color:#fff}
.table-scroll{overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
.picks{min-width:38rem}

/* department detail (what we carry) */
.dept-detail{display:grid;gap:1.5rem;padding-block:3rem;border-top:3px solid var(--coal)}
.dept-detail:first-of-type{border-top:0}
.dept-detail .code{color:var(--oxide)}
.dept-detail h2{margin:.5rem 0 1rem}
.dept-detail .prose{color:var(--text-2)}
.cols{columns:2;column-gap:1.5rem;margin-top:1.25rem}
.cols li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid rgba(21,23,20,.12)}
.photos{display:grid;grid-template-columns:2fr 1fr;gap:.5rem}
.photos picture:first-child{grid-row:span 2}
.photos img{width:100%;height:100%;object-fit:cover}
.photos picture:first-child img{aspect-ratio:3/4}
.photos picture:not(:first-child) img{aspect-ratio:1}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.jump a{font:400 .78rem/1 var(--mono);padding:.55rem .7rem;border:1px solid var(--coal-line);text-decoration:none;color:var(--bone)}
.jump a:hover{background:var(--oxide);border-color:var(--oxide)}
.callout{background:var(--coal);color:var(--bone);padding:1.25rem 1.25rem 1.35rem;margin-top:1.5rem}
.callout .label{color:var(--oxide)}
.callout p{margin-top:.4rem;color:var(--bone-2)}

/* ---------- visit ---------- */
.visit-grid{display:grid;gap:2.5rem}
.hours{width:100%;border-collapse:collapse;font:400 1rem/1.3 var(--mono)}
.hours th,.hours td{padding:.7rem 0;border-bottom:1px solid rgba(21,23,20,.15);text-align:left}
.hours td{text-align:right}
.hours th{font-weight:400}
.hours tr.today th,.hours tr.today td{font-weight:500;color:var(--oxide)}
.hours tr.today th::after{content:" · today";font-size:.75rem}
.addr{font-style:normal;font:800 1.9rem/1 var(--sans);font-stretch:75%;text-transform:uppercase;margin:.5rem 0 1rem}
.map{position:relative;background:var(--coal-2);aspect-ratio:4/3;overflow:hidden;color:var(--bone)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-facade{position:absolute;inset:0;display:grid;place-content:center;gap:1rem;text-align:center;padding:1.5rem;
  background:radial-gradient(circle at 50% 46%,rgba(196,81,42,.35) 0 .55rem,transparent .6rem),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(239,236,228,.06) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(239,236,228,.06) 39px 40px),var(--coal-2)}
.map-facade p{color:var(--bone-2);font:400 .78rem/1.4 var(--mono);max-width:30ch;margin-inline:auto}
.map-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* ---------- order form ---------- */
.form{display:grid;gap:1.1rem}
.form .row{display:grid;gap:1.1rem}
.field label,.field legend{display:block;font:400 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.45rem}
.field label span,.field legend span{color:var(--mute);text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid #b9b5aa;border-radius:0;padding:.8rem .85rem;font-size:1rem;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--coal) 50%),linear-gradient(135deg,var(--coal) 50%,transparent 50%);background-position:calc(100% - 1.1rem) 50%,calc(100% - .8rem) 50%;background-size:.3rem .3rem;background-repeat:no-repeat}
.field textarea{min-height:9rem;resize:vertical;font-family:var(--mono);font-size:.92rem;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--oxide);outline-offset:0;border-color:var(--oxide)}
.field fieldset{border:0;padding:0}
.radios{display:flex;flex-wrap:wrap;gap:.5rem}
.radios label{display:inline-flex;align-items:center;gap:.45rem;border:1px solid #b9b5aa;padding:.6rem .8rem;background:var(--paper);cursor:pointer;font:400 .95rem/1 var(--sans);text-transform:none;letter-spacing:0;margin:0}
.radios input{width:auto;accent-color:var(--oxide)}
.hint{font-size:.85rem;color:var(--text-2);margin-top:.35rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.form-note{font-size:.88rem;color:var(--text-2)}
.form-status{border-left:4px solid var(--moss);background:var(--paper);padding:1rem 1.1rem}
.form-status[hidden]{display:none}
.form-error{border-left-color:var(--oxide)}

/* ---------- about ---------- */
.values{list-style:none;padding:0;display:grid;gap:1px;background:rgba(21,23,20,.18);border-block:1px solid rgba(21,23,20,.18)}
.values li{background:var(--bone);padding:1.25rem 0}
.values b{display:block;font:800 1.3rem/1.1 var(--sans);font-stretch:75%;text-transform:uppercase;margin-bottom:.35rem}
.values p{color:var(--text-2);max-width:44ch}
.credits{font-size:.85rem;color:var(--text-2);columns:1}
.credits li{padding:.2rem 0;break-inside:avoid}

/* ---------- footer ---------- */
.site-footer{background:var(--coal);color:var(--bone-2);font-size:.92rem;padding-top:3rem}
.foot{display:grid;gap:2rem;padding-bottom:2.5rem}
.foot .label{color:var(--mute);margin-bottom:.6rem;font-size:.72rem}
.foot address{font-style:normal}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot p+p{margin-top:.6rem}
.foot-brand .mark{color:var(--bone);font-size:2.4rem}
.foot-brand p{margin-top:.6rem;max-width:22ch}
.foot-legal{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--coal-line);padding-block:1rem 1.5rem;font:400 .72rem/1 var(--mono);color:var(--mute)}
.foot-legal a{text-decoration:none}

/* ---------- small helpers ---------- */
.label + h2,.label + .h2{margin-top:.75rem}
.prose .label + h2{margin-bottom:1.25rem}
.trio .code{color:var(--oxide)}
.dark .prose{color:var(--bone-2)}
.cta.flush,.addr.flush{margin:0}
.label.gap{margin:2rem 0 .25rem}
.addr.contact{font-size:1.4rem;margin-top:.5rem}
.addr.contact a[href^="mailto"]{text-transform:none;font-size:1.15rem;font-stretch:85%}
.hint.tuck{margin-top:-.6rem}
.page-hero.solo{padding-bottom:4rem}
.page-hero.solo .cta{margin-bottom:0}

/* ---------- 48em+ ---------- */
@media (min-width:48em){
  :root{--gutter:2rem}
  .hide-sm{display:inline}
  .bar{flex-wrap:nowrap;padding-block:1.1rem}
  .nav{width:auto;gap:1.75rem;font-size:.82rem;padding:0}
  .nav a{padding-bottom:.35rem}
  .facts{grid-template-columns:repeat(4,1fr)}
  .grid4{grid-template-columns:1fr 1fr}
  .dept{grid-template-columns:1fr}
  .dept picture img{aspect-ratio:16/10}
  .page-hero{padding-top:3.5rem}
  .page-hero figure{margin-inline:0}
  .split{grid-template-columns:1fr 1fr;gap:3rem}
  .split.flip > :first-child{order:2}
  .trio{grid-template-columns:repeat(3,1fr);background:none;border:0;gap:2rem}
  .trio > div{border-top:3px solid var(--coal);padding-top:1rem}
  .form .row{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr;gap:0 2rem;background:none;border:0}
  .values li{border-top:1px solid rgba(21,23,20,.18)}
  .credits{columns:2;column-gap:2rem}
  .foot{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .table-scroll{margin-inline:0;padding-inline:0}
}

/* ---------- 72em+ ---------- */
@media (min-width:72em){
  .hero-body{padding-top:clamp(9rem,22vh,12rem)}
  .grid4{grid-template-columns:repeat(4,1fr)}
  .dept picture img{aspect-ratio:4/5}
  .page-hero-grid{grid-template-columns:1.1fr .9fr;align-items:end;gap:4rem}
  .page-hero figure img{aspect-ratio:4/3}
  .dept-detail{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
  .dept-detail:nth-of-type(even) .photos{order:-1}
  .visit-grid{grid-template-columns:1fr 1fr;gap:4rem}
  .section{padding-block:5rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.status,.site-header,.site-footer,.map,.hero picture{display:none}body{background:#fff}}