/* Heron Junction. One stylesheet, no framework.
   Archetype: a perforated ticket card as the first screen, dashed rules between sections,
   numbered squares on the headings, and a light footer. */

@font-face{font-family:"Aleo";src:url("/assets/font/aleo-var.woff2") format("woff2-variations");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Sarabun";src:url("/assets/font/sarabun-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sarabun";src:url("/assets/font/sarabun-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sarabun";src:url("/assets/font/sarabun-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --hj-paper:#e7ece8;
  --hj-dim:#d8e0da;
  --hj-card:#f6f9f6;
  --hj-ink:#1a201d;
  --hj-deep:#0d110f;
  --hj-muted:#5f6863;
  --hj-cocoa:#4a3527;
  --hj-cocoa-deep:#2f2017;
  --hj-wash:#ece2d8;
  --hj-slate:#3f5a6b;
  --hj-hair:#c3cdc6;
  --hj-good:#3f6b45;
  --hj-bad:#8f2d34;
  --hj-face:"Aleo","Iowan Old Style",Georgia,serif;
  --hj-text:"Sarabun","Helvetica Neue",Arial,sans-serif;
  --hj-hold:1160px;
  --hj-air:clamp(2.2rem,4.4vw,3.4rem);
}

html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,table,dl,dd,form,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}

body{
  background:var(--hj-paper);
  color:var(--hj-ink);
  font-family:var(--hj-text);
  font-size:1.0625rem;
  line-height:1.54;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.hj-hold{width:min(100% - 2.25rem,var(--hj-hold));margin-inline:auto}

a{color:var(--hj-cocoa);text-decoration-thickness:1px;text-underline-offset:.17em}
a:hover{color:var(--hj-cocoa-deep)}
:focus-visible{outline:3px solid var(--hj-cocoa);outline-offset:2px}

.hj-skip{position:absolute;left:-9999px;top:0;background:var(--hj-ink);color:var(--hj-card);
  padding:.6rem 1rem;z-index:80}
.hj-skip:focus{left:.75rem;top:.75rem}

/* --- header: one row, then a double rule, then pill navigation --- */

.hj-head{background:var(--hj-paper);border-bottom:2px solid var(--hj-ink);
  box-shadow:0 3px 0 var(--hj-hair)}
.hj-head-in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  flex-wrap:wrap;padding:.9rem 0 .8rem}
.hj-word{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--hj-ink)}
.hj-word-name{font-family:var(--hj-face);font-weight:700;font-size:clamp(1.35rem,3.2vw,1.75rem);
  line-height:1.05;letter-spacing:-.01em}
.hj-word-say{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--hj-muted);font-weight:500;margin-top:.22rem}
.hj-head-side{text-align:right;font-size:.8rem;line-height:1.4;color:var(--hj-muted)}
.hj-head-tel{display:block;font-family:var(--hj-face);font-weight:700;font-size:1.15rem;
  color:var(--hj-ink);text-decoration:none;letter-spacing:-.01em}
.hj-head-tel:hover{color:var(--hj-cocoa)}

.hj-nav{border-bottom:1px solid var(--hj-hair);background:var(--hj-dim)}
.hj-nav ul{display:flex;flex-wrap:wrap;gap:.4rem;padding:.55rem 0}
.hj-nav a{display:block;padding:.32rem .8rem;border:1px solid var(--hj-hair);border-radius:999px;
  background:var(--hj-card);text-decoration:none;color:var(--hj-ink);font-size:.76rem;
  font-weight:500;letter-spacing:.01em}
.hj-nav a:hover{border-color:var(--hj-cocoa);color:var(--hj-cocoa)}
.hj-nav a[aria-current="page"]{background:var(--hj-ink);border-color:var(--hj-ink);color:var(--hj-card)}
.hj-burger{display:none;margin:.55rem 0;background:var(--hj-card);border:1px solid var(--hj-ink);
  border-radius:999px;padding:.35rem .9rem;font-size:.76rem;font-weight:600;cursor:pointer}

