/* Hallmark · genre: editorial · macrostructure: Profile column · theme: studied-DNA (lit.link + pecoli) · nav: none · footer: Ft2 (値は tokens.css) */
@import url("tokens.css");

/* ---------- 土台 ---------- */
html { overflow-x: clip; scroll-behavior: smooth; color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip; margin: 0; min-height: 100dvh;
  background: var(--color-paper); color: var(--color-ink);   /* 1023px までは帯の外も真っ白(オーナー指示)。帯の縁は影だけで示す */
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8;
  font-feature-settings: "palt" 1;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
main, header, footer { min-width: 0; }
a { color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: var(--color-tap); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
h1, h2 { text-wrap: balance; margin: 0; }
[id] { scroll-margin-top: var(--space-md); }
::selection { background: var(--color-ink); color: var(--color-paper); }

/* キーボードの人だけに見える「本文へ飛ぶ」 */
.skip { position: absolute; left: var(--space-md); top: var(--space-sm); z-index: 10; padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); text-decoration: none; border-radius: 6px; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-color: var(--color-paper); outline-offset: -4px; }

/* ---------- 帯。画面が 480px より広ければ真ん中に立ち、狭ければ画面いっぱい。余りは終わりに持たせる ---------- */
/* 左右の余白は、ノッチのある画面では安全域の分だけ広げる */
.card { width: min(100%, var(--column)); min-height: 100dvh; margin-inline: auto; box-sizing: border-box; padding: var(--card-top) max(var(--column-gutter), env(safe-area-inset-right, 0px)) max(var(--card-bottom), env(safe-area-inset-bottom, 0px)) max(var(--column-gutter), env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: var(--space-xl); background: var(--color-paper); }   /* 1023px までは影を付けない(帯の外と同じ白にする) */

/* ---------- 名前と X のしるし。真ん中そろえ ---------- */
.head { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.head__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-mast-sp); letter-spacing: 0.12em; line-height: 1.2; overflow-wrap: anywhere; }
.head__name a { text-decoration: none; white-space: nowrap; display: inline-block; min-height: 44px; line-height: 44px; }   /* カーソルを当てても下線は出さない(オーナー指示) */
/* X のしるしは、墨の角丸の四角に白い X(オーナー指定の絵)。色は tokens の名前で当てる */
.head__x { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: var(--x-offset); border-radius: var(--radius-x-mark); }
.head__x svg { display: block; width: var(--icon-x); height: var(--icon-x); }
.head__x rect { fill: var(--color-x-mark); }
.head__x path { fill: var(--color-on-x-mark); }
.head__x:focus-visible { border-radius: var(--radius-x-mark); }
@media (hover: hover) and (pointer: fine) {
  .head__x { transition: opacity var(--dur-short) var(--ease-out); }
  .head__x:hover { opacity: var(--icon-x-dim); }   /* 色は変えず、薄くするだけ */
}

/* ---------- 作品の札。写真の下に題名。札のどこを押しても作品へ ---------- */
.works { display: grid; gap: var(--space-lg); }
.tile { position: relative; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--tile-radius); overflow: hidden; isolation: isolate; }
.tile__media { margin: 0; aspect-ratio: 1280 / 788; overflow: hidden; background: var(--color-paper-2); }
.tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__caption { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.tile__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.3; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.tile__title a { text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: 0; }   /* 札のどこを押しても作品へ(.tile が基準) */
.tile:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.tile:has(a:focus-visible) .tile__title a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .tile__media img { transition: transform var(--dur-long) var(--ease-out); }
  .tile:hover .tile__media img { transform: scale(1.02); }   /* 題名には下線を出さない。写真の寄りだけ */
}

/* ---------- 終わり(Ft2)。真ん中に 押原一香.com と © の2行 ---------- */
.foot { display: grid; justify-items: center; align-content: end; gap: var(--space-2xs); padding-top: var(--space-xl); text-align: center; }
.foot__site { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-foot-site); letter-spacing: 0.12em; }
.foot__site a { text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }
.foot__copy { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 0.6em; font-size: var(--text-foot-copy); letter-spacing: 0.08em; color: var(--color-neutral); }
.foot__copy span { white-space: nowrap; }   /* 折れるときは「© 2026 Oshihara Ichika.」と「All rights reserved.」の間で */

/* ---------- 区切りは 1023px / 1024px の1つだけ(オーナー指示)。1024px から、題字を少し大きく、地を pecoli の作りに ---------- */
@media (min-width: 1024px) {
  .head__name { font-size: var(--text-mast-pc); }
  .card { box-shadow: var(--shadow-band); }   /* 帯の影は、色の地の上でだけ */
  html { background:
    radial-gradient(ellipse at 2% 18%, color-mix(in oklch, var(--glow-light) 94%, transparent) 0, color-mix(in oklch, var(--glow-light) 42%, transparent) 18%, transparent 41%),
    radial-gradient(ellipse at 100% 82%, color-mix(in oklch, var(--glow-dark) 78%, transparent) 0, color-mix(in oklch, var(--glow-dark-2) 46%, transparent) 23%, transparent 49%),
    linear-gradient(118deg, transparent 0 34%, color-mix(in oklch, var(--color-paper) 72%, transparent) 47%, transparent 62%),
    linear-gradient(135deg, var(--base-1) 0%, var(--base-2) 48%, var(--base-3) 100%); }
  body { background: transparent; }   /* 地は html に描く。body を透かして見せる */
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile__media img { transition: none; }
  .tile:hover .tile__media img { transform: none; }
  .head__x { transition: none; }
}