/* Claire & Lee portfolio refinement layer.
   Preserves the original typefaces, graphics, photography, and copy. */

:root {
  --cl-forest: #4e5344;
  --cl-cream: #f9f1e1;
  --cl-taupe: #695c54;
  --cl-hairline: rgba(105, 92, 84, 0.22);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--cl-cream);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

/* Desktop navigation: tighter, calmer, and visibly interactive. */
html.d #new-site-canvas,
html.d .sib-new-site-canvas {
  height: 176px !important;
  border-bottom: 1px solid rgba(249, 241, 225, 0.13);
}

html.d [data-sid="new-site-canvas_5"] {
  top: 10px;
  width: 110px;
  height: 150px;
}

html.d [data-sid="new-site-canvas_0"],
html.d [data-sid="new-site-canvas_1"],
html.d [data-sid="new-site-canvas_2"],
html.d [data-sid="new-site-canvas_3"],
html.d [data-sid="new-site-canvas_6"] {
  top: 76px;
  transition: opacity 180ms ease;
}

html.d [data-sid="new-site-canvas_0"]:hover,
html.d [data-sid="new-site-canvas_1"]:hover,
html.d [data-sid="new-site-canvas_2"]:hover,
html.d [data-sid="new-site-canvas_3"]:hover,
html.d [data-sid="new-site-canvas_6"]:hover {
  opacity: 0.72;
}

html.d [data-sid="new-site-canvas_0"]::after,
html.d [data-sid="new-site-canvas_1"]::after,
html.d [data-sid="new-site-canvas_2"]::after,
html.d [data-sid="new-site-canvas_3"]::after,
html.d [data-sid="new-site-canvas_6"]::after {
  position: absolute;
  right: 20%;
  bottom: -8px;
  left: 20%;
  height: 1px;
  background: rgba(249, 241, 225, 0.82);
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 180ms ease, transform 180ms ease;
}

html.d body[data-portfolio-route="home"] [data-sid="new-site-canvas_0"]::after,
html.d body[data-portfolio-route="lodging"] [data-sid="new-site-canvas_1"]::after,
html.d body[data-portfolio-route="things-to-do"] [data-sid="new-site-canvas_2"]::after,
html.d body[data-portfolio-route="registry"] [data-sid="new-site-canvas_3"]::after,
html.d body[data-portfolio-route="rsvp"] [data-sid="new-site-canvas_6"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Homepage: preserve the split composition while improving crop and rhythm. */
html.d body[data-portfolio-route="home"] #main,
html.d body[data-portfolio-route="home"] .sib-main {
  height: min(700px, calc(60.1667vw - 22px)) !important;
}

html.d body[data-portfolio-route="home"] [data-sid="main_1"],
html.d body[data-portfolio-route="home"] [data-sid="main_2"] {
  height: 700px;
}

html.d body[data-portfolio-route="home"] [data-sid="main_3"] {
  top: 15px;
  height: 670px;
}

html.d body[data-portfolio-route="home"] [data-sid="main_1"] {
  border-right: 1px solid rgba(105, 92, 84, 0.12);
}

html.m body[data-portfolio-route="home"] #main,
html.m body[data-portfolio-route="home"] .sib-main {
  height: 1100px !important;
}

html.m body[data-portfolio-route="home"] [data-sid="main_1"] {
  height: 420px;
}

html.m body[data-portfolio-route="home"] [data-sid="main_2"] {
  top: 510px;
  height: 590px;
}

html.m body[data-portfolio-route="home"] [data-sid="main_4"] {
  top: 510px;
  height: 520px;
}

html.m body[data-portfolio-route="home"] [data-sid="main_4"] .se-text {
  font-size: 15px;
  line-height: 1.55;
}

/* Lodging: reduce dead space and strengthen the editorial triptych. */
html.d body[data-portfolio-route="lodging"] #main,
html.d body[data-portfolio-route="lodging"] .sib-main {
  height: min(650px, calc(57.0833vw - 35px)) !important;
}

html.d body[data-portfolio-route="lodging"] [data-sid="main_1"] {
  height: 650px !important;
}

html.d body[data-portfolio-route="lodging"] [data-sid="main_2"],
html.d body[data-portfolio-route="lodging"] [data-sid="main_4"] {
  top: 78px;
  height: 470px;
}

html.d body[data-portfolio-route="lodging"] [data-sid="main_5"] {
  top: 92px;
}

html.d body[data-portfolio-route="lodging"] [data-sid="main_3"] {
  top: 228px;
}

body[data-portfolio-route="lodging"] [data-sid="main_3"] a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

html.m body[data-portfolio-route="lodging"] #main,
html.m body[data-portfolio-route="lodging"] .sib-main,
html.m body[data-portfolio-route="lodging"] [data-sid="main_1"] {
  height: 760px !important;
}

html.m body[data-portfolio-route="lodging"] [data-sid="main_5"] {
  top: 105px;
}

html.m body[data-portfolio-route="lodging"] [data-sid="main_3"] {
  top: 184px;
}

html.m body[data-portfolio-route="lodging"] [data-sid="main_8"] {
  top: 405px;
}

html.m body[data-portfolio-route="lodging"] [data-sid="main_3"] .se-text {
  font-size: 16px;
  line-height: 1.48;
}

/* Things to do: disciplined 3:2 imagery and a denser editorial grid. */
html.d body[data-portfolio-route="things-to-do"] #row-1,
html.d body[data-portfolio-route="things-to-do"] #row-1-1,
html.d body[data-portfolio-route="things-to-do"] #row-1-2,
html.d body[data-portfolio-route="things-to-do"] #row-1-3,
html.d body[data-portfolio-route="things-to-do"] #row-1-4 {
  height: 410px !important;
}

