/* =========================
   基本設定
========================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", sans-serif;
  color: #111;
}

p {
  line-height: 1.8;
}


/* =========================
   ヘッダー
========================= */

header {
  border-bottom: 1px solid #ddd;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 2px;
}

.header-inner h1 a {
  color: inherit;
  text-decoration: none;
}


/* =========================
   メニュー
========================= */

nav {
  display: flex;
  gap: 30px;
}

nav a {
  color: #111;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
}

nav a:hover {
  opacity: 0.5;
}


/* =========================
   共通メイン
========================= */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px;
}


/* =========================
   スマホ共通
========================= */

@media (max-width: 700px) {

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  nav {
    gap: 15px;
    flex-wrap: wrap;
  }

}


/* =========================
   SHARED WINDOW DRAG
   Movement values/behavior come from HOME.
========================= */

body.home-page,
body.subpage {
  --window-x: 0px;
  --window-y: 0px;
}

/* Wrapper-based HOME / article / modern subpages. */
.shared-drag-window {
  transform: translate3d(var(--window-x, 0px), var(--window-y, 0px), 0);
}

/* Legacy subpages keep header + main together with the same variables. */
body.subpage:not(.shared-drag-frame) .subpage-header,
body.subpage:not(.shared-drag-frame) .subpage-main {
  transform: translate3d(var(--window-x, 0px), var(--window-y, 0px), 0);
}

.shared-drag-window.is-dragging .shared-titlebar,
body.subpage .subpage-header.is-dragging .shared-titlebar {
  cursor: grabbing;
}

.subpage.is-subpage-minimized .subpage-main {
  display: none;
}

.subpage.is-subpage-minimized .subpage-header {
  margin-bottom: 0;
}

body.subpage.is-subpage-maximized {
  padding: 0;
}

.subpage.is-subpage-maximized .subpage-header,
.subpage.is-subpage-maximized .subpage-main {
  max-width: none;
  width: 100%;
  transform: none;
}

body.subpage.is-subpage-maximized .shared-drag-window {
  transform: none;
}

.subpage.is-subpage-maximized .subpage-header {
  margin-bottom: 0;
  border-radius: 0;
}

.subpage.is-subpage-maximized .content-window {
  border-radius: 0;
}


/* =========================
   INORGANIC FASHION / ABOUT SHELL
========================= */

body.fashion-page,
body.about-page-shell {
  --ui-ink: #22292e;
  --ui-line: #626a6f;
  --ui-blue: #667985;
  --ui-ice: #d8dee1;
  --ui-lavender: #d7d9da;
  --ui-coral: #8a8e91;
  --ui-paper: #e3e6e7;
  background-color: #bfc1c1;
  background-image:
    radial-gradient(circle, rgba(48, 48, 46, 0.60) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(237, 239, 239, 0.94), rgba(205, 209, 211, 0.84));
}

/* Top chrome is intentionally not page-themed here.
   HOME / FASHION / MAGAZINE / PHOTO / ABOUT / ARTICLE all use
   the shared chrome source defined at the end of this file. */

body.fashion-page .content-window,
body.about-page-shell .content-window {
  border-color: #596268;
  border-radius: 1px;
  background: #d8dcde;
  box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 rgba(50, 53, 55, 0.20);
}

