/* =========================================================
   NorthDakota.co.jp / site.css
   Shared editorial styling
   ========================================================= */

:root{
  --nd-ink:#211914;
  --nd-muted:#6d5745;
  --nd-paper:#fff8ec;
  --nd-paper-2:#f1dfc0;
  --nd-line:rgba(33,25,20,.17);
  --nd-rust:#9f512d;
  --nd-brown:#5d3f2a;
  --nd-dark:#251a13;
  --nd-cream:#fff4dc;
  --nd-blue:#607f90;
  --nd-shadow:0 24px 76px rgba(44,29,18,.16);

  --ink:var(--nd-ink);
  --muted:var(--nd-muted);
  --paper:var(--nd-paper);
  --paper2:var(--nd-paper-2);
  --line:var(--nd-line);
  --rust:var(--nd-rust);
  --brown:var(--nd-brown);
  --dark:var(--nd-dark);
  --cream:var(--nd-cream);
  --blue:var(--nd-blue);
  --shadow:var(--nd-shadow);
}

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

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

body{
  margin:0;
  color:var(--nd-ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  line-height:1.9;
  background:
    radial-gradient(circle at 12% 0%, rgba(159,81,45,.16), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(96,127,144,.14), transparent 32rem),
    linear-gradient(180deg, #fff9ed 0%, #f5e6ca 48%, #ead7b6 100%);
}

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

a{
  color:inherit;
}

p{
  margin:0 0 1.1em;
}

h1,
h2,
h3,
h4{
  color:var(--nd-ink);
  text-wrap:balance;
}

h1{
  margin:0;
  font-size:clamp(2.9rem, 7.4vw, 7.1rem);
  line-height:.98;
  letter-spacing:.02em;
}

h2{
  margin:0 0 20px;
  font-size:clamp(2rem, 4vw, 3.45rem);
  line-height:1.18;
  letter-spacing:.02em;
}

h3{
  margin:0;
  line-height:1.3;
}

.wrap,
.nd-wrap{
  width:min(1180px, calc(100% - 36px));
  margin:0 auto;
}

.eyebrow,
.kicker{
  color:var(--nd-rust);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* =========================================================
   Dark readable top navigation
   ========================================================= */

.topnav{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
  border-bottom:1px solid rgba(255,244,220,.22);
  background:rgba(37,26,19,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.18);
}

.topnav .wrap,
.topnav .nd-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:15px 0;
}

.brand{
  color:var(--nd-cream);
  font-weight:900;
  text-decoration:none;
  letter-spacing:.04em;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.navlinks{
  display:flex;
  gap:17px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:.92rem;
}

.navlinks a{
  color:var(--nd-cream);
  text-decoration:none;
  border-bottom:1px solid transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  font-weight:800;
}

.navlinks a:hover,
.navlinks a:focus{
  color:#fff;
  border-bottom-color:var(--nd-cream);
}

/* =========================================================
   Hero
   ========================================================= */

.hero,
.nd-hero{
  position:relative;
  min-height:82vh;
  display:grid;
  align-items:end;
  overflow:hidden;
  border-bottom:1px solid var(--nd-line);
  background-color:#e8d5b7;
}

.hero::after,
.nd-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055), rgba(255,255,255,.055) 1px, transparent 1px, transparent 5px);
  pointer-events:none;
}

.hero-inner,
.nd-hero-inner{
  position:relative;
  z-index:2;
  max-width:880px;
  padding:136px 0 82px;
}

.lead,
.hero-lead{
  margin:28px 0 0;
  max-width:760px;
  font-size:clamp(1.06rem, 2vw, 1.34rem);
  color:#35261d;
}

/* =========================================================
   Buttons
   ========================================================= */

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px;
}

.button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(33,25,20,.22);
  background:rgba(255,248,236,.76);
  box-shadow:0 10px 28px rgba(44,29,18,.12);
  font-weight:800;
  font-size:.94rem;
}

.button.primary,
.btn.primary{
  background:var(--nd-dark);
  color:var(--nd-cream);
  border-color:var(--nd-dark);
}

.button:hover,
.btn:hover{
  transform:translateY(-1px);
}

/* =========================================================
   Sections
   ========================================================= */

.section{
  padding:78px 0;
}

.section.tight{
  padding-top:42px;
}

.intro,
.nd-intro{
  padding:76px 0 46px;
}

.intro-grid,
.nd-intro-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:42px;
  align-items:start;
}

.section-head{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:34px;
  align-items:end;
  margin-bottom:28px;
  padding-top:44px;
  border-top:1px solid var(--nd-line);
}

.section-head p{
  margin:0;
  color:#49382c;
}

.start-card,
.summary-card,
.index-card,
.room-index{
  background:rgba(255,248,236,.78);
  border:1px solid var(--nd-line);
  border-radius:30px;
  padding:32px;
  box-shadow:var(--nd-shadow);
}