/* --- the ticket: the whole first screen, split by a perforation --- */

.hj-ticket{border:2px solid var(--hj-ink);background:var(--hj-card);margin-top:var(--hj-air);
  display:grid;grid-template-columns:1.6fr 1fr}
.hj-ticket-main{padding:1.6rem 1.7rem 1.8rem}
.hj-ticket-stub{padding:1.6rem 1.5rem 1.8rem;border-left:2px dashed var(--hj-ink);
  background:var(--hj-wash)}
.hj-brow{font-size:.68rem;text-transform:uppercase;letter-spacing:.17em;font-weight:600;
  color:var(--hj-cocoa)}
h1{font-family:var(--hj-face);font-weight:700;font-size:clamp(1.75rem,4.1vw,2.6rem);
  line-height:1.11;letter-spacing:-.012em;margin-top:.5rem}
.hj-geo{margin-top:.85rem;font-size:1.03rem;color:var(--hj-ink)}
.hj-indep{margin-top:1rem;font-size:.85rem;color:var(--hj-ink);background:var(--hj-paper);
  border-left:4px solid var(--hj-cocoa);padding:.7rem .85rem}
.hj-stub-head{font-family:var(--hj-face);font-weight:700;font-size:1.1rem}
.hj-stub-tel{display:block;margin-top:1.1rem;font-family:var(--hj-face);font-weight:700;
  font-size:1.5rem;color:var(--hj-ink);text-decoration:none;letter-spacing:-.02em}
.hj-stub-tel:hover{color:var(--hj-cocoa)}
.hj-stub-hours{font-size:.8rem;color:var(--hj-muted);margin-top:.3rem}

/* --- body --- */

.hj-main{padding-bottom:var(--hj-air)}
.hj-read{max-width:44em}
.hj-read>*+*{margin-top:1.05rem}
.hj-stand{font-size:1.08rem;border-left:4px solid var(--hj-slate);padding-left:.95rem;
  margin-top:1.1rem}

.hj-sec{margin-top:2.4rem;border-top:2px dashed var(--hj-hair);padding-top:1.5rem}
h2{font-family:var(--hj-face);font-weight:700;font-size:1.42rem;line-height:1.2;
  display:flex;align-items:baseline;gap:.6rem}
h2 .hj-no{flex:0 0 auto;display:inline-block;background:var(--hj-ink);color:var(--hj-card);
  font-family:var(--hj-text);font-weight:600;font-size:.7rem;padding:.18rem .42rem;
  font-variant-numeric:tabular-nums;position:relative;top:-.15rem}
h3{font-family:var(--hj-text);font-weight:600;font-size:1.03rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--hj-slate);margin-top:1.6rem}

.hj-read ul,.hj-read ol{display:grid;gap:.5rem;margin-top:.9rem}
.hj-read li{padding-left:1.2rem;position:relative}
.hj-read li::before{content:"";position:absolute;left:0;top:.56em;width:.42rem;height:.42rem;
  background:var(--hj-cocoa)}
.hj-read ol{counter-reset:hjrow}
.hj-read ol li{counter-increment:hjrow;padding-left:1.9rem}
.hj-read ol li::before{content:counter(hjrow);top:0;width:auto;height:auto;background:none;
  color:var(--hj-cocoa);font-weight:600;font-size:.85rem}
blockquote{border:2px solid var(--hj-hair);border-left:5px solid var(--hj-cocoa);
  padding:.95rem 1.1rem;font-family:var(--hj-face);font-size:1.08rem;line-height:1.42}

/* --- the step ladder --- */

