/* Approved sky/water image: AI-edited from Pexels / Lorena Martínez.
   Source, license and edit provenance in assets/concept-sky-water.
   Both career pages use TOP typography and shared content-spacing tokens. */
:root{
 /* How far the photo's faded tail reaches under the next section's JOBS heading. That section keeps its top clear for
    this length (general.css .roles, energy.css .jobs), so the heading sits on the photo's last light. */
 --concept-tail:calc(120 * var(--layout-unit));
}
.career-concept{
 /* 2026-10-06: the photo runs the full width and comes out of the page colour at the top and goes back into it at the
    bottom, along eased curves, the way the TOP's lake photo meets the page (replaces the rounded window B,
    image-candidates/20261006-concept-edge2/band-B.png). The photo still drifts with the page (motion.js).
    With the edges soft the section sits closer under the hero (--concept-pull), and the photo's faded head reaches up
    behind the bottom of the hero (--concept-head), whose pictures stay above it. */
 --concept-pull:calc(100 * var(--layout-unit));
 --concept-head:calc(120 * var(--layout-unit));
 --concept-fade-top:calc(320 * var(--layout-unit));
 --concept-fade-bottom:calc(320 * var(--layout-unit));
 position:relative;
 isolation:isolate;
 display:flex;
 align-items:center;
 min-height:calc(750 * var(--layout-unit));
 margin-top:calc(-1 * var(--concept-pull));
 padding:var(--space-5) 0 var(--section-gap);
 color:var(--navy);
}
.career-concept[id]{scroll-margin-top:30px}
.concept-photo{
 position:absolute;
 inset:calc(-1 * var(--concept-head)) 0 calc(-1 * var(--concept-tail));
 z-index:-1;
 overflow:hidden;
 background:#88bedf;
 -webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.024) calc(var(--concept-fade-top)*0.1),rgba(0,0,0,.095) calc(var(--concept-fade-top)*0.2),rgba(0,0,0,.206) calc(var(--concept-fade-top)*0.3),rgba(0,0,0,.345) calc(var(--concept-fade-top)*0.4),rgba(0,0,0,.500) calc(var(--concept-fade-top)*0.5),rgba(0,0,0,.655) calc(var(--concept-fade-top)*0.6),rgba(0,0,0,.794) calc(var(--concept-fade-top)*0.7),rgba(0,0,0,.905) calc(var(--concept-fade-top)*0.8),rgba(0,0,0,.976) calc(var(--concept-fade-top)*0.9),#000 var(--concept-fade-top),#000 calc(100% - var(--concept-fade-bottom)),rgba(0,0,0,.976) calc(100% - var(--concept-fade-bottom)*0.9),rgba(0,0,0,.905) calc(100% - var(--concept-fade-bottom)*0.8),rgba(0,0,0,.794) calc(100% - var(--concept-fade-bottom)*0.7),rgba(0,0,0,.655) calc(100% - var(--concept-fade-bottom)*0.6),rgba(0,0,0,.500) calc(100% - var(--concept-fade-bottom)*0.5),rgba(0,0,0,.345) calc(100% - var(--concept-fade-bottom)*0.4),rgba(0,0,0,.206) calc(100% - var(--concept-fade-bottom)*0.3),rgba(0,0,0,.095) calc(100% - var(--concept-fade-bottom)*0.2),rgba(0,0,0,.024) calc(100% - var(--concept-fade-bottom)*0.1),transparent);
 mask-image:linear-gradient(transparent,rgba(0,0,0,.024) calc(var(--concept-fade-top)*0.1),rgba(0,0,0,.095) calc(var(--concept-fade-top)*0.2),rgba(0,0,0,.206) calc(var(--concept-fade-top)*0.3),rgba(0,0,0,.345) calc(var(--concept-fade-top)*0.4),rgba(0,0,0,.500) calc(var(--concept-fade-top)*0.5),rgba(0,0,0,.655) calc(var(--concept-fade-top)*0.6),rgba(0,0,0,.794) calc(var(--concept-fade-top)*0.7),rgba(0,0,0,.905) calc(var(--concept-fade-top)*0.8),rgba(0,0,0,.976) calc(var(--concept-fade-top)*0.9),#000 var(--concept-fade-top),#000 calc(100% - var(--concept-fade-bottom)),rgba(0,0,0,.976) calc(100% - var(--concept-fade-bottom)*0.9),rgba(0,0,0,.905) calc(100% - var(--concept-fade-bottom)*0.8),rgba(0,0,0,.794) calc(100% - var(--concept-fade-bottom)*0.7),rgba(0,0,0,.655) calc(100% - var(--concept-fade-bottom)*0.6),rgba(0,0,0,.500) calc(100% - var(--concept-fade-bottom)*0.5),rgba(0,0,0,.345) calc(100% - var(--concept-fade-bottom)*0.4),rgba(0,0,0,.206) calc(100% - var(--concept-fade-bottom)*0.3),rgba(0,0,0,.095) calc(100% - var(--concept-fade-bottom)*0.2),rgba(0,0,0,.024) calc(100% - var(--concept-fade-bottom)*0.1),transparent);
}
.concept-photo img{
 display:block;
 width:100%;
 height:100%;
 max-width:none;
 object-fit:cover;
 object-position:50% 50%;
}
.concept-photo::after{
 content:"";
 position:absolute;
 inset:0;
 background:rgba(255,255,255,.22);
}
.concept-content{position:relative}
/* The words keep the paper sheets' inset from the screen's edge, and never left of the page's own column on wide screens. */
.career-concept .concept-content{
 flex:1;
 min-width:0;
 width:auto;
 margin-inline:max(var(--sheet-inset),calc((100% - var(--content-width)) / 2));
}
/* 2026-10-06: the heading stands in two vertical lines, 「光と水の力を、」 on the right and 「まちを支える電気へ。」 to
   its left (idea D, image-candidates/20261006-concept-explore/concept-D.png). The copy stays horizontal. The negative
   left margin is the half-leading of the left line, so its letters, not its line box, meet the page's left column.
   2026-10-08: the heading is two line heights wide and stands centred under the hero's turning disc, whose centre
   shared/career-concept.js gives as --concept-axis (from the content's left edge); without it the heading keeps the
   left column, as before (1.3em = the half-leading plus half the heading's width). */