.start-card strong,
.summary-card strong{
  display:block;
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  line-height:1.35;
  margin-bottom:14px;
}

.start-card p,
.summary-card p{
  color:var(--nd-muted);
}

.quick-links{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:20px;
}

.quick-links a{
  text-decoration:none;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(33,25,20,.13);
  font-weight:800;
}

.quick-links a:hover{
  background:#fffaf0;
}

/* =========================================================
   Cards and grids
   ========================================================= */

.card-grid,
.gallery-grid,
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.card,
.tile{
  display:block;
  overflow:hidden;
  text-decoration:none;
  background:rgba(255,248,236,.82);
  border:1px solid var(--nd-line);
  border-radius:26px;
  box-shadow:0 16px 48px rgba(44,29,18,.12);
  transition:transform .22s ease, box-shadow .22s ease;
}

.card:hover,
.tile:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 68px rgba(44,29,18,.2);
}

.card img,
.tile img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#ead8b8;
}

.card-body,
.tile-text{
  padding:19px 20px 22px;
}

.card .tag{
  display:inline-block;
  margin-bottom:8px;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nd-rust);
  font-weight:900;
}

.card h3,
.tile strong{
  display:block;
  font-size:1.18rem;
  margin-bottom:8px;
  line-height:1.45;
}

.card p,
.tile span,
.tile small{
  display:block;
  color:var(--nd-muted);
  font-size:.92rem;
  line-height:1.65;
  margin:0;
}

/* =========================================================
   Magazine bands and feature blocks
   ========================================================= */

.magazine-band,
.feature-band,
.wide-callout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  border-radius:34px;
  background:var(--nd-dark);
  color:var(--nd-cream);
  box-shadow:var(--nd-shadow);
  margin-top:32px;
}

.magazine-band img,
.feature-band img,
.wide-callout img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
}

.magazine-copy,
.feature-copy,
.wide-callout div{
  padding:46px;
  align-self:center;
}

.magazine-copy h2,
.feature-copy h3,
.wide-callout h3{
  color:#fff6e4;
}

.magazine-copy p,
.feature-copy p,
.wide-callout p{
  color:#ead7b8;
}

/* =========================================================
   Split layout and room links
   ========================================================= */

.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:26px;
  align-items:stretch;
}

.split-photo{
  border-radius:34px;
  overflow:hidden;
  min-height:520px;
  box-shadow:var(--nd-shadow);
  border:1px solid rgba(33,25,20,.16);
}

.split-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.room-list{
  display:grid;
  gap:16px;
}

.room-link{
  display:grid;
  grid-template-columns:126px 1fr;
  gap:16px;
  align-items:center;
  text-decoration:none;
  padding:12px;
  border-radius:24px;
  background:rgba(255,248,236,.78);
  border:1px solid rgba(33,25,20,.14);
  box-shadow:0 12px 34px rgba(44,29,18,.09);
}

.room-link img{
  width:126px;
  height:92px;
  object-fit:cover;
  border-radius:17px;
}

.room-link strong{
  display:block;
  font-size:1.05rem;
  line-height:1.45;
}

.room-link span{
  display:block;
  color:var(--nd-muted);
  font-size:.86rem;
  line-height:1.55;
  margin-top:3px;
}

/* =========================================================
   Gallery strips
   ========================================================= */

.gallery-strip{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}

.gallery-hero{
  display:block;
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-radius:34px;
  text-decoration:none;
  color:#fff8e8;
  box-shadow:var(--nd-shadow);
  background:#2a2018;
}

.gallery-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:520px;
  filter:saturate(.95);
}

.gallery-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.72));
}

.gallery-hero div{
  position:absolute;
  z-index:2;
  left:32px;
  right:32px;
  bottom:30px;
}

.gallery-hero h3{
  color:#fff8e8;
  font-size:clamp(1.8rem, 3vw, 3rem);
  margin-bottom:8px;
}

.gallery-hero p{
  color:#f0dfc3;
  margin:0;
}

.gallery-side{
  display:grid;
  gap:22px;
}

.mini-photo{
  display:block;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  min-height:249px;
  color:#fff8e8;
  box-shadow:0 16px 42px rgba(44,29,18,.13);
}

.mini-photo img{
  width:100%;
  height:100%;
  min-height:249px;
  object-fit:cover;
}

.mini-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.64));
}

.mini-photo strong{
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
  bottom:20px;
  font-size:1.18rem;
  line-height:1.35;
  color:#fff8e8;
}

/* =========================================================
   CTA
   ========================================================= */

.cta{
  border-radius:34px;
  padding:42px;
  background:
    linear-gradient(135deg, rgba(37,26,19,.94), rgba(90,61,40,.92));
  color:var(--nd-cream);
  box-shadow:var(--nd-shadow);
  overflow:hidden;
}

