/* ============================================================
   Puentech - Emilio Puente, technology consultant.

   DESIGN NOTE. This site sells to shop owners, not to engineers,
   so it avoids both the agency look and the startup look. The
   reference points are an invoice and an engineering notebook:
   warm paper, near-black ink, one signal colour, hairlines instead
   of shadows, and a 4px radius that reads made rather than styled.

   Palette is deliberately unused by the fifteen Kobe client sites,
   so this page never looks like one of its own deliverables:
   petrol teal #0b5b63 on warm paper #f6f5f2. The Kobe set already
   holds ember, forest, Showa amber, cobalt, indigo, tan, tomato,
   bottle green, cyan, rose gold, Aegean blue, silver, magenta,
   citron and violet. Petrol is the gap, and it reads as utility
   rather than luxury, which suits the offer.

   Type: Space Grotesk for display, because its flat terminals and
   tight apertures read engineered without reading cold. Source
   Sans 3 for Latin body text (Inter is the default everyone uses).
   Zen Kaku Gothic New carries Japanese on every page.

   Mobile first. Every rule here is written for a 360px phone and
   widens at min-width. The Kobe project shipped fifteen sites with
   broken phone headers because nobody rendered them, so the header
   below is built to survive a narrow screen by construction: the
   brand never wraps, the language rail scrolls, and the CTA shrinks
   before anything clips.
   ============================================================ */

:root {
  --paper: #f6f5f2;
  --paper-2: #eceae5;
  --paper-3: #e2dfd8;
  --ink: #16181a;
  --muted: #55595d;
  --line: #d5d1c9;
  --accent: #0b5b63;
  --accent-deep: #084249;
  --accent-ink: #ffffff;
  --warn: #8a3d1e;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
  --nav-h: 64px;
  --wrap: 1120px;
  --r: 4px;
}

/* The Japanese page leads with the Japanese face so kana and kanji
   set with the right rhythm instead of falling through a Latin
   stack first. */
html[lang="ja"] {
  --font-display: "Zen Kaku Gothic New", "Space Grotesk", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Source Sans 3", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }

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

.nav {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(246, 245, 242, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { width: 100%; display: flex; align-items: center; gap: 0.75rem; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;          /* the name never breaks across lines */
  flex: 0 0 auto;
}
.brand .dot { color: var(--accent); }

.nav-links { display: none; }
@media (min-width: 900px) {
  .nav-links {
    display: flex; gap: 1.5rem; margin-left: 1.5rem;
    font-size: 0.95rem;
  }
  .nav-links a { color: var(--muted); text-decoration: none; }
  .nav-links a:hover { color: var(--ink); }
}

.nav .langsw { margin-left: auto; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: none; }
.btn-ghost:hover { border-color: var(--muted); }
.nav .btn { padding: 0.45rem 0.85rem; font-size: 0.88rem; flex: 0 0 auto; }

/* ---------- Sections ---------- */

section { padding: clamp(3.2rem, 8vw, 5.5rem) 0; }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.85rem, 6.2vw, 3.1rem); line-height: 1.18; }
h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.25; }
h3 { font-size: 1.08rem; line-height: 1.4; }

.lead { font-size: clamp(1.02rem, 2.4vw, 1.16rem); color: var(--muted); max-width: 34em; }
.sec-head { max-width: 42em; margin-bottom: clamp(2rem, 5vw, 3rem); }
.sec-head p { color: var(--muted); margin-top: 0.9rem; }

/* ---------- Hero ---------- */

.hero { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; } }

.hero h1 { margin-bottom: 1.2rem; }
.hero .lead { margin-bottom: 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.hero-ctas .btn { flex: 1 1 auto; min-width: 12rem; }
@media (min-width: 560px) { .hero-ctas .btn { flex: 0 0 auto; } }

.portrait { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

/* ---------- Emmy, hero element ----------
   Its own visual unit by design. The award is for news coverage and the
   automation savings are a separate fact, so they are never placed in
   the same block or sentence. The credited role is always shown: "Emmy
   winner" alone would let a reader assume a role he did not hold. */
.emmy-hero {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--paper-2);
  max-width: 34em;
}
.emmy-hero .mark {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  margin-top: 0.15rem;
}
.emmy-hero b { display: block; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.35; }
.emmy-hero span.detail { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }

/* ---------- Capability areas ---------- */
.caps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1.6rem; }
@media (min-width: 780px) { .caps { grid-template-columns: repeat(3, 1fr); } }
.caps article { background: var(--paper); padding: 1.25rem 1.2rem; }
.caps h3 { margin-bottom: 0.45rem; }
.caps p { font-size: 0.95rem; color: var(--muted); }

/* ---------- Numbers rail ---------- */

.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--paper); padding: 1.3rem 1.2rem; }
.fact b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700;
  line-height: 1.1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fact span { display: block; margin-top: 0.4rem; font-size: 0.9rem; color: var(--muted); }

/* ---------- Quote ---------- */

.quote {
  border-left: 3px solid var(--accent);
  padding: 0.3rem 0 0.3rem 1.3rem;
  max-width: 36em;
}
.quote p { font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.45rem); line-height: 1.45; }
.quote cite { display: block; margin-top: 0.9rem; font-style: normal; font-size: 0.9rem; color: var(--muted); }