.concept-content h2{
 writing-mode:vertical-rl;
 margin-left:calc(var(--concept-axis,1.3em) - 1.6em);
 font-size:var(--font-message);
 line-height:1.6;
 letter-spacing:.02em;
 color:inherit;
}
.concept-content h2 em{color:inherit}
/* Each letter of the heading, while its entrance plays (shared/career-concept.js). */
.concept-ch{display:inline-block}
.concept-copy{
 max-width:calc(650 * var(--layout-unit));
 margin-top:var(--space-4);
 font-size:var(--font-body);
 line-height:1.95;
 font-weight:500;
 text-wrap:pretty;
}
.concept-copy span{display:block}
@media(min-width:1024px){
 /* The copy is set large too, in the heading's weight and spacing, so the heading and the copy read as one statement
    instead of a title and a caption (2026-10-06: the larger words were liked; centring them was turned down). The
    type keeps to the layout's scale, so on very wide screens it stops growing with the band.
    The band is as tall as its words and its padding: little sky above the heading, a wide stretch of water under the
    copy before JOBS (2026-10-06: the space above was too large, the space below too small). The photo is drawn
    taller than its box and its upper sky is cut (--concept-crop), so the horizon (54.5% down the picture) crosses the
    middle of the vertical heading: 「光と水の」 stands in the sky and 「力を、」 in the water.
    The copy stands to the right of the heading, its last line level with the heading's last letter, on the water. */
 .career-concept{
  --concept-type:min(var(--tu),var(--layout-unit));
  --concept-crop:calc(330 * var(--layout-unit));
  align-items:flex-start;
  min-height:0;
  padding:calc(120 * var(--layout-unit)) 0 calc(300 * var(--layout-unit));
 }
 .concept-photo img{height:calc(100% + var(--concept-crop));margin-top:calc(-1 * var(--concept-crop))}
 .career-concept .concept-content{display:flex;align-items:flex-end;gap:calc(72 * var(--layout-unit))}
 .concept-content h2{font-size:calc(44 * var(--concept-type));letter-spacing:.06em}
 .concept-copy{
  max-width:none;
  margin:0 0 .5em;
  font-size:calc(28 * var(--concept-type));
  line-height:1.9;
  letter-spacing:.06em;
  font-weight:700;
 }
}
@media(max-width:1023px){
 :root{--concept-tail:90px}
 .career-concept{
  --concept-pull:60px;
  --concept-head:130px;
  --concept-fade-top:240px;
  --concept-fade-bottom:220px;
  align-items:flex-start;
  min-height:0;
  padding:110px 0 190px;
 }
 .career-concept[id]{scroll-margin-top:40px}
 .concept-content h2{margin-left:calc(var(--concept-axis,1.325em) - 1.65em);line-height:1.65;letter-spacing:0}
 .concept-copy{
  max-width:36em;
  margin-top:var(--space-6);
  line-height:2;
  text-align:left;
  letter-spacing:.02em;
 }
 .concept-copy span{display:inline}
 .concept-photo img{object-position:62% 50%}
}
/* Phones: the copy sits under the heading. The photo's faded head reaches far up behind the hero, so the heading
   stands in the sky and the copy on the water.
   2026-10-08: the band was too tall. Less sky over the heading, less water between it and the copy and under the copy;
   the picture runs 60px past the band's foot (cut there, in the faded tail), which keeps its horizon at the heading's
   last letter in the shorter band. */
@media(max-width:599px){
 .career-concept{--concept-head:200px;padding:84px 0 140px}
 .concept-copy{margin-top:44px}
 .concept-photo img{height:calc(100% + 60px)}
}
/* Tablets: the copy stands to the right of the heading, as on wider screens, and grows with the screen so its longest
   line stays on one line. The photo is cover-fitted by its height here, so its horizon sits at the middle of the
   photo's box: the head and the band's height put it just above the copy. */
@media(min-width:600px) and (max-width:1023px){
 .career-concept{--concept-head:240px;padding-bottom:250px}
 .career-concept .concept-content{display:flex;align-items:flex-end;gap:40px}
 .concept-copy{margin:0 0 .5em;font-size:clamp(16px,2.4vw,20px);line-height:1.9}
 .concept-copy span{display:block}
}