/* Dream Factory shell: the nautical names preserve the original site identity. */
:root {
   --df-ocean: #a7a7a7;
   --df-hull: #ffffff;
   --df-surface: #f7f7f7;
   --df-ink: #1f1f1f;
   --df-muted: #666666;
   --df-border: #c9c9c9;
   --df-hull-border-dark: #333333;
   --df-hull-border-light: #666666;
   --df-link: #2673b4;
   --df-link-hover: #155a96;
   --df-focus: #0d6fb8;
   --df-control: #ffffff;
   --df-control-border: #bdbdbd;
   --df-row: rgba(255, 255, 255, 0.5);
   --df-code: #eeeeee;
   --df-anchor: #333333;
   --df-anchor-link: #0f3b61;
   --df-shadow: 0.65rem 0.65rem 1.25rem -0.45rem rgba(0, 0, 0, 0.55);
   --df-space-1: 0.5rem;
   --df-space-2: 0.75rem;
   --df-space-3: 1rem;
   --df-space-4: 1.5rem;
}

html {
   min-height: 100%;
   font-size: 16px;
   color-scheme: light;
}

html[data-theme="dark"] {
   --df-ocean: #17212b;
   --df-hull: #202b36;
   --df-surface: #293744;
   --df-ink: #edf2f7;
   --df-muted: #b5c0ca;
   --df-border: #526170;
   --df-hull-border-dark: #0d141b;
   --df-hull-border-light: #718294;
   --df-link: #b6ddff;
   --df-link-hover: #d4edff;
   --df-focus: #79c9ff;
   --df-control: #263441;
   --df-control-border: #6c7e8d;
   --df-row: rgba(255, 255, 255, 0.045);
   --df-code: #17212b;
   --df-anchor: #c7d1da;
   --df-anchor-link: #a8d8ff;
   color-scheme: dark;
}

body {
   min-width: 0;
   min-height: 100vh;
   margin: 0;
   background: var(--df-ocean);
   color: var(--df-ink);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 16px;
   line-height: 1.5;
}

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

a {
   color: var(--df-link);
}

a:hover,
a:focus {
   color: var(--df-link-hover);
}

.skip-link {
   position: fixed;
   top: var(--df-space-2);
   left: var(--df-space-2);
   z-index: 1000;
   padding: var(--df-space-2) var(--df-space-3);
   color: var(--df-ink);
   background: var(--df-surface);
   border: 2px solid var(--df-focus);
   border-radius: var(--df-radius);
   transform: translateY(calc(-100% - 2rem));
}

.skip-link:focus {
   color: var(--df-ink);
   transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
   outline: 3px solid var(--df-focus);
   outline-offset: 2px;
}

#nautical-ocean {
   min-height: 100vh;
   padding: clamp(0.75rem, 2vw, 2rem);
}

#nautical-fleet {
   width: min(100%, 88rem);
   margin: 0 auto;
}

#nautical-regatta,
#nautical-ship,
#nautical-hull,
#nautical-vaka,
#nautical-keel,
#nautical-innerhull,
#nautical-bulkhead,
#nautical-ballast,
#nautical-cargo {
   min-width: 0;
}

#nautical-hull {
   overflow: hidden;
   background: var(--df-hull);
   border: 4px solid var(--df-hull-border-dark);
   border-top-color: var(--df-hull-border-light);
   border-left-color: var(--df-hull-border-light);
   border-radius: var(--df-radius);
   box-shadow: var(--df-shadow);
}

#nautical-bow {
   display: flex;
   justify-content: center;
   padding: clamp(1rem, 3vw, 2rem) var(--df-space-3) var(--df-space-2);
   text-align: center;
}

#nautical-bow header {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   margin: 0;
}

.theme-toggle {
   position: absolute;
   top: 50%;
   right: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   padding: 0;
   color: var(--df-ink);
   transform: translateY(-50%);
   background: var(--df-surface);
   border: 1px solid var(--df-border);
   border-radius: 999px;
   cursor: pointer;
}

.theme-toggle:hover {
   background: var(--df-control);
}

.theme-toggle-icon::before {
   font-size: 1.35rem;
   line-height: 1;
   content: "\263e";
}

html[data-theme="dark"] .theme-toggle-icon::before {
   content: "\2600";
}

#nautical-bow header h1 {
   margin: 0;
}

#nautical-bow header img {
   display: block;
   width: auto;
   max-width: min(100%, 30rem);
   height: auto;
}

#nautical-lookout {
   padding: 0 var(--df-space-4) var(--df-space-2);
}

#nautical-bulkhead {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(14rem, 15rem);
   gap: var(--df-space-4);
   align-items: start;
   padding: 0 var(--df-space-4) var(--df-space-3);
}

#nautical-ballast {
   min-width: 0;
}

#nautical-deck {
   min-width: 0;
}

#nautical-bridge {
   padding: var(--df-space-2) var(--df-space-4) var(--df-space-3);
}

#nautical-anchor {
   padding: 0 var(--df-space-4) var(--df-space-3);
   color: var(--df-anchor);
   font-size: 0.8125rem;
   text-align: right;
}

#nautical-anchor a {
   color: var(--df-anchor-link);
}

#nautical-anchor a:hover,
#nautical-anchor a:focus {
   color: var(--df-anchor-link);
}

#nautical-lighthouse,
#nautical-tug,
#nautical-figurehead,
#nautical-prow,
#nautical-jib,
#nautical-foremast,
#nautical-port,
#nautical-hatch,
#nautical-starboard,
#nautical-ama,
#nautical-aft,
#nautical-stern,
#nautical-net,
#nautical-buoy,
#nautical-dragons {
   display: none;
}

@media (max-width: 1000px) {
   #nautical-bulkhead {
      grid-template-columns: minmax(0, 1fr);
   }

   #nautical-deck {
      order: 2;
   }
}

@media (max-width: 700px) {
   #nautical-ocean {
      padding: 0.75rem;
   }

   #nautical-hull {
      border-width: 3px;
   }

   #nautical-bow header {
      padding-right: 3.25rem;
   }

   #nautical-lookout,
   #nautical-bulkhead,
   #nautical-bridge,
   #nautical-anchor {
      padding-right: var(--df-space-3);
      padding-left: var(--df-space-3);
   }

   #nautical-bulkhead {
      gap: var(--df-space-3);
   }
}