/* ---------- Evidence list ---------- */

.ev { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .ev { grid-template-columns: repeat(2, 1fr); } }
.ev li { list-style: none; background: var(--paper); padding: 1.5rem 1.3rem; }
.ev .n {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums;
  display: block; margin-bottom: 0.6rem;
}
.ev h3 { margin-bottom: 0.45rem; }
.ev p { font-size: 0.98rem; color: var(--muted); }

/* ---------- Offer ---------- */

.offer { display: grid; gap: 1.1rem; }
@media (min-width: 780px) { .offer { grid-template-columns: repeat(2, 1fr); } }
.offer article {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.3rem; background: var(--paper);
}
.offer h3 { margin-bottom: 0.5rem; }
.offer p { font-size: 0.98rem; color: var(--muted); }

/* ---------- Work ---------- */

.work { display: grid; gap: 1.4rem; }
@media (min-width: 860px) { .work { grid-template-columns: repeat(3, 1fr); } }
.work article { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.work .body { padding: 1.2rem 1.2rem 1.4rem; }
.work h3 { margin-bottom: 0.4rem; }
.work p { font-size: 0.95rem; color: var(--muted); }
.work .more { display: inline-block; margin-top: 0.8rem; font-size: 0.92rem; font-weight: 600; color: var(--accent); }

/* ---------- Career ----------
   Deliberately not a vertical list of job titles. A prospect deciding
   whether to trust the person building their booking system needs the
   through-line, so the current roles sit first, the eight years at the
   broadcaster get a block of their own, and the award sits in its own
   panel. The award panel is separated on purpose: the Emmy is for news
   coverage and has nothing to do with the automation savings, and the
   two were conflated on older CVs. */

.org-now { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
@media (min-width: 720px) { .org-now { grid-template-columns: repeat(2, 1fr); } }

.org {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  padding: 1.3rem 1.25rem;
}
.org .when {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.org h3 { margin-bottom: 0.25rem; }
.org .role { font-weight: 600; font-size: 0.97rem; }
.org p { font-size: 0.95rem; color: var(--muted); margin-top: 0.5rem; }

/* The broadcaster block: the deepest credential, so it gets the width
   and a marked top edge rather than a louder colour. */
.org-feature {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--paper);
  padding: clamp(1.3rem, 4vw, 2rem);
  margin-bottom: 1.6rem;
}
.org-feature > header { margin-bottom: 1.3rem; }
.org-feature .span { font-size: 0.9rem; color: var(--muted); margin-top: 0.2rem; }

.roles { display: grid; gap: 0; }
.roles li { list-style: none; padding: 1rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.2rem; }
@media (min-width: 700px) { .roles li { grid-template-columns: 11.5rem 1fr; gap: 1.2rem; } }
.roles .dates { font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.roles b { font-weight: 600; }
.roles p { font-size: 0.94rem; color: var(--muted); margin-top: 0.25rem; }

.award {
  margin-top: 1.4rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.1rem 1.2rem;
}
.award h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }
.award p { font-size: 0.94rem; color: var(--muted); }

.org-grid { display: grid; gap: 1.1rem; }
@media (min-width: 720px) { .org-grid { grid-template-columns: repeat(2, 1fr); } }

.edu {
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid; gap: 1.1rem;
}
@media (min-width: 720px) { .edu { grid-template-columns: repeat(2, 1fr); } }
.edu .label { display: block; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.edu b { font-weight: 600; }
.edu p { font-size: 0.94rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------- Timeline ---------- */

.cv { display: grid; gap: 0; max-width: 46em; }
.cv li { list-style: none; padding: 1.1rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.15rem; }
@media (min-width: 640px) { .cv li { grid-template-columns: 10.5rem 1fr; gap: 1.2rem; } }
.cv .when { font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cv .what b { font-weight: 600; }
.cv .what p { font-size: 0.95rem; color: var(--muted); margin-top: 0.2rem; }

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

.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-list { display: grid; gap: 0.2rem; }
.contact-list li { list-style: none; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.contact-list .label { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.contact-list a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 44px; }

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

footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
.note { margin-top: 1.4rem; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }

/* ---------- Compact phone header ----------
   Below 430px the brand, the language rail and the button stop
   competing for room instead of overflowing. Learned the hard way:
   on the Kobe sites the booking button ran off the right edge on
   eleven of fifteen phones and no automated check saw it, because a
   fixed header reports no document overflow. */
@media (max-width: 430px) {
  .nav .wrap { gap: 0.45rem; }
  .nav .btn { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
  .brand { font-size: 1rem; }
}

/* At 360px, three languages plus the brand and the button no longer fit,
   and lang.css only hides the NON-current autonym. Measured on the
   Japanese page: 「日本語」 was clipped to 「日」, which is the label for
   the language the visitor is already reading. Below 400px every entry
   drops to its flag and the current one stays marked by its border, so
   nothing is half a word. The autonyms return at 400px and above. */
@media (max-width: 400px) {
  .nav .langsw a .name { display: none; }
  .nav .langsw a { padding: 0.35rem 0.42rem; }
  .nav .langsw { gap: 0.15rem; }
}