/*
Theme Name: AYUMI IKEDA Portfolio
Theme URI: https://ayumiikeda.jp/
Author: AYUMI IKEDA / OpenAI
Description: A minimal, grid-driven photography portfolio theme for AYUMI IKEDA. Two-column square fields, configurable gutters, project pages, hero compositions and a white lightbox.
Version: 1.5.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ayumi-ikeda
*/

:root {
  --ayi-gutter-desktop: 5vw;
  --ayi-gutter-mobile: 5vw;
  --ayi-gutter: var(--ayi-gutter-desktop);
  --ayi-hero-top: 7vw;
  --ayi-hero-bottom: 5vw;
  --ayi-header-top: 2.5vw;
  --ayi-header-bottom: 2.5vw;
  --ayi-brand-size: 30px;
  --ayi-brand-size-mobile: 20px;
  --ayi-brand-weight: 900;
  --ayi-brand-tracking: -0.04em;
  --ayi-body-size: 14px;
  --ayi-body-weight: 400;
  --ayi-nav-weight: 400;
  --ayi-h1-size: 18px;
  --ayi-h1-weight: 700;
  --ayi-h1-tracking: 0em;
  --ayi-motion-fast: 160ms;
  --ayi-motion-normal: 280ms;
  --ayi-motion-slow: 420ms;
  --ayi-ease-standard: cubic-bezier(.2,.7,.2,1);
  --ayi-ease-enter: cubic-bezier(.16,1,.3,1);
  --ayi-ease-exit: cubic-bezier(.7,0,.84,0);
}

* { box-sizing: border-box; }
html { background: #fff; color: #000; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--ayi-body-font, "Inter", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--ayi-body-size);
  font-weight: var(--ayi-body-weight);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
button, input, textarea, select { font: inherit; }

.ayi-site-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ayi-gutter);
  padding: var(--ayi-header-top) var(--ayi-gutter) var(--ayi-header-bottom);
  background: #fff;
}
.ayi-site-header.is-sticky {
  position: sticky;
  top: 0;
}
.ayi-brand {
  font-family: var(--ayi-brand-font, "Archivo", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--ayi-brand-size);
  font-weight: var(--ayi-brand-weight);
  line-height: .92;
  white-space: nowrap;
  letter-spacing: var(--ayi-brand-tracking);
}
.ayi-kerned { letter-spacing: 0; white-space: nowrap; }
.ayi-kerned-char { display: inline-block; }

.ayi-nav { margin-left: auto; }
.ayi-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.ayi-nav a {
  display: inline-block;
  font-weight: var(--ayi-nav-weight);
  transition: opacity var(--ayi-motion-fast) var(--ayi-ease-standard), text-decoration-color var(--ayi-motion-fast) var(--ayi-ease-standard), font-weight var(--ayi-motion-fast) var(--ayi-ease-standard);
}
.ayi-hover-opacity .ayi-nav a:hover,
.ayi-hover-opacity .ayi-back-link:hover { opacity: .55; }
.ayi-hover-underline .ayi-nav a:hover,
.ayi-hover-underline .ayi-back-link:hover { text-decoration: underline; text-underline-offset: .18em; }
.ayi-hover-weight .ayi-nav a:hover,
.ayi-hover-weight .ayi-back-link:hover { font-weight: 600; }

.ayi-active-weight .current-menu-item > a,
.ayi-active-weight .current_page_item > a { font-weight: 600; }
.ayi-active-underline .current-menu-item > a,
.ayi-active-underline .current_page_item > a { text-decoration: underline; text-underline-offset: .18em; }
.ayi-active-opacity .current-menu-item > a,
.ayi-active-opacity .current_page_item > a { opacity: .55; }

.ayi-project-head {
  position: relative;
  min-height: var(--ayi-gutter);
  margin: 0 var(--ayi-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--ayi-h1-padding-top) 0 var(--ayi-h1-padding-bottom);
}
.ayi-project-head .ayi-back-link { justify-self: start; }
.ayi-project-title {
  justify-self: center;
  margin: 0;
  font-family: var(--ayi-h1-font, var(--ayi-brand-font, "Archivo", sans-serif));
  font-size: var(--ayi-h1-size);
  font-weight: var(--ayi-h1-weight);
  line-height: 1;
  letter-spacing: var(--ayi-h1-tracking);
  text-align: center;
}