body.fashion-page .content-titlebar,
body.about-page-shell .content-titlebar {
  border-bottom-color: #46697b;
  color: #f4f5f5;
  background: linear-gradient(180deg, #8eb7c9 0%, #5d879a 52%, #748fa0 100%);
  text-shadow: 0 -1px 0 #425b68;
}

body.fashion-page .content-window-body,
body.about-page-shell .content-window-body {
  background:
    repeating-linear-gradient(90deg, rgba(80, 87, 91, 0.04) 0 1px, transparent 1px 11px),
    #e7ebed;
}

body.fashion-page .ui-chip,
body.about-page-shell .ui-chip {
  border-color: #81758d;
  color: #4c4257;
  background: linear-gradient(180deg, #f7f3fa, #d8cce2);
  text-shadow: 0 1px 0 #fff;
}

body.fashion-page .ui-action,
body.about-page-shell .ui-action {
  border-color: #587686;
  color: #263943;
  background: linear-gradient(180deg, #f8fbfc 0 46%, #b8d9e6 47%, #e1edf2 100%);
}


/* =========================
   OH MY ZINE / SUBPAGE SHELL
========================= */

body.subpage {
  --ui-ink: #24323a;
  --ui-line: #73828b;
  --ui-blue: #3e93ba;
  --ui-ice: #c9e8f4;
  --ui-lavender: #d6c9e4;
  --ui-coral: #c97885;
  --ui-paper: #eef2f4;

  min-height: 100vh;
  padding: 14px;
  color: var(--ui-ink);
  background-color: #b9b3aa;
  background-image:
    radial-gradient(circle, rgba(53, 43, 38, 0.70) 0 1px, transparent 1.6px),
    linear-gradient(135deg, rgba(225, 239, 246, 0.72), rgba(221, 211, 229, 0.64));
  background-size: 11px 11px, 100% 100%;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

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

.subpage a {
  color: inherit;
}

.subpage .content-window {
  overflow: hidden;
  background: #e9edef;
}

.subpage .content-titlebar {
  min-height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #4e7b98;
  color: #fff;
  background: linear-gradient(180deg, #71b9db 0%, #3f8fb8 52%, #5aa8c9 100%);
  font-family: "Courier New", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 -1px 0 #2b607b;
}

.subpage .content-window-body {
  padding: clamp(16px, 3vw, 34px);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.68), transparent 38%),
    linear-gradient(135deg, #edf3f6, #e9e6ef);
}

.subpage .ui-chip {
  width: max-content;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #7b708f;
  border-radius: 2px;
  color: #4e435c;
  background: linear-gradient(180deg, #fff7fb, #decde6);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-shadow: 0 1px 0 #fff;
}

.subpage .ui-action {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #687f8d;
  border-radius: 3px;
  color: #294252;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0 46%, rgba(255, 255, 255, 0.14) 47%),
    linear-gradient(180deg, #eaf8ff, #abd9eb 55%, #e0f2f9);
  box-shadow:
    inset 1px 1px 0 #fff,
    0 2px 0 rgba(72, 82, 89, 0.34);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
}

.subpage .ui-action:hover {
  filter: brightness(1.04);
  opacity: 1;
}

@media (max-width: 700px) {
  .subpage .content-window-body {
    padding: 14px;
  }
}


/* =========================
   SHARED APP CHROME
   HOME is the visual source for every page.
========================= */

body.home-page .shared-titlebar,
body.subpage .shared-titlebar {
  min-height: 48px;
  padding: 0 18px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #777d84;
  background: linear-gradient(#f8f8f8, #d8d9dd 52%, #f2f2f2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

body.home-page .shared-brand,
body.subpage .shared-brand {
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #172229;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
}

body.home-page .shared-brand .shared-brand-icon,
body.subpage .shared-brand .shared-brand-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
  object-fit: contain;
}

body.home-page .shared-window-controls,
body.subpage .shared-window-controls {
  display: flex;
  gap: 5px;
}

body.home-page .shared-window-controls button,
body.subpage .shared-window-controls button {
  width: 23px;
  height: 21px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #71787d;
  border-radius: 2px;
  color: #263139;
  background: linear-gradient(180deg, #fff 0%, #e3e5e6 44%, #bfc4c7 52%, #edf0f1 100%);
  box-shadow:
    inset 1px 1px 0 #fff,
    0 1px 1px rgba(43, 48, 51, 0.18);
  font: 10px/1 Arial, sans-serif;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

body.home-page .shared-window-controls button:hover,
body.home-page .shared-window-controls button[aria-pressed="true"],
body.subpage .shared-window-controls button:hover,
body.subpage .shared-window-controls button[aria-pressed="true"] {
  background: linear-gradient(180deg, #e9f3f7, #aebfc8);
}

body.home-page .shared-window-controls button:active,
body.subpage .shared-window-controls button:active {
  box-shadow: inset 0 3px 5px rgba(45, 57, 66, 0.28);
  transform: translateY(2px);
}

body.home-page .shared-window-controls #window-close:hover,
body.subpage .shared-window-controls button[data-window-action="close"]:hover,
body.subpage .shared-window-controls button[data-window-action="close"][aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #ffb4ad 0%, #e86258 46%, #a52019 52%, #d94c43 100%);
}

body.home-page .shared-window-controls #window-close,
body.subpage .shared-window-controls button[data-window-action="close"] {
  border-color: #8c2c27;
  color: #fff;
  background: linear-gradient(180deg, #f8a59e 0%, #d9534b 46%, #972019 52%, #cb443c 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 1px rgba(75, 24, 20, 0.32);
  text-shadow: 0 -1px 0 #791914;
}

body.home-page .shared-tabs,
body.subpage .shared-tabs {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0 12px;
  border-bottom: 6px solid #59656b;
  background: #d9e0e4;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #cbd1d4;
}

body.home-page .shared-tabs > a,
body.home-page .shared-tabs > span,
body.subpage .shared-tabs > a,
body.subpage .shared-tabs > span {
  min-height: 36px;
  padding: 10px 12px 7px;
  display: grid;
  place-items: center;
  position: relative;
  top: 0;
  border: 1px solid #658594;
  border-right: 0;
  border-radius: 0;
  color: #f4f8fa;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  background: linear-gradient(180deg, #cbe7f1 0%, #86b7c9 46%, #4f8094 52%, #79a7b8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -4px 0 rgba(35, 71, 84, 0.15);
  text-shadow: 0 -1px 0 #425b68;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

body.home-page .shared-tabs > :first-child,
body.subpage .shared-tabs > :first-child {
  border-radius: 8px 0 0 8px;
}

body.home-page .shared-tabs > :last-child,
body.subpage .shared-tabs > :last-child {
  border-right: 1px solid #658594;
  border-radius: 0 8px 8px 0;
}

body.home-page .shared-tabs > span,
body.subpage .shared-tabs > span,
body.home-page .shared-tabs > .is-soon,
body.subpage .shared-tabs > .is-soon,
body.home-page .shared-tabs > [aria-disabled="true"],
body.subpage .shared-tabs > [aria-disabled="true"],
body.home-page .shared-tabs > a[href="#"],
body.subpage .shared-tabs > a[href="#"] {
  color: #dbe0e2;
  background: linear-gradient(180deg, #aebfc6 0%, #8198a2 48%, #687d86 52%, #8da3ac 100%);
  opacity: 0.68;
  pointer-events: none;
  text-shadow: 0 1px 0 #59666b;
}

body.home-page .shared-tabs > a:hover,
body.subpage .shared-tabs > a:hover {
  color: #fff;
  background: linear-gradient(180deg, #ddf4fb 0%, #9bcbdb 47%, #5b91a7 52%, #89b7c7 100%);
  transform: none;
  opacity: 1;
}

body.home-page .shared-tabs > a[aria-current="page"],
body.subpage .shared-tabs > a[aria-current="page"] {
  z-index: 2;
  color: #26383f;
  background: linear-gradient(180deg, #f1fbff 0%, #b9dfea 46%, #77afc3 52%, #b5dce7 100%);
  border-color: #718b95;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 #d8eef5,
    0 1px 2px rgba(61, 76, 82, 0.34);
  text-shadow: 0 1px 0 #fff;
  transform: none;
  opacity: 1;
}

body.home-page .shared-tabs > a:focus-visible,
body.subpage .shared-tabs > a:focus-visible {
  z-index: 4;
  outline: 2px solid #fff;
  outline-offset: -4px;
}


/* =========================
   SHARED HANDMADE CURSOR
========================= */

.soft-cursor {
  display: none;
}

@media (pointer: fine) {
  body.custom-cursor-ready,
  body.custom-cursor-ready a,
  body.custom-cursor-ready button,
  body.custom-cursor-ready label,
  body.custom-cursor-ready input,
  body.custom-cursor-ready .shared-titlebar {
    cursor: none;
  }

  body.custom-cursor-ready .soft-cursor {
    width: 64px;
    height: 64px;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: block;
    pointer-events: none;
    transform: translate3d(-80px, -80px, 0);
  }

  .soft-cursor span {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
    background: url("../images/soft-plush-cursor.webp") center / contain no-repeat;
    filter: grayscale(1) contrast(0.68) brightness(1.48);
    transform-origin: 16px 11px;
    transition: transform 90ms ease, filter 90ms ease;
  }

  .soft-cursor.is-hovering span {
    filter: grayscale(1) contrast(0.72) brightness(1.56);
    transform: scale(1.10) rotate(-3deg);
  }

  .soft-cursor.is-pressed span {
    filter: grayscale(1) contrast(0.76) brightness(1.34);
    transform: scale(0.88, 0.82) rotate(4deg);
  }

  .soft-cursor.is-dragging span {
    background-image: url("../images/soft-plush-hand.webp");
    filter: grayscale(1) contrast(0.70) brightness(1.48);
    transform: translate(-11px, -8px) scale(1.18) rotate(-4deg);
  }
}


/* =========================
   SHARED APP SIZE / UTILITIES
========================= */

body.home-page,
body.subpage {
  --shared-app-width: min(1134px, calc(100vw - 24px));
}

.shared-system-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shared-visitor-counter {
  min-height: 23px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #81858a;
  background: #eceeef;
  box-shadow: inset 1px 1px 0 #fff;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.shared-visitor-counter b {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.shared-search-toggle {
  width: 25px;
  height: 25px;
  padding: 0;
  position: relative;
  border: 1px solid #71787d;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff 0%, #e3e5e6 44%, #bfc4c7 52%, #edf0f1 100%);
  box-shadow: inset 1px 1px 0 #fff, 0 1px 1px rgba(43, 48, 51, 0.18);
  cursor: pointer;
}

.shared-search-toggle > span {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 2px solid #333c46;
  border-radius: 50%;
}

.shared-search-toggle > span::after {
  content: "";
  width: 7px;
  height: 2px;
  position: absolute;
  right: -6px;
  bottom: -4px;
  background: #333c46;
  transform: rotate(45deg);
  transform-origin: left center;
}

.shared-search-toggle:hover,
.shared-search-toggle[aria-expanded="true"] {
  background: linear-gradient(#eaf6ff, #a9cce9);
}

.shared-search-toggle:active {
  box-shadow: inset 0 3px 5px rgba(45, 57, 66, 0.28);
  transform: translateY(2px);
}

.shared-search-panel {
  width: min(420px, calc(100% - 24px));
  padding: 12px;
  position: absolute;
  z-index: 30;
  top: 42px;
  right: 12px;
  border: 1px solid #60656b;
  background: linear-gradient(#f7f8f9, #d9dce0);
  box-shadow: 7px 8px 16px rgba(0, 0, 0, 0.28);
  font-family: "Courier New", monospace;
}

.shared-search-panel[hidden],
.shared-search-results:empty {
  display: none;
}

.shared-search-panel label {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.shared-search-input-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 6px;
}

.shared-search-input-row input,
.shared-search-input-row button {
  min-height: 34px;
  border: 1px solid #6f7479;
  border-radius: 0;
  font: 12px Arial, "Yu Gothic", sans-serif;
}

.shared-search-input-row input {
  min-width: 0;
  padding: 7px 9px;
  background: #fff;
}

.shared-search-input-row button {
  color: #fff;
  background: linear-gradient(#1982e9, #0756b8);
  font-weight: 800;
  cursor: pointer;
}

.shared-search-results {
  display: grid;
  gap: 1px;
  margin-top: 7px;
}

.shared-search-results a,
.shared-search-results p {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid #b7babd;
  background: #f7f7f7;
  font-size: 11px;
  line-height: 1.4;
}

.shared-search-results a:hover {
  color: #fff;
  background: #1268c5;
  opacity: 1;
}

@media (max-width: 700px) {
  body.home-page .shared-tabs,
  body.subpage .shared-tabs {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .shared-visitor-counter {
    display: none;
  }
}

@media (max-width: 430px) {
  body.home-page .shared-brand,
  body.subpage .shared-brand {
    font-size: 9px;
  }

  body.home-page .shared-window-controls button,
  body.subpage .shared-window-controls button {
    width: 20px;
  }

  .shared-system-actions {
    gap: 4px;
  }
}


/* =========================
   SHARED SUBPAGE HEADLINE PANEL
   A solid steel base with bands and reflected light.
========================= */

body.subpage .subpage-feature-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid #4f5d65;
  border-radius: 23px;
  background: #d3dde1;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -8px 0 rgba(82, 105, 116, 0.08),
    0 5px 0 rgba(55, 66, 72, 0.28),
    0 9px 14px rgba(45, 54, 59, 0.12);
}

/* HOME, FASHION and ABOUT use one optimized headline-frame footprint. */
body.home-page main.home-main .magazine-window > .shared-page-base > .portal-banner,
body.subpage .content-window-body > .subpage-feature-hero {
  min-height: 220px;
  border-width: 2px;
  border-style: solid;
  border-radius: 26px;
}

body.subpage.fashion-page .content-window-body,
body.subpage.about-page-shell .content-window-body {
  padding: 18px;
}

body.subpage.fashion-page .subpage-feature-hero,
body.subpage.about-page-shell .subpage-feature-hero {
  min-height: 220px;
  padding: 24px 34px;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
}

body.subpage .subpage-feature-hero::before {
  content: "";
  height: 32%;
  position: absolute;
  top: 34%;
  right: 0;
  left: 0;
  z-index: -1;
  border-top: 1px solid rgba(255, 255, 255, 0.52);
  border-bottom: 1px solid rgba(68, 91, 102, 0.16);
  background: rgba(101, 132, 146, 0.12);
}

body.subpage .subpage-feature-hero::after {
  content: "";
  width: 18%;
  height: 145%;
  position: absolute;
  top: -22%;
  left: 22%;
  z-index: -1;
  background: rgba(255, 255, 255, 0.24);
  transform: skewX(-14deg);
  pointer-events: none;
}

body.subpage .subpage-feature-hero > * {
  position: relative;
  z-index: 1;
}

/* FASHION: dark streaming-service hero with a fashion still underneath. */
body.subpage.fashion-page .subpage-feature-hero {
  border-color: #25151d;
  background-color: #0c090b;
  background-image:
    linear-gradient(90deg, rgba(8, 6, 8, 0.94) 0%, rgba(12, 7, 11, 0.76) 38%, rgba(29, 8, 20, 0.38) 68%, rgba(7, 6, 8, 0.78) 100%),
    linear-gradient(0deg, rgba(5, 5, 6, 0.70), transparent 65%),
    url("../images/free-magazines.webp");
  background-position: center, center, center 72%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -42px 46px rgba(0, 0, 0, 0.36),
    0 5px 0 rgba(40, 28, 35, 0.45),
    0 10px 18px rgba(18, 13, 16, 0.24);
}

@media (max-width: 700px) {
  body.subpage.about-page-shell .subpage-feature-hero {
    background-size: auto 155%;
  }
}

body.subpage.fashion-page .subpage-feature-hero::before {
  height: 33%;
  top: 35%;
  border-color: rgba(255, 255, 255, 0.20) transparent rgba(0, 0, 0, 0.40);
  background: rgba(129, 8, 65, 0.12);
}

body.subpage.fashion-page .subpage-feature-hero::after {
  width: 16%;
  left: 27%;
  background: rgba(255, 37, 139, 0.10);
}

/* ABOUT: generated photorealistic milk-chocolate tablet. */
body.subpage.about-page-shell .subpage-feature-hero {
  border-color: #4b2922;
  background-color: #6b3528;
  background-image: url("../images/about-chocolate-tile-texture.webp");
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 2px 2px 0 rgba(255, 224, 205, 0.30),
    inset -8px -10px 16px rgba(49, 17, 12, 0.30),
    0 5px 0 rgba(55, 36, 31, 0.38),
    0 10px 16px rgba(39, 27, 23, 0.18);
}

body.subpage.about-page-shell .subpage-feature-hero::before {
  height: 100%;
  top: 0;
  border: 0;
  background: linear-gradient(118deg, rgba(255, 238, 224, 0.12), transparent 31% 72%, rgba(41, 12, 8, 0.16));
}

body.subpage.about-page-shell .subpage-feature-hero::after {
  width: 12%;
  left: 21%;
  background: rgba(255, 235, 220, 0.08);
  transform: skewX(-11deg);
}

body.subpage.about-page-shell .subpage-feature-hero .ui-chip {
  position: relative;
  overflow: hidden;
  padding: 5px 12px 6px;
  border-color: #d8cab6;
  border-radius: 999px;
  color: #674438;
  background-color: #fffaf0;
  background-image:
    radial-gradient(circle at 17% 68%, rgba(220, 207, 186, 0.46) 0 2px, transparent 2.5px),
    radial-gradient(circle at 82% 31%, rgba(255, 255, 255, 0.96) 0 3px, transparent 3.5px),
    linear-gradient(180deg, #fff 0%, #fffaf0 47%, #e9ddc9 52%, #fffaf1 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 3px rgba(142, 118, 90, 0.18),
    0 2px 0 rgba(69, 34, 24, 0.44),
    0 4px 7px rgba(55, 23, 16, 0.20);
}

body.subpage.about-page-shell .subpage-feature-hero .ui-chip::after {
  content: "";
  height: 42%;
  position: absolute;
  top: 1px;
  right: 3px;
  left: 3px;
  border-radius: 999px 999px 45% 45%;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

@media (max-width: 700px) {
  body.subpage .subpage-feature-hero {
    border-radius: 17px;
  }
}


/* =========================
   RELOAD-RANDOMIZED MATERIAL HEADINGS
========================= */

body.subpage [data-material-heading] .material-letter {
  position: relative;
  display: inline-block;
  transform:
    translateY(var(--material-y, 0))
    rotate(var(--material-rotate, 0deg))
    scale(var(--material-scale, 1));
  transform-origin: center bottom;
}

body.subpage.fashion-page .subpage-feature-hero h1[data-material-heading="rhinestone"] {
  width: max-content;
  max-width: 100%;
  min-height: 104px;
  margin: 10px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, 0.25vw, 4px);
  color: transparent;
  font: 900 clamp(58px, 8.2vw, 108px)/0.88 "Arial Black", "Arial Narrow", sans-serif;
  letter-spacing: -0.09em;
  text-shadow: none;
}

body.subpage.fashion-page [data-material-heading="rhinestone"] .material-letter {
  background-color: var(--material-color, #ff2b91);
  background-image: radial-gradient(
    circle at 34% 30%,
    #fff 0 1.2px,
    #ffd9ec 1.4px 2.1px,
    rgba(126, 5, 61, 0.90) 2.4px 3.2px,
    transparent 3.5px
  );
  background-size: 7px 7px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(129, 4, 62, 0.96);
  filter:
    drop-shadow(0 1px 0 rgba(255, 214, 235, 0.92))
    drop-shadow(2px 5px 0 rgba(75, 2, 34, 0.74))
    drop-shadow(4px 11px 8px rgba(0, 0, 0, 0.54));
}

body.subpage.fashion-page [data-material-heading="rhinestone"] .material-letter.is-chunky {
  background-image: radial-gradient(
    circle at 34% 30%,
    #fff 0 2px,
    rgba(255, 255, 255, 0.94) 2.3px 3.6px,
    rgba(120, 4, 56, 0.88) 3.9px 5px,
    transparent 5.3px
  );
  background-size: 12px 12px;
  -webkit-text-stroke: 2px rgba(124, 3, 58, 0.96);
  filter:
    drop-shadow(0 2px 0 rgba(255, 216, 235, 0.94))
    drop-shadow(3px 7px 0 rgba(77, 1, 35, 0.82))
    drop-shadow(5px 14px 10px rgba(0, 0, 0, 0.58));
}

body.subpage.fashion-page .fashion-file-label,
body.subpage.fashion-page .fashion-hero-copy > p:last-child {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
}

body.subpage.fashion-page .subpage-feature-hero .ui-chip {
  border-color: #ff72b2;
  color: #fff;
  background: #e20f72;
  box-shadow: 0 2px 0 #65012d, 0 5px 8px rgba(0, 0, 0, 0.34);
  text-shadow: 0 -1px 0 #85023d;
}

body.subpage.fashion-page .fashion-status {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  background: rgba(12, 10, 12, 0.76);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.17), 0 5px 12px rgba(0, 0, 0, 0.30);
}

body.subpage.fashion-page .fashion-status div {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

body.subpage.fashion-page .fashion-status dt {
  color: #d9d9d9;
}

body.subpage.fashion-page .fashion-status dd {
  color: #ff66aa;
}

body.subpage.about-page-shell .subpage-feature-hero h1[data-material-heading="paper"] {
  width: max-content;
  max-width: 100%;
  min-height: 104px;
  margin: 10px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1px, 0.45vw, 7px);
  color: #26343c;
  font-size: clamp(58px, 8.2vw, 108px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-shadow: none;
}

body.subpage.about-page-shell [data-material-heading="paper"] .material-letter {
  min-width: 0.78em;
  min-height: 1.02em;
  padding: 0.02em 0.10em 0.09em;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(65, 65, 62, 0.28);
  color: var(--material-ink, #273238);
  background: var(--material-color, #e7e3d8);
  box-shadow:
    1px 4px 0 rgba(75, 78, 77, 0.42),
    4px 9px 8px rgba(52, 57, 55, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  font-family: var(--material-font, "Arial Black"), sans-serif;
  font-size: 0.82em;
  letter-spacing: -0.08em;
}

body.subpage.about-page-shell [data-material-heading="paper"] .material-letter.is-die {
  min-width: 1.03em;
  min-height: 1.03em;
  padding: 0.01em 0.08em 0.10em;
  border: 1px solid #96948e;
  border-radius: 0.12em;
  color: #262626;
  background-color: #f4f1e8;
  background-image:
    radial-gradient(circle at 14% 17%, #686761 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 86% 17%, #686761 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 14% 83%, #686761 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 86% 83%, #686761 0 2.2px, transparent 2.6px),
    linear-gradient(145deg, #fff 0%, #eee9dc 58%, var(--material-color, #d8d4ca) 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.9),
    inset -3px -3px 5px rgba(104, 100, 91, 0.18),
    1px 6px 0 #9a9993,
    4px 12px 9px rgba(45, 47, 45, 0.28);
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 0.76em;
}

body.subpage.about-page-shell .subpage-feature-hero .about-lead {
  margin-top: 5px;
  color: #fff3e9;
  text-shadow: 0 1px 1px rgba(55, 22, 15, 0.76);
}

@media (max-width: 700px) {
  body.subpage.fashion-page .content-window-body,
  body.subpage.about-page-shell .content-window-body {
    padding: 12px;
  }

  body.home-page main.home-main .magazine-window > .shared-page-base > .portal-banner,
  body.subpage .content-window-body > .subpage-feature-hero {
    min-height: 190px;
    border-radius: 18px;
  }
}

@media (max-width: 700px) {
  body.subpage.fashion-page .subpage-feature-hero h1[data-material-heading="rhinestone"] {
    font-size: clamp(43px, 15vw, 76px);
  }

  body.subpage.about-page-shell .subpage-feature-hero h1[data-material-heading="paper"] {
    font-size: clamp(39px, 14vw, 70px);
  }
}


/* =========================
   FINAL SHARED CHROME METRICS
   HOME / FASHION / ABOUT / ARTICLE use exactly the same top frame.
========================= */

body.home-page,
body.subpage {
  --shared-titlebar-height: 48px;
  --shared-tab-height: 36px;
}

body.home-page .shared-titlebar,
body.subpage .shared-titlebar {
  min-height: var(--shared-titlebar-height);
}

body.home-page .shared-tabs,
body.subpage .shared-tabs {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 12px;
}

body.home-page .shared-tabs > a,
body.home-page .shared-tabs > span,
body.subpage .shared-tabs > a,
body.subpage .shared-tabs > span {
  height: var(--shared-tab-height);
  min-height: var(--shared-tab-height);
  padding: 0 12px;
  line-height: 1.1;
}

@media (max-width: 700px) {
  body.home-page,
  body.subpage {
    --shared-app-width: 100%;
    --shared-tab-height: 44px;
  }

  body.home-page .shared-tabs,
  body.subpage .shared-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-inline: 8px;
    overflow: hidden;
  }

  body.home-page .shared-tabs > a,
  body.home-page .shared-tabs > span,
  body.subpage .shared-tabs > a,
  body.subpage .shared-tabs > span {
    min-width: 0;
    padding-inline: 2px;
    white-space: normal;
    text-align: center;
    font-size: clamp(7px, 2.2vw, 9px);
    line-height: 1.15;
  }

  body.home-page .shared-brand,
  body.subpage .shared-brand {
    min-width: 0;
  }

  body.home-page .shared-brand > span,
  body.subpage .shared-brand > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

body.home-page .shared-window-controls button:focus-visible,
body.subpage .shared-window-controls button:focus-visible,
body.home-page .shared-search-toggle:focus-visible,
body.subpage .shared-search-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}


/* ===== OUTER PAGE BACKGROUND / 2026-08-18 =====
   ABOUT keeps its own wallpaper. All other subpages use #cccccc.
*/
body.subpage:not(.about-page-shell) {
  background: #cccccc !important;
  background-image: none !important;
}

/* =========================================================
   SHARED TOP CHROME / HOME VISUAL SOURCE OF TRUTH
   2026-08-19

   HOME itself is not redesigned here. These values are a snapshot
   of HOME's current computed top chrome, made explicit so every
   subpage inherits the same type, highlights, shadows and controls.
   ========================================================= */

body.home-page,
body.subpage {
  --shared-chrome-title-bg: linear-gradient(#f8f8f8, #d8d9dd 52%, #f2f2f2);
  --shared-chrome-title-line: #777d84;
  --shared-chrome-title-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);

  --shared-chrome-brand-color: #172229;
  --shared-chrome-brand-shadow: 0 1px 0 #fff;
  --shared-chrome-title-font: "Courier New", monospace;

  /* HOME's tabs inherit this stack from index.css. Making it explicit
     here prevents subpages from drifting to Segoe UI/Tahoma. */
  --shared-chrome-tab-font: Arial, "Helvetica Neue", "Yu Gothic", sans-serif;
  --shared-chrome-tab-bg: linear-gradient(180deg, #cbe7f1 0%, #86b7c9 46%, #4f8094 52%, #79a7b8 100%);
  --shared-chrome-tab-hover-bg: linear-gradient(180deg, #ddf4fb 0%, #9bcbdb 47%, #5b91a7 52%, #89b7c7 100%);
  --shared-chrome-tab-current-bg: linear-gradient(180deg, #f1fbff 0%, #b9dfea 46%, #77afc3 52%, #b5dce7 100%);
  --shared-chrome-tab-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -4px 0 rgba(35, 71, 84, 0.15);
  --shared-chrome-tab-current-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 #d8eef5,
    0 1px 2px rgba(61, 76, 82, 0.34);
}

body.home-page .shared-titlebar,
body.subpage .shared-titlebar {
  background: var(--shared-chrome-title-bg);
  border-bottom-color: var(--shared-chrome-title-line);
  box-shadow: var(--shared-chrome-title-shadow);
  font-family: var(--shared-chrome-title-font);
}

body.home-page .shared-brand,
body.subpage .shared-brand {
  color: var(--shared-chrome-brand-color);
  text-shadow: var(--shared-chrome-brand-shadow);
}

body.home-page .shared-tabs > a,
body.home-page .shared-tabs > span,
body.subpage .shared-tabs > a,
body.subpage .shared-tabs > span {
  font-family: var(--shared-chrome-tab-font);
  background: var(--shared-chrome-tab-bg);
  box-shadow: var(--shared-chrome-tab-shadow);
}

body.home-page .shared-tabs > a:hover,
body.subpage .shared-tabs > a:hover {
  background: var(--shared-chrome-tab-hover-bg);
}

body.home-page .shared-tabs > a[aria-current="page"],
body.subpage .shared-tabs > a[aria-current="page"] {
  background: var(--shared-chrome-tab-current-bg);
  box-shadow: var(--shared-chrome-tab-current-shadow);
}

/* Preserve the shared unavailable/soon state after the base chrome lock. */
body.home-page .shared-tabs > span,
body.subpage .shared-tabs > span,
body.home-page .shared-tabs > .is-soon,
body.subpage .shared-tabs > .is-soon,
body.home-page .shared-tabs > [aria-disabled="true"],
body.subpage .shared-tabs > [aria-disabled="true"],
body.home-page .shared-tabs > a[href="#"],
body.subpage .shared-tabs > a[href="#"] {
  color: #dbe0e2;
  background: linear-gradient(180deg, #aebfc6 0%, #8198a2 48%, #687d86 52%, #8da3ac 100%);
  opacity: 0.68;
  pointer-events: none;
  text-shadow: 0 1px 0 #59666b;
}


/* All outer-frame geometry/positioning above this point has been removed.
   The block below is the single source of truth for HOME and every app page. */

/* Keep the document canvas width stable for every page.
   This belongs to the shared template; no PHOTO-only offset is used. */
html {
  scrollbar-gutter: stable;
}

/* =========================================================
   OH MY ZINE / SHARED BASE WINDOW TEMPLATE
   2026-08-22

   Source of truth: HOME's existing .home-main + .magazine-window.
   The silver title text and active tab stay page-specific in HTML.
   ABOUT's body wallpaper stays page-specific; only the app window is shared.
   ========================================================= */

/* HOME's outer page spacing is now the shared spacing for every app page. */
body.home-page .home-main,
body.subpage {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: clamp(12px, 2.4vw, 34px);
}

/* Match HOME's border-box width calculation so the shared frame starts
   at the exact same horizontal position on every subpage. */
body.subpage {
  box-sizing: border-box;
}

/* HOME .magazine-window copied as the one base-window definition. */
.shared-app-window {
  width: var(--shared-app-width);
  max-width: none;
  min-height: 0;
  margin: 0 auto !important;
  position: relative;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  border: 2px solid #6b6e73 !important;
  border-radius: 28px !important;
  background: #d5d7da !important;
  box-shadow:
    0 14px 30px rgba(25, 22, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Keep the legacy subpage wrapper for JS, but remove its visual box.
   Its children then participate in exactly the same frame as HOME. */
body.subpage .shared-app-window > .subpage-header:not(.phone-fashion-header) {
  display: contents !important;
}

/* The copied FASHION phone chrome must never become a second PC header. */
body.subpage .shared-app-window > .phone-fashion-header {
  display: none !important;
}

/* The long surface below the blue tabs is part of the shared template. */
.shared-page-base {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 !important;
  flex: 0 0 auto;
  background: #e7ebed;
}

/* Subpage content lives inside the common base instead of drawing a second
   outer window frame. Page-specific inner backgrounds/content remain intact. */
body.subpage .shared-page-base > .content-window {
  width: 100%;
  max-width: none;
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The shared shell owns the full outer shape; no header-only outer shadow. */
body.subpage .shared-app-window .subpage-header,
body.subpage .shared-app-window .subpage-main {
  width: 100%;
  max-width: none;
}

/* HOME's existing full-window states, applied to the common shell. */
.shared-app-window.is-maximized,
body.subpage.is-subpage-maximized .shared-app-window {
  width: 100% !important;
  min-height: 100vh;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}

.shared-app-window.is-minimized,
body.subpage.is-subpage-minimized .shared-app-window {
  min-height: 0;
}

body.home-page.window-maximized .home-main,
body.subpage.is-subpage-maximized {
  padding: 0;
}

@media (max-width: 700px) {
  body.home-page .home-main,
  body.subpage {
    padding: 7px;
  }

  .shared-app-window {
    width: 100%;
    min-height: calc(100vh - 14px);
  }
}

/* =========================================================
   SHARED CLOSED PROGRAM SCREEN
   HOME's existing closed-state visual is the source of truth.
   ========================================================= */
.shared-app-window[hidden] {
  display: none !important;
}

.closed-screen {
  width: min(680px, calc(100% - 24px));
  margin: 15vh auto 0;
  padding: clamp(36px, 7vw, 76px) 24px;
  border: 2px solid #3f4144;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 1px, transparent 1px 7px),
    #c7c9cd;
  box-shadow: 11px 11px 0 rgba(34, 25, 20, 0.34);
  text-align: center;
}

.closed-screen[hidden] { display: none !important; }
.closed-screen p {
  margin: 0 0 12px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.closed-screen h1,
.closed-screen h2 {
  margin: 0;
  font-family: Arial Black, Impact, sans-serif;
  font-size: clamp(48px, 10vw, 96px);
  font-style: italic;
  letter-spacing: -0.08em;
  line-height: 1;
}
.closed-screen button {
  min-height: 38px;
  margin-top: 28px;
  padding: 0 18px;
  border: 1px solid #76546b;
  border-radius: 999px;
  color: #172027;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.98) 0 18%, transparent 52%),
    linear-gradient(180deg, #fff1f8 0%, #f7d5e8 37%, #e7a8cb 49%, #efc2dc 72%, #c983ac 100%);
  box-shadow:
    inset 0 3px 2px rgba(255, 255, 255, 1),
    inset 3px 0 5px rgba(255, 255, 255, 0.48),
    inset -3px 0 5px rgba(104, 56, 84, 0.13),
    inset 0 -5px 7px rgba(104, 56, 84, 0.25);
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 #fff;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}
.closed-screen button:hover {
  color: #172027;
  background:
    radial-gradient(ellipse at 50% 4%, #fff 0 20%, transparent 54%),
    linear-gradient(180deg, #fff7fb 0%, #fbe1ef 37%, #efb6d5 49%, #f5cfe4 72%, #d391b8 100%);
  box-shadow:
    inset 0 3px 2px #fff,
    inset 3px 0 5px rgba(255, 255, 255, 0.58),
    inset -3px 0 5px rgba(104, 56, 84, 0.10),
    inset 0 -5px 7px rgba(104, 56, 84, 0.21);
  filter: none;
  transform: translateY(-1px);
}
.closed-screen button:active {
  box-shadow:
    inset 0 5px 8px rgba(66, 76, 84, 0.30),
    inset 0 -2px 3px rgba(255, 255, 255, 0.72);
  transform: translateY(1px) scale(0.992);
}

/* HOME's real narrow-screen shell values, shared without redesign. */
@media (max-width: 720px) {
  body.home-page .home-main,
  body.subpage { padding: 8px; }
  .shared-app-window { border-radius: 17px !important; }
}