.cta h2{
  color:#fff6e4;
}

.cta p{
  color:#ead8bd;
  max-width:760px;
}

.cta .hero-actions{
  margin-top:24px;
}

.cta .button{
  background:rgba(255,248,236,.92);
  color:var(--nd-ink);
}

.cta .button.primary{
  background:var(--nd-cream);
  color:var(--nd-ink);
  border-color:var(--nd-cream);
}

/* =========================================================
   Sitemap / link sections
   ========================================================= */

.sitemap-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}

.sitemap-grid .section,
.sitemap-section{
  padding:0;
  background:rgba(255,248,236,.78);
  border:1px solid var(--nd-line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 16px 46px rgba(44,29,18,.11);
}

.section-head-card{
  padding:24px 26px 18px;
  background:linear-gradient(135deg, rgba(159,81,45,.14), rgba(255,255,255,.18));
  border-bottom:1px solid rgba(33,25,20,.12);
}

.links{
  padding:12px 26px 22px;
}

.links a{
  display:block;
  text-decoration:none;
  padding:11px 0;
  border-bottom:1px solid rgba(33,25,20,.11);
}

.links a:last-child{
  border-bottom:0;
}

.links a:hover{
  color:var(--nd-rust);
}

.url{
  display:block;
  color:var(--nd-muted);
  font-size:.78rem;
  line-height:1.45;
  word-break:break-word;
  font-family:Georgia, "Times New Roman", serif;
  margin-top:2px;
}

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

.feature-list{
  columns:2;
  column-gap:42px;
}

.feature-list a{
  break-inside:avoid;
}

/* =========================================================
   Footer
   ========================================================= */

.footer{
  padding:56px 0 74px;
  border-top:1px solid var(--nd-line);
  background:rgba(255,248,236,.62);
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:start;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  justify-content:flex-end;
  font-size:.92rem;
}

.footer-links a{
  text-decoration:none;
  border-bottom:1px solid rgba(33,25,20,.25);
}

.footer-links a:hover{
  color:var(--nd-rust);
}

.note{
  color:var(--nd-muted);
  font-size:.92rem;
  margin-top:8px;
}

/* =========================================================
   Accessibility
   ========================================================= */

:focus-visible{
  outline:3px solid rgba(159,81,45,.55);
  outline-offset:4px;
  border-radius:6px;
}

::selection{
  background:rgba(159,81,45,.25);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:940px){
  .topnav{
    position:relative;
    background:#251a13;
  }

  .topnav .wrap,
  .topnav .nd-wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .navlinks{
    justify-content:flex-start;
    gap:10px 14px;
    font-size:.88rem;
  }

  .hero,
  .nd-hero{
    min-height:72vh;
  }

  .hero-inner,
  .nd-hero-inner{
    padding-top:72px;
    padding-bottom:58px;
  }

  .intro-grid,
  .nd-intro-grid,
  .section-head,
  .magazine-band,
  .feature-band,
  .wide-callout,
  .split,
  .gallery-strip,
  .footer-grid,
  .sitemap-grid{
    grid-template-columns:1fr;
  }

  .card-grid,
  .gallery-grid,
  .gallery{
    grid-template-columns:1fr;
  }

  .quick-links{
    grid-template-columns:1fr;
  }

  .split-photo{
    min-height:auto;
  }

  .split-photo img{
    height:auto;
  }

  .magazine-copy,
  .feature-copy,
  .wide-callout div,
  .cta{
    padding:30px;
  }

  .magazine-band img,
  .feature-band img,
  .wide-callout img{
    min-height:280px;
  }

  .room-link{
    grid-template-columns:100px 1fr;
  }

  .room-link img{
    width:100px;
    height:78px;
  }

  .gallery-hero,
  .gallery-hero img{
    min-height:360px;
  }

  .mini-photo,
  .mini-photo img{
    min-height:220px;
  }

  .footer-links{
    justify-content:flex-start;
  }

  .feature-list{
    columns:1;
  }
}

@media (max-width:560px){
  .wrap,
  .nd-wrap{
    width:min(100% - 24px, 1180px);
  }

  h1{
    font-size:clamp(2.35rem, 13vw, 3.6rem);
  }

  h2{
    font-size:clamp(1.85rem, 9vw, 2.7rem);
  }

  .section{
    padding:56px 0;
  }

  .start-card,
  .summary-card,
  .index-card,
  .room-index{
    padding:24px;
    border-radius:24px;
  }

  .card,
  .tile{
    border-radius:22px;
  }

  .gallery-hero div{
    left:22px;
    right:22px;
    bottom:22px;
  }

  .cta{
    border-radius:26px;
    padding:26px;
  }
}