.hj-steps{display:grid;gap:1px;background:var(--hj-hair);margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.hj-steps li{background:var(--hj-card);padding:1.1rem 1.15rem}
.hj-steps li::before{display:none}
.hj-step-no{display:block;font-family:var(--hj-face);font-weight:700;font-size:1.5rem;
  color:var(--hj-cocoa);line-height:1}
.hj-step-name{display:block;font-weight:600;margin-top:.45rem}
.hj-step-say{display:block;font-size:.88rem;color:var(--hj-muted);margin-top:.3rem}

/* --- tables. rates are right aligned in tabular figures --- */

.hj-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:1.1rem;font-size:.92rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--hj-hair);
  vertical-align:top}
th{font-family:var(--hj-text);text-transform:uppercase;letter-spacing:.08em;font-size:.67rem;
  font-weight:600;color:var(--hj-muted);border-bottom:2px solid var(--hj-ink)}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hj-plain td:last-child,.hj-plain th:last-child{text-align:left}

/* --- the claims sheet --- */

.hj-sheet{margin-top:1.3rem}
.hj-sheet code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem}
.hj-sheet td:first-child{white-space:nowrap}
.hj-sheet .hj-flag{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  white-space:nowrap}
.hj-sheet .is-void{color:var(--hj-bad)}
.hj-sheet .is-stamped{color:var(--hj-good)}

/* --- doors --- */

.hj-doors{display:grid;gap:1px;background:var(--hj-hair);margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.hj-doors li{background:var(--hj-card);padding:0}
.hj-doors li::before{display:none}
.hj-doors a{display:block;padding:1.05rem 1.1rem;text-decoration:none;height:100%}
.hj-doors a:hover{background:var(--hj-wash)}
.hj-door-name{display:block;font-family:var(--hj-face);font-weight:700;font-size:1.03rem;
  color:var(--hj-ink)}
.hj-door-say{display:block;font-size:.85rem;color:var(--hj-muted);margin-top:.28rem}

/* --- ruled article listing --- */

.hj-list{border-top:2px solid var(--hj-ink);margin-top:1.4rem}
.hj-list li{border-bottom:1px solid var(--hj-hair);padding:0}
.hj-list li::before{display:none}
.hj-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:.95rem 0;
  text-decoration:none;color:var(--hj-ink);align-items:baseline}
.hj-list a:hover{background:var(--hj-dim)}
.hj-list-name{font-family:var(--hj-face);font-weight:700;font-size:1.05rem}
.hj-list-ask{display:block;font-family:var(--hj-text);font-weight:400;font-size:.84rem;
  color:var(--hj-muted);margin-top:.24rem}
.hj-list-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--hj-cocoa);
  font-weight:600;white-space:nowrap}

/* --- plates --- */

figure{margin-top:1.8rem}
figure img{width:100%;background:var(--hj-dim);border:1px solid var(--hj-hair)}
figcaption{margin-top:.6rem;font-size:.86rem;color:var(--hj-muted)}
figcaption b{color:var(--hj-cocoa);font-weight:600}

/* --- forms --- */

.hj-form{background:var(--hj-card);border:2px solid var(--hj-ink);padding:1.35rem;margin-top:1.6rem}
.hj-grid{display:grid;gap:.85rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.hj-field{display:grid;gap:.28rem}
.hj-field label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:var(--hj-muted)}
.hj-field input,.hj-field select,.hj-field textarea{background:#fff;border:1px solid var(--hj-hair);
  padding:.58rem .62rem;width:100%}