html.d body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_0"],
html.d body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_1"],
html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_2"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_2"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_2"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_2"] {
  top: 0;
  height: 258px;
  opacity: 1;
  overflow: hidden;
}

html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_4"],
html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_6"],
html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_8"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_4"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_6"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_8"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_4"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_6"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_8"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_4"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_6"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_8"] {
  top: 276px;
}

html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_3"],
html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_5"],
html.d body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_7"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_3"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_5"],
html.d body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_7"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_3"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_5"],
html.d body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_7"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_3"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_5"],
html.d body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_7"] {
  top: 312px;
}

html.d body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_3"],
html.d body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_5"] {
  top: 276px;
}

html.d body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_2"],
html.d body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_4"] {
  top: 312px;
}

html.m body[data-portfolio-route="things-to-do"] #row-1,
html.m body[data-portfolio-route="things-to-do"] #row-1-1,
html.m body[data-portfolio-route="things-to-do"] #row-1-2,
html.m body[data-portfolio-route="things-to-do"] #row-1-3 {
  height: 550px !important;
}

html.m body[data-portfolio-route="things-to-do"] #row-1-4 {
  height: 390px !important;
}

html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_0"],
html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_1"],
html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_2"] {
  left: 0;
  width: 152px;
  height: 105px;
  opacity: 1;
}

html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_0"] { top: 0; }
html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_1"] { top: 150px; }
html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_2"] { top: 300px; }

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_5"] {
  left: 166px;
  width: 140px;
  height: 28px;
}

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_4"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_3"] { top: 0; }

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_6"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_5"] { top: 150px; }

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_8"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_8"] { top: 300px; }

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_2"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_4"] {
  left: 166px;
  width: 140px;
  height: 112px;
}

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_3"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_2"] { top: 30px; }

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_5"],
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_4"] { top: 180px; }

html.m body[data-portfolio-route="things-to-do"] #row-1 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-1 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-2 [data-sid$="_7"],
html.m body[data-portfolio-route="things-to-do"] #row-1-3 [data-sid$="_7"] { top: 330px; }

html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_3"] .se-text,
html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_5"] .se-text,
html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_7"] .se-text,
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_2"] .se-text,
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_4"] .se-text {
  font-size: 12.5px;
  line-height: 1.35;
}