.ayi-hero-wrap {
  margin-left: var(--ayi-gutter);
  margin-right: var(--ayi-gutter);
  margin-top: var(--ayi-hero-top);
  margin-bottom: var(--ayi-hero-bottom);
}
.ayi-h1-above-hero .ayi-hero-wrap { margin-top: calc(var(--ayi-hero-top) * .65); }
.ayi-hero-field {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--ayi-hero-viewport-top, 0px) - var(--ayi-gutter));
  min-height: 1px;
  overflow: hidden;
  background: #fff;
}
.ayi-hero-field img,
.ayi-grid-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--ayi-pos-x, 50%) var(--ayi-pos-y, 50%);
  transform: scale(var(--ayi-scale, 1));
  transform-origin: center;
}


/* Hero is clickable while preserving the field as the composition viewport. */
.ayi-hero-action {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}
.ayi-hero-action .ayi-hero-image { pointer-events: none; }

.ayi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ayi-gutter);
  padding: 0 var(--ayi-gutter) var(--ayi-gutter);
}
.ayi-grid-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.ayi-grid-image { cursor: default; }
.ayi-grid-image.is-clickable { cursor: pointer; }
.ayi-grid-text {
  /* Text starts on the same square rhythm as image/blank fields, but unlike
     photography it may grow vertically. Nested scrolling is intentionally
     forbidden: the document itself is the only scroll surface. */
  aspect-ratio: auto;
  min-height: calc((100vw - (3 * var(--ayi-gutter))) / 2);
  height: auto;
  overflow: visible;
}
.ayi-grid-text-inner { width: 100%; min-height: 100%; overflow: visible; }
.ayi-grid-blank { pointer-events: none; }