.hj-field input:focus,.hj-field select:focus,.hj-field textarea:focus{border-color:var(--hj-cocoa)}
.hj-field.is-void input,.hj-field.is-void select,.hj-field.is-void textarea{
  border-color:var(--hj-bad);background:#fff6f5}
.hj-bad{font-size:.75rem;color:var(--hj-bad);font-weight:500}
.hj-go{margin-top:1.05rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hj-go button{background:var(--hj-cocoa);color:#fff;border:0;padding:.68rem 1.35rem;
  font-weight:600;cursor:pointer}
.hj-go button:hover{background:var(--hj-cocoa-deep)}
.hj-free{font-size:.8rem;color:var(--hj-muted)}
.hj-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hj-else{font-size:.85rem;color:var(--hj-bad);margin-top:.8rem}
.hj-tiny{font-size:.8rem;color:var(--hj-muted);margin-top:.9rem}

.hj-check{display:grid;gap:.7rem;margin-top:1rem}
.hj-check .hj-field input,.hj-check .hj-field select{padding:.5rem .55rem}

/* --- reveal --- */

.hj-js .hj-rise{opacity:0;transform:translateY(8px)}
.hj-js .hj-rise.is-stamped{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}

/* --- back to top: a tab flush to the right edge --- */

.hj-up{position:fixed;right:0;bottom:22%;display:none;background:var(--hj-ink);color:var(--hj-card);
  border:0;border-right:0;padding:.7rem .5rem .7rem .6rem;cursor:pointer;z-index:60;
  writing-mode:vertical-rl}
.hj-up.is-stamped{display:block}
.hj-up span{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.hj-up:hover{background:var(--hj-cocoa)}

/* --- the cookie card, pinned to the left edge at mid height --- */

.hj-cookie{position:fixed;left:1rem;top:50%;transform:translateY(-50%);width:19rem;
  background:var(--hj-card);border:2px solid var(--hj-ink);border-left:6px solid var(--hj-cocoa);
  padding:1rem 1.05rem;z-index:70;font-size:.85rem;display:grid;gap:.7rem}
.hj-cookie h2{font-family:var(--hj-face);font-size:1rem;display:block}
.hj-cookie-row{display:flex;flex-wrap:wrap;gap:.5rem}
.hj-cookie button{border:1px solid var(--hj-ink);background:var(--hj-ink);color:var(--hj-card);
  padding:.4rem .8rem;font-size:.78rem;font-weight:600;cursor:pointer}
.hj-cookie .hj-cookie-no{background:none;color:var(--hj-ink)}
.hj-cookie .hj-cookie-no:hover{background:var(--hj-dim)}

/* --- footer: light, with a cocoa rule --- */

.hj-foot{background:var(--hj-dim);border-top:5px solid var(--hj-cocoa);margin-top:var(--hj-air)}
.hj-foot-in{padding:2.2rem 0 1.4rem;display:grid;gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.hj-foot h2{font-family:var(--hj-text);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--hj-muted);font-weight:600;display:block}
.hj-foot ul{display:grid;gap:.38rem;margin-top:.65rem;font-size:.88rem}
.hj-foot-who{font-family:var(--hj-face);font-weight:700;font-size:1.02rem;margin-top:.6rem}
.hj-foot-post{font-size:.88rem;margin-top:.45rem;line-height:1.5}
.hj-foot-indep{border-top:1px solid var(--hj-hair);padding:1.1rem 0;font-size:.85rem;
  color:var(--hj-ink)}
.hj-foot-indep p{max-width:80ch}
.hj-foot-rule{border-top:1px solid var(--hj-hair);padding:.9rem 0 1.9rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--hj-muted)}

/* --- responsive --- */

@media (max-width:60rem){
  .hj-ticket{grid-template-columns:minmax(0,1fr)}
  .hj-ticket-stub{border-left:0;border-top:2px dashed var(--hj-ink)}
  .hj-cookie{left:.75rem;right:.75rem;width:auto;top:auto;bottom:.75rem;transform:none}
  .hj-sheet td:first-child{white-space:normal}
}

@media (max-width:48rem){
  .hj-burger{display:block}
  .hj-nav ul{display:none;padding-bottom:.7rem}
  .hj-nav ul.is-folded{display:grid;gap:.35rem}
  .hj-head-side{text-align:left}
  .hj-ticket-main,.hj-ticket-stub{padding:1.2rem 1.1rem 1.4rem}
  .hj-up{bottom:12%}
}