html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_4"] .se-text,
html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_6"] .se-text,
html.m body[data-portfolio-route="things-to-do"] [id^="row-1"] [data-sid$="_8"] .se-text,
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_3"] .se-text,
html.m body[data-portfolio-route="things-to-do"] #row-1-4 [data-sid="row-1-4_5"] .se-text {
  font-size: 14px;
  line-height: 1.25;
}

/* Things to do: a restrained dark-green press effect, requested for the photography. */
body[data-portfolio-route="things-to-do"] [id^="row-1"] .se:has(> .se-img):active {
  background-color: #4e5344;
}

body[data-portfolio-route="things-to-do"] [id^="row-1"] .se > .se-img {
  transition: opacity 160ms ease;
}

body[data-portfolio-route="things-to-do"] [id^="row-1"] .se:active > .se-img {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  body[data-portfolio-route="things-to-do"] [id^="row-1"] .se > .se-img {
    transition: none;
  }
}

/* Registry: make the vendor marks read as intentional link cards. */
body[data-portfolio-route="registry"] [data-sid="main_8"],
body[data-portfolio-route="registry"] [data-sid="main_9"] {
  border: 1px solid rgba(105, 92, 84, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(78, 83, 68, 0.06);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

body[data-portfolio-route="registry"] [data-sid="main_8"] .se-img,
body[data-portfolio-route="registry"] [data-sid="main_9"] .se-img {
  background-color: #fff;
  background-size: 82% auto;
}

html.d body[data-portfolio-route="registry"] [data-sid="main_8"]:hover,
html.d body[data-portfolio-route="registry"] [data-sid="main_9"]:hover {
  border-color: rgba(105, 92, 84, 0.28);
  box-shadow: 0 16px 36px rgba(78, 83, 68, 0.1);
}

html.m body[data-portfolio-route="registry"] #main,
html.m body[data-portfolio-route="registry"] .sib-main {
  height: 850px !important;
}

html.m body[data-portfolio-route="registry"] [data-sid="main_7"] { top: 112px; }
html.m body[data-portfolio-route="registry"] [data-sid="main_6"] { top: 178px; }

html.m body[data-portfolio-route="registry"] [data-sid="main_8"] {
  left: 64px;
  top: 290px;
  width: 192px;
  height: 70px;
}

html.m body[data-portfolio-route="registry"] [data-sid="main_9"] {
  left: 64px;
  top: 390px;
  width: 192px;
  height: 78px;
}

html.m body[data-portfolio-route="registry"] [data-sid="main_2"] {
  left: 30px;
  top: 505px;
  width: 260px;
  height: 325px;
}

/* RSVP: turn the closed form into an intentional archival invitation. */
body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-shell {
  width: min(640px, 100%);
}

body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-header {
  margin-bottom: 34px;
}

body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-logo {
  width: min(190px, 48vw);
  margin-bottom: 24px;
}

body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-section {
  margin-bottom: 14px;
  padding: 26px 28px;
  border-color: rgba(105, 92, 84, 0.22);
  background: rgba(255, 255, 255, 0.24);
}

body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-choice,
body[data-portfolio-route="rsvp"] #cl-rsvp-app select {
  background-color: rgba(255, 255, 255, 0.42);
}

body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-submit {
  min-height: 62px;
  cursor: default;
  pointer-events: none;
}

body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-form-message {
  display: block;
  max-width: 470px;
  margin-top: 18px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
}

@media (max-width: 640px) {
  body[data-portfolio-route="rsvp"] #cl-rsvp-app {
    padding: 44px 14px 62px;
  }

  body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-section {
    padding: 22px 18px;
  }

  body[data-portfolio-route="rsvp"] #cl-rsvp-app .cl-choice-grid {
    gap: 9px;
  }
}

/* Footer: make the contact line legible without competing with the artwork. */
html.d [data-sid="footer_2"] .se-text,
html.d [data-sid="footer_4"] .se-text,
html.d [data-sid="footer_5"] .se-text {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.16em;
}

html.m [data-sid="footer_2"] .se-text,
html.m [data-sid="footer_4"] .se-text,
html.m [data-sid="footer_5"] .se-text {
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.14em;
}

[data-sid^="footer_"] a[href^="mailto:"] {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

[data-sid^="footer_"] a[href^="mailto:"]:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}