/* Ocean and sunset palette. Transparent drawings frame, rather than tint, the photographs. */
:root {
  --plum:#092d3f;
  --raspberry:#126d73;
  --coral:#ed8d62;
  --gold:#ffd597;
  --cream:#f6f2e9;
  --paper:#fffdf8;
  --muted:#48616a;
  --line:1px solid #123a4e2d;
  --radius:20px;
  --shadow:0 18px 45px #082b3d19;
  --display:"Instrument Serif",Georgia,serif;
  --body:"DM Sans",system-ui,sans-serif;
  --accent:linear-gradient(100deg,#246c7d,#59a39d 44%,#ec906a 82%,#ffd597);
}
html:lang(bn) { --display:"Noto Serif Bengali",serif;--body:"Hind Siliguri","Noto Sans Bengali",sans-serif }
body { font-weight:500 }
.svg-library { position:absolute;pointer-events:none;overflow:hidden }
:focus-visible { outline-color:#0b7478 }
.hero :focus-visible,.gallery :focus-visible,.footer :focus-visible,.contact-intro :focus-visible { outline-color:var(--gold) }
.contact .inquiry :focus-visible { outline-color:#0b7478 }
.button.primary { background:linear-gradient(115deg,#103c50,#126d73);box-shadow:0 5px 18px #0b41513a }
.button.primary:is(:hover,:focus-visible) { box-shadow:0 7px 20px #126d7360 }
.button.warm { background:linear-gradient(115deg,#ffe1a8,#f5ac72) }
:is(.button,.square,.filter):is(:hover,:focus-visible) { background-color:#e9f1ed;box-shadow:0 5px 17px #082b3d2b }
.site-head.compact { background:#f6f2e9ef;box-shadow:0 4px 22px #082b3d20 }
.brand { font-family:var(--body);font-size:clamp(1rem,2vw,1.27rem);letter-spacing:-.03em }
html:lang(bn) .brand { letter-spacing:0 }
.brand small { font-weight:600;color:var(--muted);letter-spacing:0 }
.brand-icon { background:linear-gradient(160deg,#10384a,#165569);color:#ffd597;border-radius:50%;width:42px;height:42px }
.lang { color:#0d6064;background:#eef2eb }
.mega { box-shadow:0 18px 40px #09283a32 }
.mega a:is(:hover,:focus-visible) { background:#e1efea }
.mega a.featured { background:linear-gradient(140deg,#0e3449,#236c70) }

.hero {
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(27px,4vw,53px) clamp(63px,8.4vw,115px);
  background:radial-gradient(ellipse at 89% 5%,#b8655159,transparent 52%),linear-gradient(142deg,#071a2a 8%,#103446 59%,#165268);
}
.hero-shell { position:relative;z-index:1;background:transparent;border-radius:0;box-shadow:none }
.hero-slide { gap:20px;align-items:center }
.hero-copy {
  background:none;border-radius:0;overflow:visible;
  min-height:0;padding:0 1px;gap:14px;
}
.hero-copy::before,.hero-copy::after { content:none }
.hero-etching {
  position:absolute;z-index:-1;inset:auto 0 -22px auto;width:min(100%,390px);height:auto;aspect-ratio:430/240;
  opacity:.22;pointer-events:none;
}
.hero-kicker { color:#b6d8d5;font-size:.83rem;font-weight:700 }
.hero-kicker::before { width:20px;height:1px;border-radius:0;box-shadow:none;background:#efad72 }
.hero-copy h2 { color:#fff3dc;font-weight:400;font-size:clamp(3.15rem,7.6vw,6.6rem);letter-spacing:-.025em;line-height:.93;text-wrap:initial;max-width:100%;overflow-wrap:anywhere }
html:lang(bn) .hero-copy h2 { font-weight:700;font-size:clamp(2.35rem,6.2vw,5.2rem);line-height:1.16;letter-spacing:-.043em }
.hero-copy p { color:#d3e7e7;font-size:clamp(1rem,1.42vw,1.18rem);max-width:36ch }
.hero-actions { margin-top:3px }
.hero-actions .button.primary { background:linear-gradient(110deg,#ffdfa4,#f4ad77);box-shadow:0 5px 17px #ec986845 }
.hero-actions .button.primary:is(:hover,:focus-visible) { box-shadow:0 5px 20px #ffc28570 }
.hero-actions .button:not(.primary) { border-color:#a9d4d485;background:#09253460 }
.hero-actions .button:not(.primary):is(:hover,:focus-visible) { background:#245465 }
.hero-image {
  padding:0;background:transparent;border-radius:0;gap:9px;color:#d5e7e4;
}
.hero-image .visual {
  aspect-ratio:3/2;outline:1px solid #f3c39565;outline-offset:-1px;
  height:auto;background:#081c27;border-radius:clamp(10px,1.2vw,18px);
  box-shadow:0 15px 45px #0015227f;
}
.hero-image .visual img { object-fit:contain }
.hero-image figcaption { font-size:.8rem;padding:0 }
.hero-image figcaption .icon { color:var(--gold) }
.slider-controls {
  margin-top:16px;padding:4px 0;background:transparent;
  color:#d9e9e5;border-top:1px solid #add5cf44;
}
.slider-controls .square { background:#0e3648;border-color:#a4d3ce66;color:#f4f4ed }
.slider-controls .square:is(:hover,:focus-visible) { background:#21586b }
.slider-group,.dots { gap:4px }
.slide-position { color:#ccdfdd }
.dot::before { background:#91b8be }
.dot:is(:hover,:focus-visible)::before,.dot[aria-current=true]::before { background:#ffd597 }
.slider-progress { height:2px;border-radius:0;background:#82aaae4a }
.hero-shell:has(.slider-controls[hidden]) { overflow:visible }
.shoreline { position:absolute;display:block;width:100%;bottom:-1px;left:0;height:clamp(49px,7.5vw,112px);pointer-events:none }
.shoreline-sand { color:var(--cream) }

.section { border-bottom:0 }
.collections { padding-top:clamp(21px,3.2vw,49px) }
.section h2 { font-weight:400;font-size:clamp(2.8rem,5.25vw,5.2rem);letter-spacing:-.033em;line-height:1 }
html:lang(bn) .section h2 { font-size:clamp(1.95rem,4.2vw,3.8rem);line-height:1.25 }
.section-head { border-bottom:var(--line);padding-bottom:15px;margin-bottom:26px }
.collection { border-radius:var(--radius) }
.collection:focus-within { box-shadow:0 16px 35px #0a415129 }
.collection .card-copy { text-decoration:none }
.collection .card-copy:is(:hover,:focus-visible) .round-arrow { background:var(--gold) }
.card .visual { border-radius:19px 19px 0 0 }
.collection.tone-coast { background:#fff3de }
.collection.tone-nature { background:#e5efed }
.collection.tone-water { background:#eceeeb }
.card-copy h3 { font-weight:400;font-size:clamp(1.8rem,2.6vw,2.55rem);letter-spacing:-.02em }
html:lang(bn) .card-copy h3 { font-size:clamp(1.25rem,2vw,1.85rem) }
.round-arrow,.gallery-expand { color:#0b656b;background:#fffdf8 }
.gallery {
  background:radial-gradient(ellipse at 100% 0,#2f777c73,transparent 61%),linear-gradient(145deg,#0a2536,#133a4a 75%,#12354a);
  color:#fff1dc;
}
.gallery .section-head { border-color:#91bbb966 }
.gallery .section-head p { color:#c2d9d8 }
.filters { margin-bottom:20px }
.filter { background:#163e4f;border-color:#9bcac477;color:#eaf4f0 }
.filter:is(:hover,:focus-visible) { background:#215466 }
.filter[aria-pressed=true] { background:#f7cf94;color:#092d3f }
.gallery-card { background:#0c293a;border-color:#89bdb752;border-radius:12px }
.gallery-card .visual,.image-button { border-radius:11px 11px 0 0 }
.gallery-card .visual,.gallery-card.photo-tall .visual { background:#071a27 }
.gallery-copy p { color:#b5d0d0 }
.gallery-copy h3 { color:#fff1dc;font-size:clamp(1.42rem,1.65vw,1.65rem);font-weight:400 }
html:lang(bn) .gallery-copy h3 { font-size:clamp(1.02rem,1.35vw,1.3rem) }
.gallery-expand { color:#f4d6a9;background:#214c59;border-color:#86b5b076 }
.gallery-card:is(:hover,:focus-within) .gallery-expand { background:#ffd597;color:#092d3f }
.gallery-card:focus-within .image-button { outline-offset:-4px }

.archive { position:relative;isolation:isolate;overflow:hidden;background:#f4eddf }
.archive-etching { position:absolute;z-index:-1;right:-3%;top:-6%;width:min(61%,560px);height:auto;aspect-ratio:430/240;opacity:.35 }
.archive-item { border-radius:11px;background:#fffcf7 }
.archive-item time,.archive-item .icon { color:#12646b }
.archive-item:is(:hover,:focus-visible) { background:#e5f0ec }
.archive-item h3 { font-size:clamp(1.5rem,2.2vw,2rem);font-weight:400 }
html:lang(bn) .archive-item h3 { font-size:clamp(1.1rem,1.75vw,1.58rem) }
.archive-cover,.about-mark { background:#0c3143;color:#dfebe7 }
.about { background:linear-gradient(120deg,#e2ede8,#eef1e5 78%) }
.text-link { color:#105e63 }
.notes { padding-bottom:clamp(72px,11vw,149px) }
.notes .card { background:#fffcf7 }
.contact {
  position:relative;isolation:isolate;
  background:radial-gradient(ellipse at 13% 36%,#245f6c,transparent 70%),linear-gradient(155deg,#133e50,#0a283a);
  color:#fff2df;
}
.shoreline-contact { top:auto;bottom:99.8%;color:#153e50 }
.contact-intro { position:relative;isolation:isolate }
.contact-intro p { color:#d1e7e6 }
.contact-etching { position:relative;display:block;width:min(100%,350px);height:auto;aspect-ratio:430/240;margin:15px 0 -12px -8px }
.contact .inquiry { color:var(--plum);background:#fffaf2 }
.footer { background:#081f2e }
.footer .brand small { color:#cce0df }
.footer h2,.footer .text-link,.footer :is(a,.text-link):is(:hover,:focus-visible) { color:var(--gold) }
.footer .social a,.footer .social a:is(:hover,:focus-visible) { background:#d8ede7 }
.footer .brand-icon { color:#ffd597 }
.no-js-drawer { background:#e5eee7 }

@media(max-width:520px) {
  .hero-slide { gap:15px }
  .hero-etching { opacity:.15 }
  .slider-controls { grid-template-columns:1fr auto;gap:0 }
  .slide-position { padding-left:0 }
}
@media(min-width:550px) {
  .slider-controls { padding-inline:0 }
}
@media(min-width:920px) {
  .hero-slide { gap:clamp(23px,3vw,48px) }
  .hero-copy { grid-column:span 5;padding-block:12px;gap:17px }
  .hero-image { grid-column:span 7 }
  .hero-image .visual { border-radius:18px }
  .hero-copy h2 { font-size:clamp(3.9rem,6.25vw,6.75rem) }
  html:lang(bn) .hero-copy h2 { font-size:clamp(3.1rem,5.5vw,5.15rem) }
  .hero-slide[data-scene="karnaphuli"] h2 { font-size:clamp(3rem,4.9vw,5.2rem) }
  html:lang(bn) .hero-slide[data-scene="karnaphuli"] h2 { font-size:clamp(2.85rem,5.12vw,4.9rem) }
  .slider-controls { padding-inline:0 }
  .gallery-grid { gap:16px }
}

/* The image is first fitted to its viewport, then scaled and translated in pixels. */
.lightbox {
  width:min(1170px,100% - 24px);
  background:#092b3d;color:#fff3df;
  border:1px solid #94b9b477;border-radius:18px;
}
.lightbox::backdrop { background:#041019e8 }
.lightbox .light-tools { border-color:#80a5aa57 }
.lightbox .square { background:#153b4e;border-color:#97c2bf74;color:#fff2dd }
.lightbox .square:is(:hover,:focus-visible) { background:#285567 }
.lightbox :focus-visible { outline-color:#ffd597 }
.lightbox figure { padding:7px clamp(6px,1.4vw,14px) 10px }
.zoom-tools { display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:7px }
.zoom-tools input { width:clamp(48px,16vw,144px);margin-inline:2px;accent-color:#ffd597;cursor:pointer;min-height:44px }
.zoom-tools output { min-width:3.1em;text-align:center;font-size:.9rem;font-variant-numeric:tabular-nums }
.zoom-stage {
  position:relative;overflow:hidden;height:min(65dvh,660px);min-height:138px;
  border-radius:11px;background:#051522;touch-action:none;
}
.zoom-stage:focus-visible { outline-offset:-4px }
.zoom-stage.is-zoomed { cursor:grab }
.zoom-stage.is-dragging { cursor:grabbing }
.lightbox .zoom-stage .visual {
  position:absolute;inset:0;aspect-ratio:auto;max-height:none;transform-origin:center;
  border-radius:0;background:none;overflow:visible;pointer-events:none;
}
.lightbox .zoom-stage img { user-select:none;-webkit-user-drag:none;object-fit:contain }
.zoom-guide { margin-top:6px;color:#ccdcdb;font-size:.8rem }
.lightbox figcaption { color:#d6e8e5 }
@media(max-width:480px) {
  .zoom-stage { height:55dvh }
  .light-title { overflow-wrap:anywhere }
}
.feature-photo { display:block;position:relative;width:100%;padding:0;border:0;border-radius:14px;background:none }
.feature-photo .gallery-expand { position:absolute;bottom:8px;right:8px;visibility:visible }
.feature-photo:is(:hover,:focus-visible) .gallery-expand { background:#ffd597;color:#092d3f }
.notes .feature-photo,.collection .feature-photo { border-radius:19px 19px 0 0 }
.gallery-card .image-button,.feature-photo { cursor:zoom-in }
.lightbox .square[aria-disabled=true] { opacity:.52;cursor:default }