@charset "UTF-8";

/* ==========================================================================
   RAYGENCE corporate site
   Values are transcribed from the design comps (Raygence Top / Company /
   Contact .dc.html). Do not "improve" them: the spec fixes the palette at six
   colours, forbids animation, cards, shadows and rounded corners, and treats
   whitespace as the primary design element.
   ========================================================================== */

:root {
  /* Palette — six colours, no additions. */
  --bg: #FDFDFC;
  --text: #1B1B1B;
  --text-sub: #6B6560;
  --rule: #E5E1DB;
  --accent: #A8763E;
  --surface: #F5F3EF;

  /* The wordmark is referenced here only, so the official logo replaces the
     interim one by swapping this file (or this single declaration). */
  --logo: url("../img/logo.svg");
  /* Outlined at Inter Light: advance / cap-height. Widths below derive from it. */
  --logo-ratio: 10.494;

  --container: 880px;
  --gutter: 0px;
  --header-pad: 80px;

  --font: 'Helvetica Neue', 'Inter', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-latin: 'Helvetica Neue', 'Inter', Arial, sans-serif;

  /* Section rhythm: rule to heading 56px, heading to next rule 140/200px. */
  --section-top: 56px;
  --section-bottom: 140px;
  --section-bottom-lg: 200px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Paper grain. The very high z-index is intentional (it must sit above every
   page layer); pointer-events:none is required so it never eats clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.62 0 0 0 0 0.62 0 0 0 1 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size: 120px 120px;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Latin runs mixed into Japanese copy get a touch of tracking. */
.latin {
  letter-spacing: 0.06em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Wordmark ------------------------------------------------------------ */

.wordmark {
  display: block;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  max-width: 100%;
}

/* Heights are the cap-heights of the comp's type sizes (15px and 48px at
   Inter's 1490/2048 cap ratio); widths follow --logo-ratio. */
.wordmark--small {
  width: 114.4px;
  height: 10.9px;
}

.wordmark--hero {
  width: 366.5px;
  height: 34.9px;
  background-position: center;
}

/* --- Header ------------------------------------------------------------- */

/* No border, no scroll behaviour — both are deliberate. */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 40px var(--header-pad);
  font-size: 14px;
}

.site-nav {
  display: flex;
  gap: 40px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* --- Shared measure ----------------------------------------------------- */

/* The gutter narrows the element itself instead of padding it, so the top rule
   stops short of the screen edge and its left end lines up exactly with the
   text's left edge. Padding would have stretched the border across the gutter
   and out to the viewport edges. */
.section,
.site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Each section opens with an 880px rule. */
.section {
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
  border-top: 1px solid var(--rule);
}

.section--tall {
  padding-bottom: var(--section-bottom-lg);
}

.section h2 {
  margin: 0 0 56px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.6;
}

/* --- First view --------------------------------------------------------- */

/* A still gradient. There is no animation here and none should be added.
   The 14 stops exist to prevent visible banding rings — do not thin them. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 280px 0 200px;
  gap: 36px;
  background-color: var(--bg);
  background-image: radial-gradient(closest-side,
      rgba(168, 118, 62, 0.115) 0%,
      rgba(168, 118, 62, 0.110) 8%,
      rgba(168, 118, 62, 0.101) 16%,
      rgba(168, 118, 62, 0.088) 24%,
      rgba(168, 118, 62, 0.075) 32%,
      rgba(168, 118, 62, 0.061) 40%,
      rgba(168, 118, 62, 0.048) 48%,
      rgba(168, 118, 62, 0.035) 56%,
      rgba(168, 118, 62, 0.025) 64%,
      rgba(168, 118, 62, 0.015) 72%,
      rgba(168, 118, 62, 0.009) 80%,
      rgba(168, 118, 62, 0.004) 88%,
      rgba(168, 118, 62, 0.002) 94%,
      rgba(168, 118, 62, 0) 100%);
  background-size: 1400px 700px;
  background-repeat: no-repeat;
  background-position: center center;
}

.hero-tagline {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: var(--text-sub);
  letter-spacing: 0.06em;
}

/* The only accent in the first view is the dash itself. */
.hero-tagline .dash {
  color: var(--accent);
}

/* --- Prose -------------------------------------------------------------- */

.prose {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.prose p {
  margin: 0;
}

/* --- Projects ----------------------------------------------------------- */

.project-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}

/* The spec fixes the height at 28px and calls the width approximate, so the
   real logo keeps its own aspect ratio instead of being squeezed into the
   placeholder's 140x28 box. */
.project-logo {
  display: block;
  width: auto;
  height: 28px;
}

.project-year {
  font-family: var(--font-latin);
  font-size: 15px;
  color: var(--text-sub);
  letter-spacing: 0.06em;
  line-height: 2;
}

.project-body {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* Fixed 4:3 frame on the surface colour. No radius, no shadow. */
.project-shot {
  width: 380px;
  flex: none;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-sizing: border-box;
}

.project-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-text {
  width: 440px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 15px;
  line-height: 2;
}

.project-text p {
  margin: 0;
}

.project-text h3 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The 24px accent rule beside 着想 / コンセプト. */
.project-text h3::before {
  content: "";
  display: block;
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.stack-30 {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.project-link {
  font-size: 14px;
}

.project-link a {
  color: var(--accent);
}

/* --- Company table ------------------------------------------------------ */

.spec {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.spec-row {
  display: flex;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.spec-row:first-child {
  border-top: 1px solid var(--rule);
}

.spec dt {
  width: 220px;
  flex: none;
  color: var(--text-sub);
}

.spec dd {
  width: 660px;
  flex: none;
  margin: 0;
}

/* --- Contact form ------------------------------------------------------- */

.lead {
  margin: 0 0 56px;
}

.form {
  width: 660px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field > label {
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* "必須" / "任意" are set in the sub colour — never red. */
.field-note {
  font-size: 12px;
  color: var(--text-sub);
}

/* Underline only: no box, no fill, no radius, no horizontal padding. */
.form input[type="text"],
.form input[type="email"],
.form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: var(--bg);
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 2;
  color: var(--text);
}

.form input[type="text"],
.form input[type="email"] {
  height: 48px;
}

.form textarea {
  height: 200px;
  padding: 8px 0;
  resize: vertical;
}

/* The focus state is the accent underline and nothing else. */
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form textarea:focus {
  border-bottom-color: var(--accent);
}

/* Scoped through .form so this matches the specificity of the base input rule
   above (both 0,2,1) and wins on order. Without .form the accent would lose to
   `.form input[type="text"]` and only the textarea would mark itself invalid. */
.form .field--invalid input,
.form .field--invalid textarea {
  border-bottom-color: var(--accent);
}

.field-error {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-sub);
}

.consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 2;
}

.consent input[type="checkbox"] {
  margin: 0;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--text);
  /* Keeps the control off the browser's default black, which is outside the
     six-colour palette even though the native checkbox never paints with it. */
  color: var(--text);
}

.consent a {
  color: var(--accent);
}

.submit {
  width: 200px;
  height: 56px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--text);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--text);
  cursor: pointer;
}

.submit:hover {
  background: var(--text);
  color: var(--bg);
}

/* Text inputs signal focus through the accent underline; controls that have
   no such state keep a keyboard-visible ring. */
.submit:focus-visible,
.consent input[type="checkbox"]:focus-visible,
a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* Honeypot: off-screen rather than display:none, which many bots skip. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Summary of server-side validation failures, in the site's own voice. */
.form-alert {
  margin: 0 0 40px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  line-height: 2;
  color: var(--text-sub);
}

.form-alert ul {
  margin: 0;
  padding-left: 1.4em;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  padding-top: 56px;
  padding-bottom: 80px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 2;
  color: var(--text-sub);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-nav a {
  color: var(--text-sub);
}

/* --- 768–1023px: fluid measure, project stays two columns --------------- */

@media (max-width: 1023px) {
  :root {
    --gutter: 40px;
    --header-pad: 40px;
  }

  .project-body {
    gap: 40px;
  }

  .project-shot {
    width: 42%;
    min-width: 240px;
  }

  .project-text {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .spec dd {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .form {
    width: 100%;
  }
}

/* --- 767px and below: single column ------------------------------------- */

@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --header-pad: 24px;
    /* Reduced, not collapsed: whitespace carries this design. */
    --section-bottom: 80px;
    --section-bottom-lg: 80px;
  }

  .site-header {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .site-nav {
    gap: 24px;
  }

  .hero {
    padding: 120px 0 100px;
    gap: 28px;
    /* Scale the glow to the viewport so it stays a glow, not a crop. */
    background-size: 130vw 45vh;
  }

  /* 32px type equivalent; tracking is baked into the SVG, so it cannot
     overflow the way a tracked text wordmark would. */
  .wordmark--hero {
    width: 244.3px;
    height: 23.3px;
  }

  .hero-tagline {
    font-size: 15px;
  }

  .project-body {
    flex-direction: column;
    gap: 32px;
  }

  .project-shot {
    width: 100%;
    min-width: 0;
  }

  .project-text {
    width: 100%;
    gap: 32px;
  }

  /* Label above value, per the responsive brief. */
  .spec-row {
    flex-direction: column;
    gap: 4px;
    padding: 20px 0;
  }

  .spec dt {
    width: auto;
    font-size: 14px;
  }

  .spec dd {
    width: auto;
  }

  .consent {
    align-items: flex-start;
  }

  .consent input[type="checkbox"] {
    margin-top: 6px;
  }

  .submit {
    width: 100%;
    max-width: 280px;
  }
}

/* --- Narrow phones (320px) ---------------------------------------------- */

@media (max-width: 374px) {
  :root {
    --gutter: 20px;
    --header-pad: 20px;
  }

  .site-header,
  .site-nav {
    font-size: 13px;
  }

  .site-nav {
    gap: 16px;
  }

  .wordmark--small {
    width: 99.7px;
    height: 9.5px;
  }
}