.ayi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: #fff;
  color: #000;
}
.ayi-lightbox.is-open { display: block; }
.ayi-lightbox-stage {
  position: absolute;
  inset: var(--ayi-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ayi-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
.ayi-lightbox-info {
  position: absolute;
  right: var(--ayi-gutter);
  bottom: var(--ayi-gutter);
  max-width: min(34ch, 38vw);
  font-size: .82em;
  line-height: 1.4.25;
  text-align: left;
  z-index: 3;
}
.ayi-lightbox-close,
.ayi-lightbox-prev,
.ayi-lightbox-next {
  position: absolute;
  z-index: 4;
  border: 0;
  background: transparent;
  color: #000;
  padding: 12px;
  cursor: pointer;
  transition: opacity var(--ayi-motion-fast) var(--ayi-ease-standard);
}
.ayi-lightbox-close:hover,
.ayi-lightbox-prev:hover,
.ayi-lightbox-next:hover { opacity: .5; }
.ayi-lightbox-close { top: calc(var(--ayi-gutter) * .35); right: calc(var(--ayi-gutter) * .35); font-size: 24px; line-height: 1; }
.ayi-lightbox-prev { left: calc(var(--ayi-gutter) * .2); top: 50%; transform: translateY(-50%); font-size: 24px; }
.ayi-lightbox-next { right: calc(var(--ayi-gutter) * .2); top: 50%; transform: translateY(-50%); font-size: 24px; }

.ayi-lightbox[data-transition="fade"] .ayi-lightbox-image.is-changing { opacity: 0; transition: opacity var(--ayi-motion-normal) var(--ayi-ease-standard); }
.ayi-lightbox[data-transition="slide"] .ayi-lightbox-image.is-changing { opacity: 0; transform: translate3d(14px,0,0); transition: opacity var(--ayi-motion-normal) var(--ayi-ease-standard), transform var(--ayi-motion-normal) var(--ayi-ease-standard); }
.ayi-lightbox[data-open-transition="fade"] { animation: ayiFadeIn var(--ayi-motion-normal) var(--ayi-ease-enter); }
.ayi-lightbox[data-open-transition="expand"] { animation: ayiFadeIn var(--ayi-motion-normal) var(--ayi-ease-enter); }
@keyframes ayiFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ayi-footer { min-height: var(--ayi-gutter); }
.ayi-screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 767px) {
  :root {
    --ayi-gutter: var(--ayi-gutter-mobile);
    --ayi-header-core-padding-top: var(--ayi-header-core-padding-top-mobile);
    --ayi-header-core-padding-bottom: var(--ayi-header-core-padding-bottom-mobile);
    --ayi-h1-padding-top: var(--ayi-h1-padding-top-mobile);
    --ayi-h1-padding-bottom: var(--ayi-h1-padding-bottom-mobile);
  }
  .ayi-site-header { gap: var(--ayi-gutter); align-items: flex-start; }
  .ayi-brand { font-size: var(--ayi-brand-size-mobile); }
  .ayi-nav ul { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
  .ayi-lightbox-info { max-width: 44vw; font-size: .72em; }
  .ayi-grid.ayi-grid-mobile-single { grid-template-columns: minmax(0, 1fr); }
  .ayi-grid.ayi-grid-mobile-single .ayi-grid-text { min-height: calc(100vw - (2 * var(--ayi-gutter))); }
  .ayi-grid.ayi-grid-mobile-single .ayi-auto-blank { display: none; }
}

@media (min-width: 768px) {
  :root { --ayi-gutter: var(--ayi-gutter-desktop); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* v1.1 — field composition uses true translation, so both axes remain editable regardless of source aspect ratio. */
.ayi-grid-image {
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  outline-offset: 2px;
}
.ayi-grid-image img {
  object-position: 50% 50%;
  transform: translate(var(--ayi-shift-x, 0%), var(--ayi-shift-y, 0%)) scale(var(--ayi-scale, 1));
}
.ayi-hero-field img {
  object-position: 50% 50%;
  transform: translate(var(--ayi-hero-lx, 0%), var(--ayi-hero-ly, 0%)) scale(var(--ayi-hero-ls, 1));
}
@media (orientation: portrait) {
  .ayi-hero-field img {
    transform: translate(var(--ayi-hero-px, 0%), var(--ayi-hero-py, 0%)) scale(var(--ayi-hero-ps, 1));
  }
}

/* The roomy top/bottom spaces scroll away; only the compact core can remain sticky. */
.ayi-header-shell { position: relative; background:#fff; }
.ayi-header-space-top { height: var(--ayi-header-top); }
.ayi-header-space-bottom { height: var(--ayi-header-bottom); }
.ayi-site-header {
  padding: var(--ayi-header-core-padding-top) var(--ayi-gutter) var(--ayi-header-core-padding-bottom);
}
.ayi-site-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  isolation: isolate;
}
/* Opaque white mask extending above the sticky core. This prevents page imagery
   from showing through translucent browser chrome / overscroll areas. */
.ayi-site-header.is-sticky::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: max(100vh, 100dvh);
  background: #fff;
  pointer-events: none;
}
.ayi-header-shell.has-sticky { display: contents; }

.ayi-footer {
  min-height: 0;
  padding: var(--ayi-footer-padding) var(--ayi-gutter);
  font-size: var(--ayi-footer-size);
  background:#fff;
}
.ayi-footer-inner { width:100%; }


/* Lightbox navigation: geometric arrows drawn from straight lines, not font glyphs. */
.ayi-lightbox-prev,
.ayi-lightbox-next { width: 48px; height: 64px; font-size: 0; }
.ayi-arrow-icon { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); }
.ayi-arrow-icon::before,
.ayi-arrow-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1px; background: currentColor; transform-origin: 0 50%; }
.ayi-lightbox-next .ayi-arrow-icon::before { transform: rotate(135deg); }
.ayi-lightbox-next .ayi-arrow-icon::after { transform: rotate(-135deg); }
.ayi-lightbox-prev .ayi-arrow-icon::before { transform: rotate(-45deg); }
.ayi-lightbox-prev .ayi-arrow-icon::after { transform: rotate(45deg); }
/* Compact: shorter arms. */
.ayi-lightbox[data-arrow-style="compact"] .ayi-arrow-icon::before,
.ayi-lightbox[data-arrow-style="compact"] .ayi-arrow-icon::after { width: 12px; }
/* Wide: shallower angle and longer arms. */
.ayi-lightbox[data-arrow-style="wide"] .ayi-arrow-icon::before,
.ayi-lightbox[data-arrow-style="wide"] .ayi-arrow-icon::after { width: 22px; }
.ayi-lightbox[data-arrow-style="wide"] .ayi-lightbox-next .ayi-arrow-icon::before { transform: rotate(148deg); }
.ayi-lightbox[data-arrow-style="wide"] .ayi-lightbox-next .ayi-arrow-icon::after { transform: rotate(-148deg); }
.ayi-lightbox[data-arrow-style="wide"] .ayi-lightbox-prev .ayi-arrow-icon::before { transform: rotate(-32deg); }
.ayi-lightbox[data-arrow-style="wide"] .ayi-lightbox-prev .ayi-arrow-icon::after { transform: rotate(32deg); }
/* Line arrow: two-line chevron plus a straight stem. */
.ayi-lightbox[data-arrow-style="line"] .ayi-arrow-icon { width: 24px; }
.ayi-lightbox[data-arrow-style="line"] .ayi-arrow-icon::before,
.ayi-lightbox[data-arrow-style="line"] .ayi-arrow-icon::after { width: 12px; }
.ayi-lightbox[data-arrow-style="line"] .ayi-lightbox-next .ayi-arrow-icon { border-bottom: 1px solid currentColor; transform: translate(-50%,-50%) translateY(-8px); }
.ayi-lightbox[data-arrow-style="line"] .ayi-lightbox-prev .ayi-arrow-icon { border-bottom: 1px solid currentColor; transform: translate(-50%,-50%) translateY(-8px); }